Aniruddha Raje Aniruddha Raje - 4 months ago 65
jQuery Question

Datatable Hide rows

I need help to HIDE the rows from the Datatable,


When User selects "Show All" from the Dropdown, the complete Datatable should be rendered,


Otherwise when the User selects "Hide USA",

I want to hide the rows whose Country Column's value is "USA".

So need some kind of hide/show toggle functionality of Datatable depending on the column's value.


Here's my Sample code -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">

<script type="text/javascript">
$(document).ready(function() {

var table = $('#example').DataTable();

$("#choice").on("change",function(){

var _val = $(this).val();

if(_val == 2){
table
.columns(2)
.search('USA',true)
.draw();
}
else{
table
.columns()
.search('')
.draw();
}
});
} );



</script>

<style>
#choice{
width: 135px;
height: 35px;
margin-bottom: 20px;
}
</style>

</head>

<body>

<select name="choice" id="choice">
<option value="1">Show All</option>
<option value="2">Hide USA</option>
</select>

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>61</td>
<th>USA</th>
</tr>
<tr>
<td>Garrett Winters</td>
<td>63</td>
<th>USA</th>
</tr>
<tr>
<td>Ashton Cox</td>
<td>61</td>
<th>Mexico</th>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>45</td>
<th>Brazil</th>
</tr>
<tr>
<td>Airi Satou</td>
<td>56</td>
<th>Japan</th>
</tr>

</tbody>
</table>

</body>
</html>


My current code is Hiding "Non USA" rows,

Whereas I want to hide rows, whose "Country" column has "USA"

Answer

You can use search of DataTable, and specified the value with regex, for example:

Hide Non 61 Age

table
    .columns(1)
    .search('^(?:(?!61).)*$\r?\n?', true, false)
    .draw();

Show All

table
    .columns()
    .search('')
    .draw(); 

Result: https://jsfiddle.net/cmedina/egsqb68u/1/

Comments