我有一张大桌子,我想在其上添加搜索功能。我使用tablesorter来做列sortables,还有一个教程,在开头添加另一列来编号行。但搜索不起作用。这是我的代码:
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>
我没有看到任何错误。只是搜索功能不存在。
答案 0 :(得分:0)
您可能想尝试datatables.js/。它是一个jQuery插件,可以完成您正在尝试构建的内容,并且实现起来非常简单。
实现它的代码(具有分页,搜索,列排序等作为默认值)就是这样。
$('#example').dataTable();
答案 1 :(得分:0)
快速搜索似乎附加到#table
而不是#myTable
,这是您共享的HTML中表格的ID。