Question

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

我正在使用带有服务器端处理的寻呼机插件，并且我在服务器上构建HTML并使用JSON结果将其发回给寻呼机插件的ajaxProcessing函数。 / p>

我的表格HTML正确加载，但是Tablesorter没有做到它的魔力（为间距很大的列添加colgroup，并更新THEAD以使列可排序并启用我用HTML添加的过滤器下拉列表。）

这是我开始使用HTML的剪辑：

logins

（＆＃34; loadingCircle＆＃34;类只是一个CSS占位符动画;＆＃34; tableMain＆＃34;＆＃34; tableRowHeader＆＃34;是其他地方定义的样式类。）

这是我的Javascript：

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

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

$(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,
    });
});

然后我的ajaxProcessing函数用我从服务器发送的HTML替换COLGROUP，THEAD和TBODY标记，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>

所以Tablesorter只添加＆＃34; odd＆＃34;和＆＃34;甚至＆＃34;用于斑马条纹的TR标记的类，没有别的。 HTML的其余部分正是我从服务器发送的内容。

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

Answer 1

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

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

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

在Ajax替换HTML之后，Tablesorter没有初始化

1 个答案: