开发者

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

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜