Jquery tablesorter addParser 两个标题行 sorter-false

Question

我有一个包含两个标题行的表格。这些列是成对的——一列有简短描述，另一列有详细描述。第一个标题行只是在每列中显示“扩展”或“收缩”。当用户在第一个标题行中单击“展开”（或“缩小”）时，javascript 将切换具有短描述和长描述的列。

第二个标题行包含每一列的名称。

我希望在用户单击第二个标题行时对表格进行排序，而不是在他单击第一个标题行时进行排序。当他点击第一个标题行时，它应该显示/隐藏正确的列，但不排序。

如果我将第一个标题行中单元格上的类设置为“sorter-false”，我可以做到这一点。

这就是问题所在。我使用 addParser 添加了一个解析器。每个单元格都有一个名为“数据排序值”的属性。然后我调用了 $(table).tablesorter() 并为每一列传递了 headers 参数——就像这样——

        $("#tbl").tablesorter({
            theme: 'myTheme',
            headers: {
                0: { sorter: 'myparser' },
                1: { sorter: 'myparser' },
                2: { sorter: 'myparser' },
                3: { sorter: 'myparser' },
                4: { sorter: 'myparser' }, etc.

当列被分配“myparser”时，“sorter-false”类不再阻止排序。

如果列有解析器，有什么办法让它不在第一个标题行单元格上排序？

Answer 1

我认为这不适用于原始版本的 tablesorter。它将忽略第二个标题行。

但是，如果你使用我的fork of tablesorter，你可以设置如下（demo）：

HTML

<table class="tablesorter">
    <thead>
        <tr>
            <th class="sorter-false">AlphaNumeric</th>
            <th class="sorter-false">Numeric</th>
            <th class="sorter-false">Animals</th>
            <th class="sorter-false">Sites</th>
        </tr>
        <tr>
            <th class="sorter-myparser">AN</th>
            <th>N</th>
            <th>An</th>
            <th>S</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-sort-value="abc 123">abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        ...
    </tbody>
</table>

脚本

$(function () {

    $.tablesorter.addParser({
        // use a unique id
        id: 'myparser',
        is: function () {
            return false;
        },
        format: function (s, table, cell, cellIndex) {
            return $(cell).attr('data-sort-value');
        },
        // flag for filter widget (true = ALWAYS search parsed values;
        // false = search cell text)
        parsed: true,
        type: 'text'
    });

    $('table').tablesorter({
        theme: 'blue'
    });

});

实际上，如果这就是您的解析器所做的全部...在最新版本中，您可以设置 textAttribute option 并在没有自定义解析器 (demo) 的情况下完成同样的事情：

$(function () {

    $('table').tablesorter({
        theme: 'blue',
        textAttribute: 'data-sort-value'
    });

});