Asp.Net:更新后 TableSorter 不工作
Asp.Net: TableSorter not working after update
我的 Asp.Net 网站应该向用户显示一些 table 数据。我使用 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 插入新数据,排序就会失败。
我的更新代码 table 是:
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,我不知道为什么它在更新后失败了。谁能告诉我吗?
当 tablesorter 在 table 上初始化时,它将事件绑定添加到 thead
单元格并处理并从每个 tbody
的文本创建缓存细胞.
当 $("#" + TableId).empty();
被执行时,它基本上清除了所有内容,包括事件侦听器。
如果从 ajax 数据构建的新 table 具有相同的 header 单元格和文本,那么需要做的就是清空 tbody
。别管 thead
了!在 tbody 重建并在 table 中就位后,您可以通过在 table.
上触发 "update" 来更新 tablesorter 的缓存
$("#" + TableId).trigger('update');
如果新的 ajax 数据确实完全改变了 table,那么您将不得不重新初始化 tablesorter。
我的 Asp.Net 网站应该向用户显示一些 table 数据。我使用 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 插入新数据,排序就会失败。 我的更新代码 table 是:
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,我不知道为什么它在更新后失败了。谁能告诉我吗?
当 tablesorter 在 table 上初始化时,它将事件绑定添加到 thead
单元格并处理并从每个 tbody
的文本创建缓存细胞.
当 $("#" + TableId).empty();
被执行时,它基本上清除了所有内容,包括事件侦听器。
如果从 ajax 数据构建的新 table 具有相同的 header 单元格和文本,那么需要做的就是清空 tbody
。别管 thead
了!在 tbody 重建并在 table 中就位后,您可以通过在 table.
$("#" + TableId).trigger('update');
如果新的 ajax 数据确实完全改变了 table,那么您将不得不重新初始化 tablesorter。