我在让表排序器使用从JSON数据使用JQuery创建的HTML表时遇到了一些问题。我创建了表,单击列标题时突出显示列标题,但它不会对数据进行排序。创建表的 JQuery 是这样的:
function buildHtmlTable() {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
}
}
function addAllColumnHeaders(myList) {
var columnSet = [];
var headerTr$ = $('<thead/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}
这将构建表,并具有表排序器所需的 THEAD 和 TBODY 标记。然后,我创建表并运行表排序器函数,如下所示:
$(document).ready(function() {
buildHtmlTable();
$('#excelDataTable').tablesorter();
});
这是 HTML:
<body>
<table id="excelDataTable" class="tablesorter">
</table>
</body>
当我单击表格标题时,它们会被一个蓝色框突出显示(就像它们知道被单击一样),但它们不会排序。我认为这与动态创建表有关,因为表排序器将与硬编码的 HTML 表一起使用。但是对于此应用程序,我将获取 JSON 数据,并且需要根据我收到的内容构建表。表数据不会动态更改,它只是以这种方式创建。任何帮助表示赞赏,如果需要,肯定会发回更多详细信息。提前感谢!
Mottie 使用构建小部件的建议对我有用。我将包含数据的文件格式从 JSON 更改为 CSV。Javascript 是
$(function() {
$('#excelDataTable').tablesorter({
theme: 'blue',
widgets: ['zebra'],
widgetOptions: {
// *** build widget core ***
build_type : 'csv',
build_source : { url: 'data.txt', dataType: 'text' },
build_headers : {
widths : ['50%']
}
}
});
});
而 HTML 只是
<body>
<div id="excelDataTable"></div>
</body>
此外,我确实必须进行一些调整才能让 chrome 使用本地托管的文件,但这在 IE 中立即起作用。