阿贾克斯后的tablesorter未初始化取代HTML
我使用Mottie的jQuery的的tablesorter插件: https://mottie.github.io/tablesorter/docs/阿贾克斯后的tablesorter未初始化取代HTML
我使用的是服务器端的处理寻呼机插件,和我建立在服务器上的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” 的样式类别处定义)
。这是我的Jav ascript:
$(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于此,如预期的那么:与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最终看起来像这样:
<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本身,以添加在排序和过滤的东西?
寻呼机ajaxProcessing
函数不应该替换整个表。如果您想更新标题,最好包含相同数量的列(请参阅this demo的HTML)。取而代之的是返回the documentation中描述的ajaxProcessing
函数的headers
值,用于返回对象。
如果你必须更新整个表,请不要使用ajaxProcessing
函数。而是绑定到寻呼机事件,则:
- 销毁当前tablesorter实例,并在分页器完成后重新初始化它。
- 或者,使用
updateAll
更新tablesorter的thead
和tbody
内容。这不被推荐,因为它仍然有问题,并可能导致内存泄漏。
感谢Mottie!所以,如果ajaxProcessing只是返回一个“rows”和“headers”值,有没有办法给每个表格单元添加一个ID和一个类?我需要允许用户单击一个表格单元格,然后根据单击哪个单元格运行一些代码。因此,我想指定每个表格单元格的类别,我将使用它来显示单元格的当前状态,并且需要在单击单元格时为代码中的每个可单击单元格存储一段数据。 – KCO
没有看到代码,我会说使用一个委托事件绑定,然后点击,检查单元格的'rowIndex'和'cellIndex'参数来确定表中的位置(假设没有'rowspan'或'colspan's在表中)。 – Mottie