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?
2
Answers
This works for me.
I skip the push in the
searchTermsarray if the value of the checked radiobutton is equals to ‘all’The accepted answer certainly works.
But with some changes, the JavaScript can be greatly simplified.
This alternative approach uses a custom attribute in each of the radio button elements.
We can further simplify the code by recognizing that we only ever select one radio button value at a time from the single group of options (these are not checkboxes, where multiple values could be selected at once).
An final simplification can be made by not using the DataTables regex functionality here, since we want to match on the exact string.
Combining all of the above approaches gives the following:
In the above approach, we add a
data-filtercustom attribute to every radio button.For the
allradio button, this is set to be an empty string:"". This is because searching for an empty string (when regex is disabled) means that no records are filtered out – all records are returned by the search.In the JavaScript code, we remove the unnecessary concatenation logic
searchTerms.join("|").We also use our new
data-filterattribute when retrieving the one and only selected value:We also change the
regexparameter tofalse:If we were using checkboxes instead of radio buttons, then several of the above steps would need to be reversed – for example, the concatenation would still be needed.
The
regexoption would also be needed again – and to make that work, the HTML attribute would need to be changed from this:to this:
But with grouped radio buttons (as used in the question), the entire search logic can be reduced to 2 lines: