我的Asp.Net网站应向用户显示一些表格数据。我使用TableSorter在客户端对这些数据进行排序:
<script>var $jQuery171 = jQuery.noConflict();</script>
<script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$jQuery171(document).ready(function () {
$jQuery171('#myControl').tablesorter();
});
</script>
排序效果很好,没有任何问题,但如果我删除当前数据并从AJAX插入新内容,则排序失败。 我的更新表代码是:
function JSonObjectPropertiesToHeader(JSonObject, TableId) {
$("#" + TableId).empty();
var tableForProcess = document.getElementById(TableId);
var header = tableForProcess.createTHead();
var rowOfHeader = header.insertRow(0);
for (var propertyName in JSonObject.SourceData[0]) {
var theadCell = document.createElement('th');
theadCell.innerHTML = propertyName;
rowOfHeader.appendChild(theadCell);
};
return header;
}
function JSonObjectsToBody(JSonObjects, RequiredProperties, TableId) {
var tableForProcess = document.getElementById(TableId);
var body = tableForProcess.createTBody();
for (var i = 0, item; item = JSonObjects.SourceData[i]; i++) {
var rowOfBody = body.insertRow(0);
for (var propertyName in RequiredProperties) {
var cellForInsert = rowOfBody.insertCell(rowOfBody.cells.length);
cellForInsert.innerHTML = item[propertyName];
}
};
}
和AJAX脚本:
<script>
function GetDevicesInfoContent() {
$.ajax({
type: "POST",
url: "myUrl",
data: "{Lang:'tr'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) { OnGetDevicesInfoSuccessContent(response); },
error: function (response) { OnGetDevicesInfoError(response); }
})
}
function OnGetDevicesInfoSuccessContent(response) {
var devicesInfoControlId = "<%=report2_gridView.ClientID%>";
$("#" + devicesInfoControlId).empty();
if (response.d.length > 0) {
var jsonObject = eval('(' + response.d + ')');
var header = JSonObjectPropertiesToHeader(jsonObject, devicesInfoControlId);
var requiredProperties = [];
for (var i = 0, cell; cell = header.rows[0].cells[i]; i++) {
requiredProperties[cell.innerHTML] = cell.innerHTML;
};
JSonObjectsToBody(jsonObject, requiredProperties, devicesInfoControlId);
}
}
function OnGetDevicesInfoErrorContent(response) {
alert("MyError:" + response.status + " " + response.statusText);
}
</script>
如果我再次应用tablesorter,则排序正常。我以前从未使用过TableSorter,我不知道为什么它在更新后失败了。有人能告诉我吗?
答案 0 :(得分:2)
当tableorter在表上初始化时,它会将事件绑定添加到thead
单元格和进程&amp;从每个tbody
单元格的文本创建缓存。
执行$("#" + TableId).empty();
时,它基本上会消除所有内容,包括事件侦听器。
如果从ajax数据构建的新表具有相同的标题单元格&amp;文本,那么所有需要做的就是清空tbody
。只留下thead
!在tbody重建并在表中就位之后,您可以通过触发表上的“更新”来更新tablesorter的缓存。
$("#" + TableId).trigger('update');
如果新的ajax数据确实彻底改变了表格,那么你将不得不重新初始化tablesorter。