Ajax 替换 HTML 后 Tablesorter 未初始化
Tablesorter not initializing after Ajax replaces HTML
我正在使用 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 才能添加排序和过滤内容?
寻呼机 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
内容。不推荐这样做,因为它仍然存在问题并可能导致内存泄漏。
我正在使用 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 才能添加排序和过滤内容?
寻呼机 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
内容。不推荐这样做,因为它仍然存在问题并可能导致内存泄漏。