最近在練習 datatables 這個好用的工具，他可以搭配 jQuery 跟 Bootstrap 讓你可以很快的建立有 RWD 的表格，他有非常豐富的 API 可以客製內容，今天示範一下怎麼使用 checkbox 去 filter 出符合的內容。
使用正規式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
let data = [
[
"Chan",
"basketball"
],
[
"Phoebe",
"volleyball"
],
[
"Lucas",
"tennis"
],
[
"LBJ",
"basketball"
],
];
let table = $('#data_table').DataTable({
data: data
});
$(':checkbox').on('click', function() {
let options = $(':checkbox:checked').map(function() {
return $(this).val()
}).get();
if (options.length === 0) {
table.columns(1).search('').draw();
} else {
let regex = options.join('|');
table.columns(1).search(regex, true, false).draw();
}
});
});
</script>
</head>
<body>
<div>
<label> basketball
<input type="checkbox" value="basketball">
</label>
<label> volleyball
<input type="checkbox" value="volleyball">
</label>
<label> tennis
<input type="checkbox" value="tennis">
</label>
</div>
<table id="data_table">
<thead>
<tr>
<th>name</th>
<th>hobby</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
使用 extension
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
let data = [
[
"Chan",
"basketball"
],
[
"Phoebe",
"volleyball"
],
[
"Lucas",
"tennis"
],
[
"LBJ",
"basketball"
],
];
let table = $('#data_table').DataTable({
data: data
});
$.fn.dataTable.ext.search.push(function(settings, data) {
let options = $(':checkbox:checked').map(function() {
return $(this).val()
}).get();
if (options.length === 0) {
return true;
}
return options.indexOf(data[1]) !== -1;
});
$(':checkbox').on('click', function() {
table.draw();
});
});
</script>
</head>
<body>
<div>
<label> basketball
<input type="checkbox" value="basketball">
</label>
<label> volleyball
<input type="checkbox" value="volleyball">
</label>
<label> tennis
<input type="checkbox" value="tennis">
</label>
</div>
<table id="data_table">
<thead>
<tr>
<th>name</th>
<th>hobby</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
上面使用交集的方法篩選，稍微改寫一下就可以變聯集了。
沒有留言:
張貼留言