jquery - 表更新时，Tablesorter 不会重新应用过滤器？

Question

我正在使用 jQuery 表排序器 2.14.5。我这样加载表格:

var html = '';
for (var i = 0; i < rows.length; i++) {
    // code to fill html
}
$('#TableToFill tbody').html(html);
$('#TableToFill').tablesorter({...});

if (filterlist) {
    $.tablesorter.setFilters($('#TableToFill'), filterlist, true);
}

当页面首次加载时它效果很好。不过，我正在使用 AJAX 刷新表的内容。它重新加载rows并再次运行此代码。当页面首次加载时(并且 filterlist 确实有一些内容)，表格的内容就会被正确过滤。当 AJAX 完成并且此代码再次运行时(filterlist 包含与之前相同的内容)，则表不会进行过滤。过滤器输入中包含正确的值，但会显示未过滤的表内容。

我可以采取哪些不同的措施来确保在通过 AJAX 使用新值重新创建表时过滤器保持应用状态？

编辑:所有代码。

空表的 HTML:

<table id="ProblemQueue" class="tablesorter tablesorter_sorted" border="0" cellpadding="0" cellspacing="1" style="overflow: scroll;">
    <colgroup>
        <col span="1" style="width: 17%;">
        <col span="1" style="width: 17%;">
        <col span="1" style="width: 10%;">
        <col span="1" style="width: 20%;">
        <col span="1" style="width: 5%;">
        <col span="1" style="width: 5%;">
        <col span="1" style="width: 13%;">
        <col span="1" style="width: 8%;">
        <col span="1" style="width: 5%;">
    </colgroup>
    <thead>
        <tr class="tablesorter-headerRow">
            <th>First Name</th>
            <th>Last Name</th>
            <th>DOB</th>
            <th class="filter-select">Problem</th>
            <th class="filter-false">Note</th>
            <th class="filter-false">Action</th>
            <th>Last Worked</th>
            <th class="filter-select">User</th>
            <th>Date Recieved</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

对表排序器的唯一调用:

$("#ProblemQueue").tablesorter({
    theme: 'blue',
    widthFixed: true, // hidden filter input/selects will resize the columns, so try to minimize the change
    widgets: ["zebra", "filter"],// initialize zebra striping and filter widgets
    headers: { 4: { sorter: false, filter: false }, 5: { sorter: false, filter: false } },
    widgetOptions: {
        filter_childRows: false,
        filter_columnFilters: true,
        filter_cssFilter: 'tablesorter-filter',
        filter_filteredRow: 'filtered',
        filter_formatter: null,
        filter_functions: null,
        filter_hideFilters: false, // true, (see note in the options section above)
        filter_ignoreCase: true,
        filter_liveSearch: true,
        filter_reset: 'button.reset',
        filter_searchDelay: 300,
        filter_serversideFiltering: false,
        filter_startsWith: false,
        filter_useParsedData: false
    }
}).bind('filterEnd', function () {
    sessvars.filters.ProblemQueue = $.tablesorter.getFilters($('#ProblemQueue'));
});

表格总是通过ajax填充。为了简洁起见，上面的示例被缩短了，但实际代码如下:

function GetProblemQueue(async) {
    async = async || true;
    var url = "/our/rest/api";
    $.ajax({
        url: url,
        dataType: "json",
        headers: { "x-li-format": "json" },
        async: async,
        cache: false,
        success: function (data) {
            problems = data; // problems is global
            FillProblemQueue();
        },
        type: "Get"
    });
}

function FillProblemQueue() {
    var rows = '';
    for (var i = 0; i < problems.length; i++) {
        var style = "odd";
        if (i % 2) { style = "even"; }
        rows += "<tr class='" + style + "'><td>";
        // cell text added to rows, removed business logic
        rows += "</td><td>";
        ...
        rows += "</td><td>";
        ...
        rows += "</td><td>";
        ...
        rows += "</td><td style='text-align:center;'>";
        ...
        rows += "</td><td>";
        ...
        rows += "</td><td>";
        ...
        rows += "</td><td>";
        ...
        rows += "</td><td>";
        ...
        rows += "</td></tr>";
    }
    $("#ProblemQueue tbody").html(rows);
    $('#ProblemQueue').trigger('update');
    if (sessvars.filters.ProblemQueue) {
        $.tablesorter.setFilters($('#ProblemQueue'), sessvars.filters.ProblemQueue, true);
    }
}

GetProblemQueue(true) 在文档准备就绪时调用，并且有一个 setInterval 每 60 秒调用一次。这是在 IE 10 中。由于业务需求，它必须适用于 IE 10。

Answer 1

Tablesorter不应该在ajax调用后重新初始化

// this should only be done once
$('#TableToFill').tablesorter({...});

而是在每次 ajax 调用之后触发更新:

$('#TableToFill').trigger('update');

过滤器小部件应自动重新应用，因此无需再次设置过滤器。

---

更新:哦，我现在明白了。基本上，当过滤器未更改时，过滤器小部件不会更新其搜索。它不知道表内容已更新。因此，要绕过该问题，请在表上触发“搜索”并包含 false标志:

$('#TableToFill').trigger('search', false);

我将在下次更新中修复此问题，以便在将 apply 标志设置为 true 的情况下调用 setFilter 函数时，它将强制进行新的搜索。

以下是我在查看上述代码时注意到的其他一些观察结果:

• 如果小部件选项不更改默认值，则无需包含它们。
• 无需设置 widthFixed选项，因为它不会执行任何操作，因为 <colgroup>和<col>已经定义了。
• 添加 filter: false到headers选项优先于 header <th class="filter-false"> 中的“filter-false”类名。无需同时包含两者，任何一个都可以。
• 根据上述建议，使用 false 触发搜索标志，不需要使用 $.tablesorter.getFilter()或$.tablesorter.setFilter()功能。