Question

jQuery的插件TableSorter似乎没有处理它附加到空表的情况。这有什么好的方法吗？

在我的应用程序中，用户可以过滤和搜索数据，最终他或她将提出不返回任何值的搜索条件。在这些情况下，最好“分离”TableSorter或以某种方式修复它的代码，以便它可以使用空表。

我目前正在使用这样的插件：

    $("#transactionsTable")
    .tablesorter({ widthFixed: true, widgets: ['zebra'] })
    .tablesorterPager({ container: $("#pager"), positionFixed: false });

这很有效，直到表为空。然后我收到以下错误：

Line: 3
Error: '0.length' is null or not an object

有什么想法吗？是否可以更改脚本，以便只有在表中有行时才将表输入添加到表中？

Answer 1

我认为你可以为自己做到这一点。

    if ($("#transactionsTable").find("tr").size() > 1)
    {
          //> 1 for the case your table got a headline row
          $("#transactionsTable")
          .tablesorter({ widthFixed: true, widgets: ['zebra'] })
          .tablesorterPager({ container: $("#pager"), positionFixed: false });
    }

如果你的桌子有一个tbody标签，那就更容易了：

if ($("#transactionsTable").find("tbody").find("tr").size() > 0)

这种方式可能不是最专业的方式，但它应该在这种情况下起作用。

Answer 2

该问题与以下事实有关：代码库的几个部分使用rows [0]来确定1）列的总数，2）每列使用的解析器类型（例如“text”与“digit”）。

在修复此错误之前，这是一个简单的解决方法：

在每个表中创建一个假行，其内容如（“假”，123,123,123，“假”）。请注意我的假内容如何与列的“类型”匹配，以避免混淆列类型检测器。
```
<tr class="fake_row"><td>fake</td><td>123</td></tr>
```
添加CSS样式以使假行不呈现：
```
tr.fake_row { 
    display: none; 
} 
```

这似乎有效，允许tablesorter初始化并运行无错误，并且对渲染输出没有影响。

Answer 3

更通用的方法是覆盖tablesorter插件本身以检查空表（直到他们解决问题）。有关重写jquery核心方法的信息，请参阅此文章：http://www.bennadel.com/blog/1624-Ask-Ben-Overriding-Core-jQuery-Methods.htm

(function () {
  // Store a reference to the original tablesorter plugin.
  var originalTableSorter = jQuery.fn.tablesorter;

  // Define overriding method.
  jQuery.fn.tablesorter = function () {
    if (this.find('tbody tr').size() == 0) {
        if (typeof console != "undefined" && console.log) {
            console.log('skipping tablesorter initialization - table is empty');
        }

        return;
    }
    // Execute the original method.
    originalTableSorter.apply(this, arguments);
  }
})();

Answer 4

这已在最新的tableorter（see issue 95）中得到修复。

Answer 5

由于覆盖插件总是一个坏主意，这里有一个不同的方法：如果你只是想确保你的数据表包含实际的数据行，那么jQuery选择器：has（）也可以完成工作。 / p>

$('table.tablesorter:has(tbody tr)').tablesorter({
    // your tablesorter config here
});

jQuery + TableSorter：表为空时出错

5 个答案: