Ajax 替换 HTML 后 Tablesorter 未初始化

Question

我正在使用 Mottie 的 Tablesorter jQuery 插件： https://mottie.github.io/tablesorter/docs/

我正在使用具有服务器端处理功能的寻呼机插件，我正在服务器上构建 HTML 并将其与寻呼机插件的 ajaxProcessing 函数的 JSON 结果一起发送回。

我的表格 HTML 被正确加载，但 Tablesorter 并没有发挥它的魔力（为间隔良好的列添加 colgroup，并更新 THEAD 以使列可排序并启用我在 HTML 中添加的过滤器下拉菜单。）

这是我开始使用的 HTML 的片段：

<table class="tableMain" id="scenarioTable">
    <thead>
        <tr class="tableRowHeader">
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="loadingCircle"></div>
            </td>
        </tr>
    </tbody>
</table>

（“loadingCircle”类只是一个 CSS 占位符动画；“tableMain”和“tableRowHeader”是在别处定义的样式类。）

这是我的 Javascript：

$(function () {
    $("#scenarioTable").tablesorter({
        cancelSelection: true,
        debug: true,
        emptyTo: "zero",
        serverSideSorting: true,
        showProcessing: true,
        sortReset: true,
        theme: "custom",
        widthFixed: true,
        widgets: ["filter", "zebra"],
        widgetOptions:
            {
                filter_childRows: false,
                filter_columnFilters: true,
                filter_formatter: null,
                filter_hideFilters: false,
                filter_reset: '.clearFilters',
                filter_serversideFiltering: true
            }
    })
    .tablesorterPager({
        container: $(".scenarioPager"),
        ajaxObject: {
            type: 'POST',
            dataType: 'json',
            data: { scenarioID: 1000 },
            success : function(){ $("#scenarioTable").trigger("update"); }
        },
        ajaxProcessing: function(result, table, xhr){
            if (result && result.hasOwnProperty('mScenarioTableHTML')) {
                var toReturn = {
                    total : result["mTotalRows"],
                    filteredRows : result["mTotalFilteredRows"]
                }
                $(table).html(result["mScenarioTableHTML"]);
                return toReturn;
            }
        },
        ajaxUrl: "my URL goes here",
        page: 0,
        pageReset: 0,
        processAjaxOnInit: true,
        size: 1000,
    });
});

因此，当页面加载时，Tablesorter 会按预期将表格 HTML 更新为此：

<table class="tableMain tablesorter tablesorter-custom tablesorter749b92e50ae53 hasFilters tablesorter-processing" id="scenarioTable" role="grid" aria-describedby="scenarioTable_pager_info">
    <colgroup class="tablesorter-colgroup"><col style="width: 100%;"></colgroup>
    <thead>
        <tr class="tableRowHeader" role="row">
        </tr>
    </thead>
    <tbody aria-live="polite" aria-relevant="all"></tbody>
</table>

然后我的 ajaxProcessing 函数将 COLGROUP、THEAD 和 TBODY 标记替换为我从服务器发送的 HTML，HTML 最终看起来像这样：

<table class="tableMain tablesorter tablesorter-custom tablesorter792090cf9b53c hasFilters" id="scenarioTable" role="grid" aria-describedby="scenarioTable_pager_info">
    <thead>
        <tr class="tableRowHeader">
            <th class="filter-select">
                Trial #
            </th>
            <th class="filter-select">
                Time (sec)
            </th>
        </tr>
        <tr>
            <td>
                <select name="trial" id="trial">
                  <option value="" selected="selected"> </option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                </select>
            </td>
            <td>
                <select name="time" id="time">
                  <option value="" selected="selected"> </option>
                  <option value="10.5">10.5</option>
                  <option value="13.4">13.4</option>
                </select>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td id="101" class="notFlagged">
                1
            </td>
            <td id="102" class="flagged">
                13.4
            </td>
        </tr>
        <tr class="even">
            <td id="103" class="notFlagged">
                2
            </td>
            <td id="104" class="notFlagged">
                10.5
            </td>
        </tr>
    </tbody>
</table>

因此，Tablesorter 仅将“奇数”和“偶数”类添加到斑马条纹的 TR 标签中，仅此而已。其余的 HTML 正是我从服务器发送的。

有没有办法让 Tablesorter 更新我加载的 HTML，或者 Tablesorter 是否必须自己构建 HTML 才能添加排序和过滤内容？

Answer 1

寻呼机ajaxProcessing 函数不应替换整个表格。如果要更新标题，最好包含相同数量的列（查看this demo 的 HTML）。而是从 ajaxProcessing 函数返回一个 headers 值，如用于返回对象的 the documentation 中所述。

如果您必须更新整个表，请不要使用ajaxProcessing 函数。而是绑定到寻呼机事件，然后：

• 销毁当前的 tablesorter 实例，并在寻呼机完成后重新初始化它。
• 或者，使用updateAll 更新tablesorter 的thead 和tbody 内容。不建议这样做，因为它仍然存在问题并且可能导致内存泄漏。