Jquery tablesorter addParser 两个标题行 sorter-false

Question

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

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

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

如果我将第一个标题行中的单元格的类设置为“sorter-false”，我就可以实现此目的。

问题就在这里。我使用 addParser 添加了一个解析器。每个单元格都有一个名为“data-sort-value”的属性。然后我调用 $(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'
    });

});