jQuery TableSorter 仅适用于 ID（数字字段），不适用于文本、日期等其他字段

Posted 2023-05-09

【中文标题】jQuery TableSorter 仅适用于 ID（数字字段），不适用于文本、日期等其他字段

【英文标题】：jQuery TableSorter working only on ID (numeric field), not on other fields like text , date etc

【发布时间】：2012-05-12 15:17:40

【问题描述】：

在我的 Web 应用程序中，我为用户记录维护了表。记录在客户端发送时添加和删除，然后用户单击保存按钮以保存在服务器上完成的所有操作。

我已将表格排序器应用于表格上的排序功能。但令人惊讶的是，排序功能仅适用于 ID 字段，即表的第一个字段，但对于所有其他字段，它会给出错误（来自 chrome 的错误跟踪）

Uncaught TypeError: Cannot read property 'type' of undefined
multisortjquery.tablesorter.js:600
$.extend.tablesorter.construct.each.$headers.click.mousedown.onselectstart 

这是表结构。

<table id="contentTable" class="tablesorter">
                        <thead>
                            <tr>
                                <th> ID </th>
                                <th> Name </th>
                                <th> Birth Date </th>
                                <th> City </th>
                                <th id="actionheader"> Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>

在此我动态添加数据。 在这种情况下，排序仅适用于第一个字段，即 ID 字段

这就是我初始化 tableSorting 的方式。

  function initializeTableSorting() 
        $("#contentTable").tablesorter(
            sortList : [[0, 0]],
            headers : 
                0 : 
                    sorter : "integer"
                ,
                1 : 
                    sorter : "text"
                ,
                2 : 
                    sorter : false
                ,
                3 : 
                    sorter : "text"
                ,
                4 : 
                    sorter : false
                
            
        );
    

如果我从初始化中删除 false 选项，我怎样才能使所有字段都工作，甚至 日期字段也可以工作？

【参考方案1】：

遇到“完全相同”的问题并且不知道如何解决它，花了一些时间，但最终发现我正在为 tableSorter 提供数据中的空行（后面是有效行）。因此，虽然我可以在 html 中看到有效数据，但在源代码中我错过了一个空的前行......这可能搞砸了 TableSorter JS。

删除了开始的空行（在thead之后，但在任何其他数据之前），这个问题得到了解决。

【讨论】：

同样的事情发生在我身上，除了我的表中的 html 无效 - 显然 tr 不应该进入另一个 tr ;)

【参考方案2】：

无法复制报错，但如果按照编程逻辑...

你描述的错误发生在这行代码上：

var s = (table.config.parsers[c].type == "text") ...

这意味着parsers[c] 不存在。变量c 只是列索引。

所以，如果我不得不猜测，我会说涉及到一个自定义解析器，但它没有定义类型属性。

// default text parser
ts.addParser(
    id: "text",
    is: function (s) 
        return true;
    ,
    format: function (s) 
        return $.trim(s.toLocaleLowerCase());
    ,
    type: "text"
);

或者，sortList 的定义可能有问题。确保变量周围的方括号数量正确：

var sorting = [[0, 0]];
$("#contentTable").trigger("sorton", [sorting]);

或压缩形式：

// more than one column -> [[ [0,0], [1,0] ]]
$("#contentTable").trigger("sorton", [[[0, 0]]]);

试试this demo

【参考方案3】：

这确实是一个奇怪的问题，example 似乎根本不起作用（在 Mac 上的 Chrome 中）。另外，我recreated your situation，再一次，不正确的排序。虽然，我没有收到您描述的错误。

我之前在使用 TableSorter 时遇到过这个问题，当时无法确定问题所在。如果我没记错的话，它与插件执行的缓存有关。

【讨论】：

最后的例子工作正常......而且如果我在静态表上应用库一切正常但我动态添加数据然后它会产生问题。

【参考方案4】：

这件事刚刚发生在我身上。它会对纯数字字段进行排序，但不会通过文本做任何事情。当我按下这些文本列进行排序时，我在开发工具控制台中返回了“未定义”错误。

解决办法？最终我的一个不相关的函数未定义。