![](/img/trans.png)
[英]JQuery .change(function..) not working in DataTables 2nd page or rows past 11
[英]JQuery .change(function) not working in DataTables 2nd page and after
我正在使用 Jquery 数据表并使用依赖于表的 select 标记,但 Jquery 脚本在第二页及之后不起作用。 我想根据所有页面中的 select 标记过滤表中的结果,但是一旦我从 select 标记中选择选项,它只会过滤第一页中存在的行,而对于其余页面,我必须再次使用 Z99938282E1807184599416 标记。 我正在分享代码片段。 请提供一些建议,使其适用于任何页面的所有行。
<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";
}
}
}
});
我会 go 采用不同的方法。
看我的例子:
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 (其默认值),否则它将不起作用。但如果您不想使用默认搜索框甚至隐藏它,您可以使用:
在我的示例中,我使用了 value tip
。 正如你在上面的链接中看到的......
t - 是表本身
i - 是表信息汇总
p - 是分页控制
快乐编码!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.