Ajax 替换 HTML 后 Tablesorter 未初始化

Question

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

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

我的 table HTML 加载正确，但 Tablesorter 没有发挥它的魔力（为间隔良好的列添加 colgroup，并更新 THEAD 以使列排序 table 并启用我用 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" class 只是一个 CSS 占位符动画；"tableMain" 和 "tableRowHeader" 是其他地方定义的样式 classes。 )

这是我的 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 会按预期将 table 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 仅将 "odd" 和 "even" class 添加到斑马条纹的 TR 标签中，没有其他任何内容。 HTML 的其余部分正是我从服务器发送的内容。

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

Answer 1

寻呼机 ajaxProcessing 功能不应取代整个 table。如果要更新 header，最好包含相同数量的列（查看 this demo). Instead return a headers value from the ajaxProcessing function as described in the documentation 的 HTML 以返回 object。

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

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

Ajax 替换 HTML 后 Tablesorter 未初始化

Tablesorter not initializing after Ajax replaces HTML

ajax

jquery

tablesorter