I have a DataTable and also an external multi select button-group. What i need is if the user selects/unselects a checkbox from this list for the DataTable to filter the table real time (without the need to click a 'Submit' button) but i have no idea. I had this working for a single select but never used a multi selected.
Single select code HTML
<label for="groupDD">
Groups
</label>
<select id="groupDD" name="groupDD" class="form-control">
<option value="AllGroups">All groups</option>
<option value="Accessories">Accessories</option>
<option value="Broadband">Broadband</option>
<option value="BroadbandAncillary">Broadband ancillary</option>
<option value="Cables">Cables</option>
<option value="Custom Services">Customer services</option>
</select>
JQuery
$('#groupDD').on('change', function (e) {
e.preventDefault();
if ($(this).val() == 'AllGroups') {
$('#reportDataTable').DataTable().column(2).search('').draw();
} else {
$('#reportDataTable').DataTable().column(2).search($(this).val()).draw();
}
})
New HMTL
div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="height: 35px">
Group name
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdownCheckBox">
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="accessories" name="filterReportDD" data-column="2" value="Accessories">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="accessories">Accessories</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="broadband" name="filterReportDD" data-column="2" value="Broadband">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="broadband">Broadband</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="broadbandAncillary" name="filterReportDD" data-column="2" value="BroadbandAncillary">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="broadbandAncillary">Broadband ancillary</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="cables" name="filterReportDD" data-column="2" value="Cables">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="cables">Cables</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="customerServices" name="filterReportDD" data-column="2" value="Custom Services">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="customerServices">Customer services</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="doorEntry" name="filterReportDD" data-column="2" value="Door Entry">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="doorEntry">Door entry</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="headsets" name="filterReportDD" data-column="2" value="Headsets">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="headsets">Headsets</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="ipPhones" name="filterReportDD" data-column="2" value="IPPhones">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="ipPhones">IP phones</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="leasedLine" name="filterReportDD" data-column="2" value="LeasedLine">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="leasedLine">Leased line</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="numbering" name="filterReportDD" data-column="2" value="Numbering">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="numbering">Numbering</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="routersNetwork" name="filterReportDD" data-column="2" value="Routers & Network">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="routersNetwork">Routers & Network</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="voipServices" name="filterReportDD" data-column="2" value="VoIP Services">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="voipServices">VoIP services</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="wlr3" name="filterReportDD" data-column="2" value="WLR3">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="wlr3">WLR3</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="wlr3Ancillary" name="filterReportDD" data-column="2" value="WLR3 Ancillary">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="wlr3Ancillary">WLR3 ancillary</label>
</div>
</div>
</div>
</div>
Screenshot JQuery Fucntion call where code needs to go
// Filters report from the dropdown list
$("input[name = 'filterReportDD'], label[name = 'filterReportDD']").click(function () {
event.stopPropagation();
})
No idea how to do it, i'm presuming it will need some sort of loop and possibly build an array then remember options selected and keep re-drawing table no idea
I have a DataTable and also an external multi select button-group. What i need is if the user selects/unselects a checkbox from this list for the DataTable to filter the table real time (without the need to click a 'Submit' button) but i have no idea. I had this working for a single select but never used a multi selected.
Single select code HTML
<label for="groupDD">
Groups
</label>
<select id="groupDD" name="groupDD" class="form-control">
<option value="AllGroups">All groups</option>
<option value="Accessories">Accessories</option>
<option value="Broadband">Broadband</option>
<option value="BroadbandAncillary">Broadband ancillary</option>
<option value="Cables">Cables</option>
<option value="Custom Services">Customer services</option>
</select>
JQuery
$('#groupDD').on('change', function (e) {
e.preventDefault();
if ($(this).val() == 'AllGroups') {
$('#reportDataTable').DataTable().column(2).search('').draw();
} else {
$('#reportDataTable').DataTable().column(2).search($(this).val()).draw();
}
})
New HMTL
div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="height: 35px">
Group name
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdownCheckBox">
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="accessories" name="filterReportDD" data-column="2" value="Accessories">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="accessories">Accessories</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="broadband" name="filterReportDD" data-column="2" value="Broadband">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="broadband">Broadband</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="broadbandAncillary" name="filterReportDD" data-column="2" value="BroadbandAncillary">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="broadbandAncillary">Broadband ancillary</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="cables" name="filterReportDD" data-column="2" value="Cables">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="cables">Cables</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="customerServices" name="filterReportDD" data-column="2" value="Custom Services">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="customerServices">Customer services</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="doorEntry" name="filterReportDD" data-column="2" value="Door Entry">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="doorEntry">Door entry</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="headsets" name="filterReportDD" data-column="2" value="Headsets">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="headsets">Headsets</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="ipPhones" name="filterReportDD" data-column="2" value="IPPhones">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="ipPhones">IP phones</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="leasedLine" name="filterReportDD" data-column="2" value="LeasedLine">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="leasedLine">Leased line</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="numbering" name="filterReportDD" data-column="2" value="Numbering">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="numbering">Numbering</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="routersNetwork" name="filterReportDD" data-column="2" value="Routers & Network">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="routersNetwork">Routers & Network</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="voipServices" name="filterReportDD" data-column="2" value="VoIP Services">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="voipServices">VoIP services</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="wlr3" name="filterReportDD" data-column="2" value="WLR3">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="wlr3">WLR3</label>
</div>
<div class="form-check form-check-inline dropdownCheckBoxDiv">
<input class="form-check-input dropdownCheckBoxInput"
type="checkbox" id="wlr3Ancillary" name="filterReportDD" data-column="2" value="WLR3 Ancillary">
<label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
for="wlr3Ancillary">WLR3 ancillary</label>
</div>
</div>
</div>
</div>
Screenshot JQuery Fucntion call where code needs to go
// Filters report from the dropdown list
$("input[name = 'filterReportDD'], label[name = 'filterReportDD']").click(function () {
event.stopPropagation();
})
No idea how to do it, i'm presuming it will need some sort of loop and possibly build an array then remember options selected and keep re-drawing table no idea
2 Answers
Reset to default 4This is the code to do a multi selection filter from a dropdown to a DataTable
$('input[name=filterReportDD]').click(function() {
if ($(this).is(":checked")) {
groupNameFilterApplied.push($(this).val());
}
$('#reportDataTable').DataTable().column(2).search(groupNameFilterApplied.join('|'), true, false, true).draw();
});
You can try on click of the IDs of the input type checkbox