表格排序在Ajax响应数据的情况下排序不起作用

Question

我正在尝试使用tablesorter对数据进行排序。

排序工作正常，如果我不使用Ajax调用，这是我的小提琴

http://jsfiddle.net/abkNM/6740/

但是，如果我使用Ajax调用，则排序不起作用

http://jsfiddle.net/abkNM/6742/

这是我的代码

JQUERY

function loadXMLDoc(value, index) {
    var difference = '100';
    var name = value;
    if (index == 1) {
        difference = '200';
    }
    var html = '<tr>\
                            <td class="text-center"><label for="' + name + '" class="marg_none"><div></div></label></td>\n\
                            <td>' + name + '</td>\n\
                            <td>' + difference + '</td>\n\
                           </tr>';
    $("#positivebody").append(html);
}

能告诉我如何解决这个问题。

Answer 1

这是因为您新添加的表行是动态添加的，而您的表分类器插件之前已经初始化了。

因此，您需要重新初始化表格分类器插件

$("#positivebody").append(html); // append new table rows
$("#myTable").
    .trigger('destroy') // first destroy your tablesorter 
    .tablesorter({}); // re-initialize it again

或者，您可以尝试，

$("#positivebody").append(html);     
 // set sorting column and direction, this will sort on the first and third column 
var sorting = [[2,1],[0,0]];     
$("#myTable")
      .trigger("update") // let the plugin know that we made a update 
      .trigger("sorton",[sorting]); // sort on the first column 

表格分类器Ajax-Example

Answer 2

您在触发AJAX调用之后但在完成之前调用.tablesorter()。会发生什么，如下所示：

1. .ajax（...）＃row 1抓取开始
2. .ajax（...）＃row 2抓取开始
3. .tablesorter（）
4. row1结果到达，调用row1＆＃39; success处理程序添加行
5. row2结果到达，调用row2＆＃39; success处理程序添加行

尝试在值到达后运行.tablesorter()。每个success运行可能太多了，但它取决于你。

Answer 3

这是因为调用.tablesorter({ });时未通过ajax加载html。在方法tablesorter中附加html后，您需要调用loadXMLDoc。

$('#myTable').tablesorter({});
$("#positivebody").append(html);

Answer 4

http://jsfiddle.net/abkNM/6748/

function loadXMLDoc(value, index) {
    var name = value;
    var difference = '100';
    if (index == 1) {
        difference = '200';
    }
     $.ajax({
        type: 'POST',
        url: '/echo/html/',
         async:false,
        data: {
            title: value
        },
        success: function(data) {
        var html = '<tr>\
  <td class="text-center"><label for="' + name + '" class="marg_none"><div></div></label></td>\n\
                            <td>' + name + '</td>\n\
                            <td>' + difference + '</td>\n\
                           </tr>';

          $("#positivebody").append(html);  
        }
    });
}