AJAX table sorting and pagination

the javascript package that enables the table sorting is (oddly enough) “tablesorter”. You’ll need to call the jquery object to request that it be loaded, I believe.

Something along these lines:

$this->EE->jquery->plugin(BASE.AMP.'C=javascript'.AMP.'M=load'.AMP.'plugin=tablesorter', TRUE);

And then you’ll need to configure it with the settings object you require:

$this->EE->jquery->tablesorter('#my_addons_table', '{
    textExtraction: "complex",
    widgets: ["zebra"]
}');

the documentation for tablesorter can be found here.

hope that helps.

Hi ender,

Many thanks for this. I have got the table sorting working fine now.

Any tips of AJAX pagination? Is this something you can attach to a table in a third party module?

Best wishes,

Malcolm

Assuming this is in the control panel, you’d want to load the plugin with the cp::add_js_script() method.

eg:

$this->EE->cp->add_js_script(array('plugin' => 'tablesorter'));

This will load it in the javascript combo loaders, thus helping to reduce page weight.

-greg

Do you have a copy of the sample ‘Download’ module? It’s pretty simple and you can likely use it as a base for figuring out the table sorting and pagination.

Thanks Robin, I’ve got the Downloads module and opened it up.

I’m usually pretty good at decoding other peoples’ JavaScript, but this has got my stumped.

I have loaded in the JS library:

$this->EE->load->library('javascript');

I load in the plugins:

$this->EE->cp->add_js_script(array('plugin' => 'dataTables'));
$this->EE->cp->add_js_script(array('plugin' => 'tablesorter'));

I define the columns:

$this->EE->jquery->tablesorter('.mainTable', '{headers: {3: {sorter: false}}, widgets: ["zebra"], sortList: [[0,0]]}');

I compile the JS

$this->EE->javascript->compile();

Then when I try and resort my table the header highlights and the arrow shows in the right, but I get this JavaScript error.

Error: sortText is not defined

I’ve looked at other example and can’t see what I’m doing differently. Anyone got any ideas what’s missing?

Many thanks,

Malcolm

Ah- you want to use either datatables or tablesorter. Tablesort is a billion times easier- but it only works on a single page of data. (You can fidge it a bit- but that’s what it boils down to.)

datatables allows you to sort across multiple pages- using ajax. It also allows you to paginate. It’s also- a lot more complicated- mostly because you have the ajax calls.

So- try ditching table sorter. The take a look at edit_items_ajax_filter() - that basically constructs the ajax data array. Then look at ajax_filters - that generates the actual javascript. There’s no need to stick it in its own function like that- but I just like getting it out of my main function because it takes up so much room.

Like I say- WAY more complicated than tablesorter.

Thanks again Robin, I can see how these two are different now.

I have been using Member Groups as my example as this uses the ‘tablesorter’ method.

This was working fine but we have just upgraded our installation of EE to the latest build (v2.1.0 Build 20100805) and the Member Groups column sorting is no longer working.

I get a JavaScript error when I click any of the headers: sortText is not defined

Is anyone else having this problem?

Many thanks,

Malcolm

Argh- and yes, that’s actually a bug- you’re doing nothing wrong there (though I wouldn’t use the two sorters together.

It looks like tablesorter.js doesn’t like being compressed- this will be fixed up in the next release.

Thanks Robin,

Grabbed the latest build (v2.1.0 Build 20100810) and the table sorted is working fine now.

Best wishes,

Malcolm