Problem with tablesorterPager when removing/updating table rows
I'm trying to use jquery table sorter with pagination. I have problem when I do dynamic update of the table. After clicking "#append" button(see the code) I'm changing the whole table body content. The paginator recognises this action, but when I click next it jumps two pages forward after first update, three pages forward after second update etc. Instead of one page...
I dont know what I'am doing wrong. Here is my code:
$(document).ready(function() {
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} , {headers: {1: {sorter: false}, 2: {sorter: false}, 3: {sorter: false}, 4: {sorter: false}, 5: {sorter: false}, 6: {sorter: false}, 7: {so开发者_运维技巧rter: false}}})
.tablesorterPager({container: $("#pager")});
$("#append").click(function() {
// add some html
$.post("log_msg.asp", $("#msgForm").serialize(),
function(data) {
$('body').find("#myTable colgroup").remove();
$("#msgs").html($("#msgs" , data).html());
//$("#myTable").trigger("update")
$('body').find("#myTable")
.tablesorter( { widthFixed: true, widgets: ['zebra']} )
.tablesorterPager( { container: $("#pager") } );
});
// let the plugin know that we made a update
return false;
});
});
Any clue?
Thanks in advance Cheers Magda
I think the event is getting attached multiple times. can you try this code which will basically unbind the click event and then bind it again.
$(document).ready(function() {
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} , {headers: {1: {sorter: false}, 2: {sorter: false}, 3: {sorter: false}, 4: {sorter: false}, 5: {sorter: false}, 6: {sorter: false}, 7: {sorter: false}}})
.tablesorterPager({container: $("#pager")});
$("#append").unbind('click').click(function() {
// add some html
$.post("log_msg.asp", $("#msgForm").serialize(),
function(data) {
$('body').find("#myTable colgroup").remove();
$("#msgs").html($("#msgs" , data).html());
//$("#myTable").trigger("update")
$('body').find("#myTable")
.tablesorter( { widthFixed: true, widgets: ['zebra']} )
.tablesorterPager( { container: $("#pager") } );
});
// let the plugin know that we made a update
return false;
});
});
I tried this.. I opened the jquery.tablesorter.pager.js file and modified a little as follows.. Inside the construct function, add the following two lines
$(config.cssNext,pager).unbind('click');
$(config.cssPrev,pager).unbind('click');
just above
$(config.cssFirst,pager).click(function() {
moveToFirstPage(table);
return false;
});
This worked for me.. hope it works for you as well. Good luck! Vinod
精彩评论