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]]
}).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!
- 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.
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.
精彩评论