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'
    });

});

Jquery tablesorter addParser两个标题行sorter-false

1 个答案: