我尝试过很多东西,搜索过的文档,论坛等都没有成功。我正在写一个云文件服务器表的报告(无法运行php)。网页表源自json文件(lint = good)。它包含来自数据库的列数据。包含报告的每个目录的名称与数据库中的每个唯一ID(整数)相同。因此,第一列包含一个超链接,其src和text是一个整数字符串。结果是页面显示标题图标(正确)但不排序。它还会在第一个列标题下显示一个过滤器框,但在另一个列标题中缺少8.我在做错了什么?
// edit- json file is an array of objects ([{"JOBID":"1234567","PROD":"Widget", ...
var thisWeb = "/reports/thisWeb.json";
$.getJSON(thisWeb, function(data) {
var tbl_head = "";
$.each(data[0], function(key, value) {
tbl_head += "<th data-sorter='text'>" + key + "</th>";
console.log(value);
});
$('table thead').html(tbl_head);
console.log(tbl_head);
var tbl_body = "";
$.each(data, function() {
var tbl_row = "";
var hlink = "<a href='/reports/" + this.PROD + "/" + this.JOBID + "'>";
$.each(this, function(key, value) {
if (key == "JOBID") {tbl_row += "<td>" + hlink + value + "</a></td>";}
else {tbl_row += "<td>" + value + "</td>";}
});
tbl_body += "<tr>" + tbl_row + "</tr>";
});
$('table tbody').html(tbl_body);
})
.done(function() {
// call the tablesorter plugin
console.log("tablesorter");
$("table").tablesorter({
debug: true,
// initialize zebra striping and filter widgets
theme: 'blue',
widgets: ["zebra", "filter"],
widgetOptions : {
// external filter (column specific or any match)
filter_external : '.search',
// add a default type search to the first name column
filter_defaultFilter: { 1 : '~{query}' },
// include column filters
filter_columnFilters: true,
filter_placeholder: { search : 'Search...' },
filter_saveFilters : true,
filter_reset: '.reset',
}
});
console.log("filters applied");
})
.fail(function(jqXHR, textStatus, errorThrown) {
tbl_body = "<tr><td>" + thisWeb + " not found</td></tr>";
$("table").html(tbl_body);
console.log('Report list not found ' + textStatus);
});
<main>
<!-- <div id='main'>-->
<input data-lastsearchtime="1425684650894" class="search" data-column="all" type="search">
<button type="button" class="reset">Reset Search</button>
<!-- <script> console.log("setting up table"); </script>-->
<table role="grid" id="objTable" class="tablesorter tablesorter-blue hasFilters" cellspacing="1">
<thead role="row" class="tablesorter-headerRow"><th aria-label="JOBID: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">JOBID</div></th><th aria-label="PROD: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">PROD</div></th><th aria-label="JOB_TITLE: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">JOB_TITLE</div></th><th aria-label="SOURCE: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">SOURCE</div></th><th aria-label="CHARGE: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">CHARGE</div></th><th aria-label="PRODNAME: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">PRODNAME</div></th><th aria-label="TECH: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">TECH</div></th><th aria-label="LOTID: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">LOTID</div></th><th aria-label="WAFER: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">WAFER</div></th><tr role="row" class="tablesorter-filter-row"><td><input data-lastsearchtime="1425684650887" data-column="0" class="tablesorter-filter" placeholder="Search..." type="search"></td></tr></thead>
<tbody aria-relevant="all" aria-live="polite">
<tr style="display: table-row;" class="odd" role="row"><td><a href="/reports/widgets/2014544">2014544</a></td><td>widgets</td><td>Return BHD098</td><td>Return</td><td>Acc 12 (DD1.0)</td><td>Widgets Base (Eng)</td><td>RW -Raw</td><td>1124RWSO084.000</td><td>6M03L066SOD1</td></tr>
<tr style="display: table-row;" class="even" role="row"><td><a href="/reports/widgets/2016457">2016457</a></td><td>widgets</td><td>Test SN100111</td><td>Quality</td><td>Acc 1</td><td>Widegets 2.0 (Eng)</td><td>RW -Raw</td><td>12323SZP002.000</td><td>6L02J184SOG1</td></tr>
</tbody>
</table>
</main>
答案 0 :(得分:0)
Mottie问我输出html哪个开始我的答案 - 标题是一行,TH需要用TR包装。简单回答。它现在可以正确(快速)过滤和排序。
var tbl_head = "<tr>"; // <tr> added
$.each(data[0], function(key, value) {
tbl_head += "<th data-sorter='text'>" + key + "</th>";
});
tbl_head += "</tr>"; // this line added
$('table thead').html(tbl_head);