CODEWITHSUNDEEP
jquerytablesorterpager
danielc
danielc

Reputation: 55

jQuery Tablesorter Pager plugin & Ajax Update

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...

Upvotes: 0

Views: 4612

Answers (3)

Max Mayhem
Max Mayhem

Reputation: 165

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!

Upvotes: 2

danielc
danielc

Reputation: 55

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.

Upvotes: 0

Oliver M Grech
Oliver M Grech

Reputation: 3171

  1. Make sure you are refreshing your container after you update the database table
  2. 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.

Upvotes: 0

Related Questions