我有一个大 table ,我想在上面添加搜索功能。我使用 tablesorter 来进行列排序,并且还使用了一个教程来在开头添加另一列以对行进行编号。但搜索不起作用。这是我的代码:
HTML
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.pager.js"></script>
<script src="/static/js/jquery.quicksearch.js" type="text/javascript"></script>
<table id="myTable" class="table table-bordered tablesorter">
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
<tr style="display:none;">
<td colspan="5">
No rows match the filter...
</td>
</tr>
</tfoot>
</table>
<div id="pager" class="pager">
<form>
<img src="/static/blue/first.png" class="first"/>
<img src="/static/blue/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="/static/blue/next.png" class="next"/>
<img src="/static/blue/last.png" class="last"/>
<select class="pagesize">
<option value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="50">50 per page</option>
</select>
</form>
</div>
这是我的 JavaScript:
<script>
$(document).ready(function()
{
$.tablesorter.addWidget({
id: "numbering",
format: function(table) {
var c = table.config;
$("tr:visible", table.tBodies[0]).each(function(i) {
$(this).find('td').eq(0).text(i + 1);
});
}
});
$("table").tablesorter({widgets: ['numbering'],sortInitialOrder: 'desc', sortList: [[2,1]],headers: {0: {sorter: false}}})
.tablesorterPager({container: $("#pager")});
$("#myTable tbody tr").quicksearch({
labelText: 'Search: ',
attached: '#myTable',
position: 'before',
delay: 100,
loaderText: 'Loading...',
onAfter: function() {
if ($("#myTable tbody tr:visible").length != 0) {
$("#myTable").trigger("update");
$("#myTable").trigger("appendCache");
$("#myTable tfoot tr").hide();
}
else {
$("#myTable tfoot tr").show();
}
}
});
}
</script>
我没有看到任何错误。只是没有搜索功能。
最佳答案
看起来快速搜索附加到 #table
而不是 #myTable
,后者是您共享的 HTML 中表格的 ID。
关于javascript - 表排序器和搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20418784/