jQuery + TableSorter：表为空时出错

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

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

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

Answer 2

这已在最新的表格排序器 (see issue 95) 中得到修复。

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

问题与代码库的几个部分使用 rows[0] 来确定 1) 总列数，2) 每列使用的解析器类型有关（例如“文本”与“数字”）。

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

1. 在每个表中创建一个假行，其内容如 ("fake", 123, 123, 123, "fake")。请注意我的虚假内容如何与列的“类型”相匹配，以避免混淆列类型检测器。

   
   假
   123
   

2. 添加 CSS 样式以使假行不呈现：

   tr.fake_row {
       显示：无；
   } 

这似乎很有效，允许 tablesorter 初始化和运行无错误，并且对呈现的输出没有影响。

Answer 5

我认为你可以为自己做。

    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)

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