JQuery .change(function) not working in DataTables 2nd page and after
Question
I am using Jquery data-table and using select tag which is dependent on table, but Jquery script doesn't work on second page and after. I want to filter results in table based on select tag in all pages but as soon as I choose option from select tag it only filters the rows present in the first page and for the remaining pages again I have to use select tag. I am sharing code snippet. Please provide some suggestion to make it work for all rows at any page.
<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>
Table
<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";
}
}
}
});
1 answers
solution1
0 ACCPTED 2020-08-12 07:34:26
I would go for a different approach.
Look at my example:
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>
Important: In order for $.fn.dataTable.ext.search.push( to work properly, the jQuery DataTable searching option must be true (its default value), otherwise it won't work. But if you don't want to use the default search box or even hide it, you could use the:
In my example I used the value tip . As you can see in the above link...
t - is the t able itself
i - is Table i nformation summary
p - is p agination control
Happy Coding!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.