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";
}
}
}
});
Advertisement
Answer
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 table itself
i – is Table information summary
p – is pagination control