使用JQuery从JSON创建HTML表，尝试使用Tablesorter插件进行排序，但不起作用 [英] Creating HTML table from JSON with JQuery, trying to sort with Tablesorter plugin, but not working
问题描述
我在让表排序器处理通过JSON数据使用JQuery创建的HTML表时遇到了一些麻烦.我得到了创建的表，单击它们时突出显示了列标题，但是它没有对数据进行排序.创建表的JQuery是这样的:
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:
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;
}
这将构建表，并具有tablesorter所需的THEAD和TBODY标签. 然后，我创建表并运行tablesorter函数，如下所示:
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:
$(document).ready(function() {
buildHtmlTable();
$('#excelDataTable').tablesorter();
});
这是HTML:
<body>
<table id="excelDataTable" class="tablesorter">
</table>
</body>
当我单击表格标题时，它们会以蓝色框突出显示(就像他们知道被单击一样)，但是它们没有排序.我认为这与动态创建表有关，因为表排序器将与硬编码的HTML表一起使用.但是对于此应用程序，我将获取JSON数据，并且需要根据收到的信息构建表.表数据将不会动态更改，而是以这种方式创建的.任何帮助表示赞赏，如果需要，一定会回发更多详细信息.预先感谢！
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!
推荐答案
Mottie建议使用构建小部件对我来说很有效.我将包含数据的文件格式从JSON更改为CSV. JavaScript是
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
$(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中可以立即使用.
Also, I did have to do some tweaking to get chrome to use a locally hosted file, however this worked straight away in IE.
这篇关于使用JQuery从JSON创建HTML表，尝试使用Tablesorter插件进行排序，但不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
