jQuery 表排序器错误

Question

刚刚更新到最新的表格排序器，看起来像是坏了之类的。每次我尝试打开我的页面时，Firebug 都会说：

table.config.parsers 未定义

它只会破坏我所有的 Javascript。 如果我恢复 tablesorter 版本，它会正常工作。

JavaScript：

$("#List").tablesorter({ 
    widgets: ['zebra'],
    headers: { 
        4: { sorter: false }
    }
})

HTML：

<table id="List" class="tablesort ui-widget-content ui-corner-top">
    <thead>
      <tr class="ui-widget">
          <th>Pa&iacute;s</th>
          <th>ISO</th>
          <th>ISO3</th>
          <th>CODE</th>
          <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 1

问题似乎是，如果通过 JavaScript 填充表格，除非浏览器显示了新内容，否则表格排序器不会找到新内容。

在 setTimeout() 例程中触发表排序器为我消除了该错误。

    function initPage() {
        fillMyTable();
        // Init table sorter, but give the browser a second to draw the new table
        setTimeout(function(){ $("#my_table").tablesorter(); }, 1000);
    }

Answer 2

另一个答案，以防万一有人遇到与我相同的情况。显然，表排序器有时喜欢在空 内有匹配数量的空 元素（与标头元素相同）。我的部分示例如下

<thead>
    <tr>
        <th class="{sorter: 'text'}'' "><a href="javascript:;" title="Sort" class="arrow"><span>Network Name</span></a></th>
        <th class="{sorter: 'text'} "><a href="javascript:;" title="Sort" class="arrow"><span>Type</span></a></th>
        <th class="{sorter: false}"><a href="javascript:;" title="Sort" class="arrow"><span>Interconnections</span></a></th>
        <th class="{sorter: false}"> </th>
    </tr>
</thead>

<tbody>
    <tr style="display:none"><td></td><td></td><td></td><td></td></tr>.........................

Answer 3

请注意，tablesorter AJAX 示例仅演示了附加新行的场景 到现有的。当动态清空表并用新行重新填充表时，会出现上述错误。

添加一个空行，

<tr style="display:none"><td></td>...<td></td></tr>

其 数量与标头中 的数量相同，可以消除该错误，但会引入另一个错误：表被清空并用实际行重新填充，新行将附加到旧行。

作为修改 tablesorter 源代码的替代方法，请尝试以下调用顺序：

$("#my-table").trigger("update");
setTimeout(function() { 
    /* e.g. sort by the second column in descending order */
    var sorting = [[1, 1]];
    $("#my-table").trigger("sorton", [sorting]);
}, 100);

Answer 4

我遇到了一种情况，当我收到错误消息时没有专门更新 tablesorter，只是因为 tfoot 元素中的列数与 thead 中的列数不匹配和 tbody，所以 tablesorter 插件对此感到困惑。

人们可能会在更新表排序器的同一天犯这个错误。我想我也应该在这个主题中分享这个技巧，以供将来参考。

Answer 5

尽管上面的答案没有提到它，但我能够通过首先实例化 tablesorter() 然后触发排序请求来复制错误。

当通过 AJAX 或其他方式用新数据附加或替换现有表数据时，这种事件顺序是必要的：

// populate our table body with rows
$("#myTable tbody").html(json.tbody);

// let the sorting plugin know that we made a update
$("#myTable").trigger("update");

// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];

// sort
$("#myTable").trigger("sorton",[sorting]);

“update”和“sorton”事件的组合似乎触发了错误。当处理“sorton”事件时，DOM 尚未分配给 table.config.parsers - 因此出现错误。

修复方法是将“sorton”事件处理封装在 1 毫秒超时内。

将 jquery.tablesorter.js（第 803 行）中现有的“sorton”绑定替换为以下内容：

}).bind("sorton", function (e, list) {
    var me = this;
    setTimeout(function () {
        $(this).trigger("sortStart");
        config.sortList = list;
        // update and store the sortlist
        var sortList = config.sortList;
        // update header count index
        updateHeaderSortCount(me, sortList);
        // set css for headers
        setHeadersCss(me, $headers, sortList, sortCSS);
        // sort the table and append it to the dom
        appendToTable(me, multisort(me, sortList, cache));
    }, 1);

tablesorter() 是确实是一个方便的插件。感谢克里斯蒂安发布它。

Answer 6

有点晚了，但是，这是因为 中有一个空/没有 元素，并且它需要至少一个 ;。

Answer 7

我尝试了上面的一些答案，但它们对我们使用表排序器的每个页面都没有帮助。我认为错误的主要原因是 c=sortList[i][0] 未定义，要么因为我们有一个空 TR，要么我们的 TD 数量与 TH 数量不同。

如果我有表格数据，我有 8 TH/TD 和 8 TH & TD。单身 TD，以防我没有什么可展示的。我设法检查我是否没有表数据，然后不调用 tablesorter 对不存在的特定列进行排序。这成功了。可能会帮助有类似情况的人

if(tableData.length != 0){
  $("#myid").tablesorter( {sortList: [[2,0]]});
}