⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Ajax Pagination/Search with Datatables Theme



radeon
  • profile picture
  • Member

Posted 02 March 2013 - 10:30 AM

Hi All,

 

Im just getting to grips with the use of Grocery Crud and I'm finding it to be a real amazing thing to work with. However, I'm using the twitter bootstrap css framework and find the datatables theme suits the style much better than flexigrid.

 

My only problem seems to be that the datatables theme doesnt seem to support ajax pagination/search/server-side processing.

 

the datadables.net site appears to support it ok

http://datatables.net/release-datatables/examples/data_sources/server_side.html

 

I obviously realise its a little more complecated than just because the above has it then so should GroceryCrud too. i's there any help, guids or information i might be able to get to get it into the Datatables theme?

 

Once again, may I repeat how great GroceryCrud is!

 

All the best, Rad


davidoster
  • profile picture
  • Member

Posted 03 March 2013 - 11:13 AM

I don't quite understand your question to be honest.

Here, there is an example, using datatables theme and there is ajax pagination and search!

http://www.grocerycrud.com/examples/offices_example

 

This is what you mean that is not supported?

Because what you see here is the default behavior of the theme (datatables) when you set it within your controller function!


radeon
  • profile picture
  • Member

Posted 03 March 2013 - 15:12 PM

Thats not ajax server server side pagination though? on the example you link to, all data is retrieved on page load and its just javascript being used to do the pagination and search.

 

When paging is enabled in the config for flexgrid then true ajax serverside pagination and search is enabled - meaning the data you see on screen is the only data retrieved from the database, then if search is performed or the next page button clicked, another query is run and that data is then retrieved.

 

What i am trying to do is get the datatables theme with proper serverside scriping to speed up the initial page load as with 15k of records being retrieved on page load, it takes a while.

 

Any suggestions?

 

Thanks


davidoster
  • profile picture
  • Member

Posted 04 March 2013 - 10:02 AM

Check this, http://www.datatables.net/examples/data_sources/server_side.html

and amend your code as appropriate!


radeon
  • profile picture
  • Member

Posted 04 March 2013 - 10:28 AM

Thats the link i gave in the first post?! I assume you didnt read my initial post very well, as clearly that hasnt helped me which is why i asked if anyone else had done it or could offer help.

 

Your initial response clearly shows you had not read my question properly and now your second response is the same??

 

I figured i would ask the Grocery crud community as i can only see how this would further enhance what is already a great library.


davidoster
  • profile picture
  • Member

Posted 04 March 2013 - 11:55 AM

You are right, I can't remember all the details that everybody says and I try to answer!!!

I answer with the flow, I don't read again and again the whole post from the start!!!

I can't do this when I have to help in a few dozens of requests everyday!!!

 

You welcome for the help I didn't give you then!

 

But since I am here to help, redirect (yourself) this question into here: https://github.com/scoumbourdis/grocery-crud/issues?sort=created&state=open


radeon
  • profile picture
  • Member

Posted 04 March 2013 - 12:45 PM

Having read your responses a second time, I think it may be your excessive use of exclamation marks which changes what you're trying to say into what I feel is a very condescending, aggressive and sarcastic manner.

As my first post on this forum, asking a question, (having already checked all release note, other threads and documentation), I can't say that your responses do anything for the community.

By not reading the question then simply stating that you don't have time to, says to me that you shouldn't be trying to help in the first place as by not reading the question and giving an incorrect answer just confuses the matter further.

If there is anyone else who might be able to direct me to more of a grocery crud oriented solution then I would be truly greatful.

I do not wish to cause any trouble or come across ungrateful but the answers I have had so far are either wrong un repetition of my own question

Thanks

jjwdesign
  • profile picture
  • Member

Posted 12 June 2013 - 03:47 AM

Rad,

 

If I understand you correctly, you want to use Datatables in the AJAX per page style of data loading rather than trying to use all of the data at one time - as it currently is with the Datatables theme. I've started down this development path to see how difficult it would be. I have not gotten this to work, but it looks possible.

 

First, I copied the "datatables" them to "datatables_ajax".  I then figured out that the list.php view can be used to output the JSON aaData that Datatables uses as it's source ({controller}/index/ajax_list - action). The list_template.php on the other hand is where many of the controls are located. I have not gotten any further... Maybe some day I will continue the efforts. Good luck!

 

The code below has a few hacks in it, but it does load the AJAX data from list.php into the Datatable.

<?php
// Determine admin status and route
$ci =& get_instance();
$controller = $ci->router->fetch_class(); // class = controller
$method = $ci->router->fetch_method();

$base_url_to_replace = site_url('');

// Make JSON Data (aaData) for Datatables

// Format List Data for Datatables aaData
$datatables_data = array();

$datatables_data = array();

foreach ($list as $num_row => $row)
{
    $datatables_row = array();
    foreach ($columns as $column)
    {
        $datatables_row[] = $row->{$column->field_name};
    }
    
    $actions_value = '';
    if (!$unset_delete || !$unset_edit || !empty($actions))
    {
        if (!empty($row->action_urls))
        {
            foreach ($row->action_urls as $action_unique_id => $action_url)
            {
                // JJW - Cutom url hack
                $action_url = str_replace($base_url_to_replace, '/', $action_url);
                $action = $actions[$action_unique_id];
                // JJW - custom target hack
                $target = (preg_match('/desc/i', $action->label) || preg_match('/note/i', $action->label)) ? ' target="_blank"' : '';
                
                $actions_value .= '<a href="'.$action_url.'" class="edit_button ui-button ui-widget ui-state-default ui-corner-all '.
                    'ui-button-text-icon-primary target_blank_class" role="button"'.$target.'>'.
                    '<span class="ui-button-icon-primary ui-icon '.$action->css_class.' '.$action_unique_id.'"></span><span '.
                    'class="ui-button-text">&nbsp;'.$action->label.'</span></a>';
            }
        }
        
        if (!$unset_edit)
        {
            $actions_value .= '<a href="'.$row->edit_url.'" class="edit_button ui-button ui-widget ui-state-default ui-corner-all '.
                'ui-button-text-icon-primary" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>'.
                '<span class="ui-button-text">&nbsp;'.$this->l('list_edit').'</span></a>';
        }
        if (!$unset_delete)
        {
            $actions_value .= '<a onclick = "javascript: return delete_row(''.$row->delete_url.'', ''.$num_row.'')" '.
                'href="javascript:void(0)" class="delete_button ui-button ui-widget ui-state-default ui-corner-all '.
                'ui-button-text-icon-primary" role="button">'.
                '<!-- span class="ui-button-icon-primary ui-icon ui-icon-circle-minus" /span -->'.
                '<span class="ui-button-text" style="padding: 0.4em 0.5em 0.4em 0.5em;">'.
                // JJW Hack X for $this->l('list_delete');
                'X</span></a>';
        }
        
        $datatables_row[] = $actions_value;
    }
    
    $datatables_data[] = $datatables_row;
}
$datatables_data = array('aaData' => $datatables_data);

//$ci->output->set_content_type('application/json');
echo json_encode($datatables_data);