开发者

jQuery Tablesorter Pager plugin & Ajax Update

开发者 https://www.devze.com 2023-03-07 13:36 出处:网络
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

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]]               
    }).tabl开发者_StackOverflowesorterPager({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...


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!


  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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消