如何在javascript表数组中使用jQuery表orter？
如何在javascript表数组中使用jQuery表orter？
提问于 2018-10-18 00:19:43
我试图在我的页面加载时由javascript数组生成的html表上使用jQuery插件tablesorter（tablesorter.com）。表格被设置样式，当单击列标题时，表格不会排序。
这是我到目前为止：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
<script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.css">
<script type="text/javascript" src="/lib/jquery/tablesorter/jquery.tablesorter.js"></script>
<link type="text/css" rel="stylesheet" href="/lib/jquery/tablesorter/themes/blue/style.css">
<style>
</style>
<script>
$( document ).ready( function() {
$( "table" ).tablesorter();
$( "p" ).click( function() {
$( this ).hide();
});
});
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
<script>
var frameData = [
["Phoenix Smasher", 15],
["Bone Breaker", 16],
["DeathFist", 60],
["Thruster", 20],
["S Jab", 10]
];
function pageLoad() {
var t = "";
t += "<thead>";
t += "<tr>";
t += "<th>Move</th>";
t += "<th>Start Up</th>";
t += "</tr>";
t += "</thead>";
t += "<tbody>";
for (var i = 0; i < frameData.length; i++) {
t += "<tr>";
t += "<td>" + frameData[i][0] + "</td><td>" + frameData[i][1] + "</td>";
t += "</tr>";
}
t += "</tbody>";
document.getElementById("frameTable").innerHTML = t;
}
</script>
</head>
<body onload="pageLoad()">
<p>Click the table headers to sort the array in descending order.</p>
<br />
<br />
<div id="demo"></div>
<table id="frameTable" class="tablesorter">
</table>
<p>jQuery test. This text will disappear on click.</p>
<input type="text" id="datepicker">
</body>
</html>
我尝试了什么：奇怪的是，当我摆脱javascript数组并将实际的html表数据放在<table>和</table>标签之间时，tablesorter插件工作正常。此外，我尝试pageLoad()使用jQuery代码重新安排数组和函数，没有运气。
知道如何让这个工作吗？
该页面在我的服务器上：http：//sketchcarellz.com/multiArray.html
回答 2
Stack Overflow用户
发布于 2018-10-18 08:37:08
可以使用Build Table Widget从JSON 创建表
确保包含构建表小部件：
如果您有一个值数组，可以将标题添加到第一行，如下所示：
var tableData = [
// header
[ "Move", "Start Up"],
// rows
[ "Phoenix Smasher", 15],
[ "Bone Breaker", 16],
[ "DeathFist", 60],
[ "Thruster", 20],
[ "S Jab", 10]
]
然后将数组和一些参数传递给构建源选项，widgetOptions 如下所示：
$("#jsonTable").tablesorter({
theme: 'materialize',
widgets: ['zebra'],
widgetOptions: {
build_type: 'array', // can sometimes be detected if undefined
build_source: tableData,
build_headers: {
rows : 1, // Number of header rows from the array
widths : [ '70%', '20%' ] // set header cell widths
},
build_footers : {
rows : 0, // Number of header rows from the array
},
}
});
在jsFiddle和StackSnippets 演示：
var tableData = [
// header
[ "Move" , "Start Up"],
// rows
[ "Phoenix Smasher", 15],
[ "Bone Breaker", 16],
[ "DeathFist", 60],
[ "Thruster", 20],
[ "S Jab", 10]
]
$("#jsonTable").tablesorter({
theme: 'materialize',
widgets: ['zebra'],
widgetOptions: {
build_type: 'array', // can sometimes be detected if undefined
build_source: tableData,
build_headers: {
rows : 1, // Number of header rows from the array
widths : [ '70%', '20%' ] // set header cell widths
},
build_footers : {
rows : 0, // Number of header rows from the array
},
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.combined.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-build-table.min.js"></script>
<div id="jsonTable"></div>进一步阅读：
Stack Overflow用户
发布于 2018-10-18 09:49:55
问题是在构建表之前初始化插件。
切换执行顺序。要做到这一点，只使用一个负载处理程序，以确保知道顺序
$( document ).ready( function() {
pageload();
// table is build, call plugin
$( "table" ).tablesorter();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008907
复制相关文章
相似问题