admin管理员组文章数量:1345096
I need help to HIDE the rows from the Datatable,
When User selects "Show All" from the Dropdown, the plete 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=".12.3.js"></script>
<script src=".10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href=".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"
I need help to HIDE the rows from the Datatable,
When User selects "Show All" from the Dropdown, the plete 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./jquery-1.12.3.js"></script>
<script src="https://cdn.datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables/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"
- This reads like a "Give me code!" question. You haven't really showed what you have tried. And a quick google search brings up a lot of good results. – Dan Commented Jul 14, 2016 at 16:52
- sorry, I've updated what I tried and some related logic, apologizes I can't share my actual project code, that's why the initial short question. – Dev1ce Commented Jul 14, 2016 at 17:05
1 Answer
Reset to default 8You 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/cmedina/egsqb68u/1/
UPDATE:
Hide USA:
table
.columns(2) //The index of column to search
.search('^(?:(?!USA).)*$\r?\n?', true, false) //The RegExp search all string that not cointains USA
.draw();
Result: https://jsfiddle/cmedina/egsqb68u/2/
本文标签： javascriptDatatable Hide rowsStack Overflow
版权声明：本文标题：javascript - Datatable Hide rows - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743777480a2537243.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论