使用tablesorter.js对表中的ajax数据进行排序

时间:2014-06-04 23:34:52

标签: javascript jquery tablesorter

我尝试使用tablesorter.js,但在使用ajax更新表时遇到了问题。我跟着the code on this page,但它似乎没有正常工作。我还注意到的一件事是,即使在示例网站上,代码也无法正常工作。当我点击"追加新的表数据"它将数据添加到表中,但它没有正确排序。如果我复制javascript代码并将其粘贴到控制台,它工作正常并正确排序表。我正在使用的代码如下:

var updateTableSort = function(){
    var table = $('#transaction-table')
    //tells table sorter that table has been updated
    table.trigger("update");
    //re sorts after table has been updated based on 
   //current sort patern
    var sorting=table.get(0).config.sortList;
    table.trigger('sorton', [sorting]);
}    

同样,如果我复制并将其复制到控制台中它可以正常工作,但是当我在成功的ajax函数中使用它时,它并没有正确地对表进行排序。任何帮助搞清楚问题是什么都将受到高度赞赏

1 个答案:

答案 0 :(得分:0)

试试我的fork of tablesorter。它会在更新后自动对表进行解析:

// pass anything BUT false and the table will resort
// using the current sort
$("table").trigger("update", [false]);

以下是updated append data to the table using ajax demo

$(function() {

  $("table").tablesorter({ theme : 'blue' });

  $("#ajax-append").click(function() {

    $.get("assets/ajax-content.html", function(html) {

      // append the "ajax'd" data to the table body
      $("table tbody").append(html);

      // let the plugin know that we made a update
      // the resort flag set to anything BUT false (no quotes) will
      // trigger an automatic
      // table resort using the current sort
      var resort = true;
      $("table").trigger("update", [resort]);

      // triggering the "update" function will resort the table using the
      // current sort; since version 2.0.14
      // use the following code to change the sort; set sorting column and
      // direction, this will sort on the first and third column
      // var sorting = [[2,1],[0,0]];
      // $("table").trigger("sorton", [sorting]);
    });

    return false;
  });

});