我有一张大桌子,我想在上面添加搜索功能。我使用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>
我没有看到任何错误。只是搜索功能不存在。
看起来好像附加了quicksearch,#table
而不是#myTable
您共享的HTML中的表格ID。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句