如何解决jQuery .changefunction在DataTables第2页及其后的页面中不起作用
我正在使用Jquery数据表并使用依赖于table的select标记,但是Jquery脚本在第二页及其后的页面中不起作用。我想基于所有页面中的选择标记来过滤表中的结果,但是一旦我从选择标记中选择选项,它就只过滤第一页中存在的行,而对于其余页面,我必须再次使用选择标记。我正在共享代码段。请提供一些建议,以使其适用于任何页面上的所有行。
<body>
<select id="cato" class="form-control" >
<option disabled selected="true">-Select Category-</option>
<option>Electronics</option>
<option>Sports</option>
</select>
<table class="table table-bordered" id="example" data-order='[[ 0,"desc" ]]' data-page-length='3'>
<thead>
<tr>
<th>Product</th>
<th>Subcategory</th>
<th>Category</th>
</tr>
</thead>
<tbody id="r">
<tr>
<td>Samsung</td>
<td>Mobile</td>
<td>Electronics</td>
</tr>
<tr>
<td>Racket</td>
<td>Tennis</td>
<td>Sports</td>
</tr>
<tr>
<td>Bat</td>
<td>Cricket</td>
<td>Sports</td>
</tr>
<tr>
<td>Dell</td>
<td>Laptop</td>
<td>Electronics</td>
</tr>
<tr>
<td>Iphone</td>
<td>Mobile</td>
<td>Electronics</td>
</tr>
</tbody>
</table>
</body>
表格
<script type="text/javascript">
var table = $('#example').DataTable({
"bLengthChange": false,searching: false,});
</script>
jQuery
<script>
$('#cato').on('change',function() {
var filter,table,tr,td,i;
filter=$("#cato option:selected").text().toUpperCase();
table = document.getElementById("r");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[2];
if (td) {
if ((td.innerHTML.toUpperCase().indexOf(filter) > -1))
{
tr[i].style.display = "";
}
else {
tr[i].style.display = "none";
}
}
}
});
解决方法
我会选择另一种方法。
看我的例子:
var table = $('#example').DataTable({
"bLengthChange": false,pageLength: 2,dom: 'tip'
});
$.fn.dataTable.ext.search.push(
function( settings,data,dataIndex ) {
var filter= $("#cato option:selected").text().toUpperCase();
var subCategory = String(data[2]).toUpperCase();
if ( filter == subCategory )
return true;
else
return false;
}
);
$('#cato').on('change',function() {
table.draw()
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<select id="cato" class="form-control">
<option disabled selected="true">-Select Category-</option>
<option>Electronics</option>
<option>Sports</option>
</select>
<table id="example" class="table display">
<thead>
<tr>
<th>Product</th>
<th>Subcategory</th>
<th>Category</th>
</tr>
</thead>
<tbody id="r">
<tr>
<td>Samsung</td>
<td>Mobile</td>
<td>Electronics</td>
</tr>
<tr>
<td>Racket</td>
<td>Tennis</td>
<td>Sports</td>
</tr>
<tr>
<td>Bat</td>
<td>Cricket</td>
<td>Sports</td>
</tr>
<tr>
<td>Dell</td>
<td>Laptop</td>
<td>Electronics</td>
</tr>
<tr>
<td>Iphone</td>
<td>Mobile</td>
<td>Electronics</td>
</tr>
<tr>
<td>Soccer Ball</td>
<td>Soccer</td>
<td>Sports</td>
</tr>
</tbody>
</table>
重要:为了使$.fn.dataTable.ext.search.push(
正常工作,jQuery DataTable searching
选项必须为 true (其默认值),否则为它不会工作。但是,如果您不想使用默认搜索框,甚至不想将其隐藏,则可以使用:
在我的示例中,我使用了值tip
。如您在上面的链接中所见...
t -是 t 本身
i -是表 i 信息摘要
p -是 p 混合控件
快乐编码!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。