Issue
i have a table with dataTable, in this table i have a filter with label All, Software Enginer
when i klik the label Software Enginer the value is the result is appropriate with label, but when i klik all label the value in dataTable is missing/zero data
the code of my table like this:
<div class="position-relative content">
<div class="position-absolute w-100 row" style="z-index: 50;">
<div class="col-6">
<div class="filter-wrapper">
<input type="radio" class="filter-checkbox" name="filter" value="all" checked="checked" />
All
<input type="radio" class="filter-checkbox" name="filter" value="Software Engineer" />
Software Engineer
<input type="radio" class="filter-checkbox" name="filter" value="Accountant" />
Accountant
</div>
</div>
</div>
</div>
<table id="example" class="table" style="z-index: 30;">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Status</th>
<th>Hidden</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>
<div class="badge status-badge badge-info">
Draft
</div>
</td>
<td>DRF</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>
<div class="badge status-badge badge-info">
Draft
</div>
</td>
<td>DRF</td>
</tr>
</tbody>
</table>
</div>
an then this is my javascript code for dataTable and filter for position field:
$(document).ready(function() {
dataTable = $("#example").DataTable({
columnDefs: [{
targets: [7],
visible: false
}],
"bInfo": false,
"bPaginate": true,
"bLengthChange": false,
"buttons": [],
"ordering": false,
language: {
paginate: {
next: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-right"></i>',
previous: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-left"></i>'
}
},
});
$(".filter-checkbox").on("change", function(e) {
var searchTerms = [];
$.each($(".filter-checkbox"), function(i, elem) {
if ($(elem).prop("checked")) {
searchTerms.push("^" + $(this).val() + "$");
}
});
dataTable.column(1).search(searchTerms.join("|"), true, false, true).draw();
});
});
this is my jsdfile: https://jsfiddle.net/4y9u8xnq/
this is my picture for the result code:
someone can help. how to show all data when i click the radio button with value all?
Solution
This works for me.
I skip the push in the searchTerms
array if the value of the checked radiobutton is equals to 'all'
$(".filter-checkbox").on("change", function(e) {
var searchTerms = [];
$.each($(".filter-checkbox"), function(i, elem) {
if ($(elem).prop("checked")) {
if($(this).val() != "all"){
searchTerms.push("^" + $(this).val() + "$");
}
}
});
dataTable.column(1).search(searchTerms.join("|"), true, false, true).draw();
});
Answered By - C. Celora
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.