I'm having some trouble getting tablesorter to work with an HTML table that's being created with JQuery from JSON data. I get the table created, and the column headers highlight when I click them but it doesn't sort the data. The JQuery that creates the table is this:
我在使用tableorter处理使用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;
}
This builds the table, and has the THEAD and TBODY tags required by tablesorter. I then create the table and run the tablesorter function like this:
这构建了表,并且具有tablesorter所需的THEAD和TBODY标记。然后我创建表并运行tablesorter函数,如下所示:
$(document).ready(function() {
buildHtmlTable();
$('#excelDataTable').tablesorter();
});
This is the HTML:
这是HTML:
<body>
<table id="excelDataTable" class="tablesorter">
</table>
</body>
When I click on the table headers they get highlighted by a blue box (like they're aware of being clicked), but they do not sort. I thought it had something to do with created the table dynamically, as the tablesorter will work with a hardcoded HTML table. But for this application I will be getting JSON data and will need to build out the table based on what I receive. The table data will not change dynamically, its just created that way. Any help appreciated, and will definitely post back further details if needed. Thanks in advance!
当我点击表格标题时,它们会被一个蓝色框突出显示(就像他们知道被点击一样),但它们没有排序。我认为它与动态创建表有关,因为tablesorter将使用硬编码的HTML表。但对于这个应用程序,我将获取JSON数据,并将需要根据我收到的内容构建表。表数据不会动态变化,只是以这种方式创建。任何帮助表示赞赏,如果需要,肯定会发回更多详细信息。提前致谢!
1 个解决方案
#1
1
Mottie's suggestion to use the build widget worked for me. I changed the file format containing the data from JSON to CSV. Javascript is
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%']
}
}
});
});
And HTML is simply
HTML就是这么简单
<body>
<div id="excelDataTable"></div>
</body>
Also, I did have to do some tweaking to get chrome to use a locally hosted file, however this worked straight away in IE.
此外,我确实需要进行一些调整以使chrome能够使用本地托管文件,但这在IE中可以直接使用。
#1
1
Mottie's suggestion to use the build widget worked for me. I changed the file format containing the data from JSON to CSV. Javascript is
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%']
}
}
});
});
And HTML is simply
HTML就是这么简单
<body>
<div id="excelDataTable"></div>
</body>
Also, I did have to do some tweaking to get chrome to use a locally hosted file, however this worked straight away in IE.
此外,我确实需要进行一些调整以使chrome能够使用本地托管文件,但这在IE中可以直接使用。