[DATATABLE] Datatable multiple checkbox demo (ok)
https://codepen.io/bhargavmehta/pen/Zpzddv
C:\xampp\htdocs\wpclidemo\index.php
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Datatable multiple checkbox demo</title>
</head>
<body translate="no">
<link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css">
<link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css">
<link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table_jui.css">
<link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css">
<link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_page.css">
<script src="https://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery@2.0.3"></script>
<script data-require="datatables@*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<div id="dt_wrapper" class="dataTables_wrapper no-footer">
<div class="dataTables_length" id="dt_length">
<label>Show <select name="dt_length" aria-controls="dt" class="">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select> entries
</label>
</div>
<div id="dt_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="dt"></label></div>
<table id="dt" class="dataTable no-footer" role="grid" aria-describedby="dt_info" style="width: 1906px;">
<thead>
<tr role="row">
<td class="sorting_asc" tabindex="0" aria-controls="dt" rowspan="1" colspan="1" aria-sort="ascending" aria-label="type: activate to sort column descending" style="width: 556px;">type</td>
<td class="sorting" tabindex="0" aria-controls="dt" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 951px;">Description</td>
<td class="sorting" tabindex="0" aria-controls="dt" rowspan="1" colspan="1" aria-label="Free: activate to sort column ascending" style="width: 339px;">Free</td>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">A</td>
<td>basic stuff</td>
<td>1</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">CNAME</td>
<td>complicated stuff</td>
<td>1</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">MX</td>
<td>some stuff</td>
<td>0</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">MX</td>
<td>more stuff</td>
<td>0</td>
</tr>
</tbody>
</table>
<div class="dataTables_info" id="dt_info" role="status" aria-live="polite">Showing 1 to 4 of 4 entries</div>
<div class="dataTables_paginate paging_simple_numbers" id="dt_paginate"><a class="paginate_button previous disabled" aria-controls="dt" data-dt-idx="0" tabindex="0" id="dt_previous">Previous</a><span><a class="paginate_button current" aria-controls="dt" data-dt-idx="1" tabindex="0">1</a></span><a class="paginate_button next disabled" aria-controls="dt" data-dt-idx="2" tabindex="0" id="dt_next">Next</a></div>
</div>
<br>
<br>
<hr>
<input onchange="filterme()" type="checkbox" name="type" value="MX|A|CNAME">All
<input onchange="filterme()" type="checkbox" name="type" value="MX">MX
<input onchange="filterme()" type="checkbox" name="type" value="A">A
<input onchange="filterme()" type="checkbox" name="type" value="CNAME">CNAME
<hr>
<input onchange="filterme()" type="radio" name="free" value="0">0
<input onchange="filterme()" type="radio" name="free" value="1">1
<input onchange="filterme()" type="radio" name="free" value="">All
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script id="rendered-js">
// Code goes here
$(function() {
otable = $('#dt').dataTable();
});
function filterme() {
//build a regex filter string with an or(|) condition
var types = $('input:checkbox[name="type"]:checked').map(function() {
return '^' + this.value + '\$';
}).get().join('|');
//filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
otable.fnFilter(types, 0, true, false, false, false);
//use radio values
var frees = $('input:radio[name="free"]:checked')[0].value;
//now filter in column 2, with no regex, no smart filtering, no inputbox,not case sensitive
otable.fnFilter(frees, 2, false, false, false, false);
}
//# sourceURL=pen.js
</script>
</body>
</html>
Last updated