jQuery Tablesorter Pager plugin & Ajax Update

Question

I have a tablesorter table which works fine currently, using an ajax method to update the table data. I have added the tablesorter Pager plugin and now the

$(.tablesorter').trigger("update");

function while updating the table, is not updating the pager which still shows the previous row / page count.

I am using:

    //init tablesorter
    $('#tblCustomers').tablesorter({
            headers: { 0: { sorter: false}},
            sortList: [[5,1]]               
    }).tablesorterPager({container: $("#pager")});
    //search listener
    $('input.search').change(function() {
                 $.post('search.php', { 'keyword' : $(this).val() }, function(data) {
                        $('#tblCustomers tbody').html(data);
                        $('#tblCustomers').trigger('update');
                 }
    });

Advice please...

I had the same issue. This might help: http://stackoverflow.com/a/9000306/1168836 — Albertyto, Jan 25 '12 at 09:32

score 2 · Answer 1 · answered Apr 16 '13 at 19:54

danielc's answer almost works perfectly, but the pager will skip pages. I fixed this with another answer I found and here is what I came up with:

function tableUpdated() {
$('#pager *').unbind('click');
$("#table") 
.tablesorter({
    // zebra coloring
    widgets: ['zebra']
}) 
.tablesorterPager({container: $("#pager")}); 
}

Hope this helps, happy coding!

score 0 · Answer 2 · answered May 23 '11 at 08:20

0

Make sure you are refreshing your container after you update the database table
Be aware of cache, I would add a random query string with search.php ( ex. search.php?cachebuster=arandomnumberhere ) to be sure to prevent page caching.

There are multiple methods to control cache. You can set it up on the server, via htaccess, the random number mentioned before etc etc.

answered May 23 '11 at 08:20

Oliver M Grech

3,071
1
21
36

>> Make sure you are refreshing your container after you update the database table Please explain? – danielc May 23 '11 at 08:43

score 0 · Answer 3 · answered May 24 '11 at 00:45

function tableUpdated() {
    $('#tblCustomers').tablesorter({
        headers: { 0: { sorter: false}},
        sortList: [[5,1]]               
    }).tablesorterPager({container: $("#pager"), positionFixed: false});
}   

$(document).ready(function() {
   $('input.search').change(function() {
      $.post('search.php', { 'data': data } , function(data) {
        tableUpdated();
      });
   });

It turns out the solution is to move the table initialization into a separate function, and call that inside the success part of $.post

After hours of reading google results, this is the only thing that has worked in my case.

This doesn't work. It removes all the records except those of the presently visible page. — Jason Jackson, Feb 24 '12 at 22:42

jQuery Tablesorter Pager plugin & Ajax Update

3 Answers3