I am using dataTable in WordPress and I have created a checkbox and dropdown select filter. You can see it below It works well in codepen and exported HTML from codepen but when I apply this to the WordPress page, the only the dropdown function is working. I have changed $ to jQuery and added the noConflict() also in the js code but it did not work. Anyone, please help me to solve this.
HTML
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div class="container">
<div class="content">
<div class="row">
<div class="col-8">
<div class="filter-wrapper">
<input type="checkbox" name="pos" value="Wholesalers">Wholesalers
<input type="checkbox" name="pos" value="GDS">GDS
</div>
</div>
<div class="col-4">
<div class="btn-group submitter-group float-right">
<select class="form-control status-dropdown">
<option value="">Region</option>
<option value="Global">Global</option>
<option value="Australia">Australia</option>
<option value="United Kingdom">United Kingdom</option>
</select>
</div>
</div>
</div>
</div>
<table id="example" class="table">
<thead>
<tr>
<th>Name</th>
<th>Region</th>
<th>Industry</th>
<th>Hidden</th>
</tr>
</thead>
<tbody>
<tr>
<td>HaoQiao<br/><p>About HaoQiao</p><br/><span class="desc"></span></td>
<td>China</td>
<td>Wholesalers</td>
<td>China</td>
</tr>
<tr>
<td>STGlobe<br/><p>About STGlobe</p><br/><span class="desc"></span></td>
<td>Global</td>
<td>Wholesalers</td>
<td>Global</td>
</tr>
<tr>
<td>Broadway Travel<br/><p>About Broadway Travel</p><br/><span class="desc"></span></td>
<td>United Kingdom</td>
<td>Wholesalers</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>Abreu Online<br/><p>About Abreu Online</p><br/><span class="desc"></span></td>
<td>Global</td>
<td>Wholesalers</td>
<td>Global</td>
</tr>
<tr>
<td>Across Australia</td>
<td>Australia</td>
<td>Wholesalers</td>
<td>Australia</td>
</tr>
<tr>
<td>Galileo</td>
<td>Global</td>
<td>GDS</td>
<td>Global</td>
</tr>
<tr>
<td>WorldSpan</td>
<td>Global</td>
<td>GDS</td>
<td>Global</td>
</tr>
<tr>
<td>Apollo</td>
<td>Global</td>
<td>GDS</td>
<td>Global</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</body>
</html>
JS
$(document).ready(function() {
dataTable = $("#example").DataTable({
"columnDefs": [
{
"targets": [3],
"visible": false
}
]
});
/*
$('.filter-checkbox').on('change', function(e){
var searchTerms = []
$.each($('.filter-checkbox'), function(i,elem){
if($(elem).prop('checked')){
searchTerms.push("^" + $(this).val() + "$")
}
})
dataTable.column(2).search(searchTerms.join('|'), true, false, true).draw();
});
*/
$('input:checkbox').on('change', function () {
//build a regex filter string with an or(|) condition
var positions = $('input:checkbox[name="pos"]:checked').map(function() {
return '^' + this.value + '$';
}).get().join('|');
//filter in column 1, with an regex, no smart filtering, not case sensitive
dataTable.column(2).search(positions, true, false, false).draw(false);
});
$('.status-dropdown').on('change', function(e){
var status = $(this).val();
$('.status-dropdown').val(status)
console.log(status)
//dataTable.column(6).search('\\s' + status + '\\s', true, false, true).draw();
dataTable.column(3).search(status).draw();
})
});
Thank you
Aucun commentaire:
Enregistrer un commentaire