Question

我正在使用jQuery tablesorter 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>

对tablesorter的唯一调用：

$("#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)，并且每60秒调用一次setInterval。这是在IE 10中。由于业务需求，它必须适用于IE 10。

Answer 1

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

// 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优先于标头<th class="filter-false">中的“filter-false”类名称。没有必要包括两者，都可以工作。

根据上述建议，触发false标记的搜索，不需要使用$.tablesorter.getFilter()或$.tablesorter.setFilter()功能。

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

1 个答案: