Блог

У меня есть DataTable а также внешний множественный выбор button-group . Что мне нужно, так это если пользователь установит / отменит флажок из этого списка для DataTable фильтрации таблицы в режиме реального времени (без необходимости нажимать кнопку «Отправить»), но я понятия не имею. У меня это работало для одного select , но я никогда не использовал множественный выбор.

Код с одним выбором
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();
    }
})
  

Новый 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 amp;nbsp;
        <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 amp; Network">
                <label name="filterReportDD" class="form-check-label dropdownCheckBoxLabel"
                    for="routersNetwork">Routers amp; 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>
  

Скриншот

Вызова функции jQuery, куда должен быть отправлен код

 // Filters report from the dropdown list
$("input[name = 'filterReportDD'], label[name = 'filterReportDD']").click(function () {
    event.stopPropagation();

})
  

Понятия не имею, как это сделать, я предполагаю, что для этого потребуется какой-то loop и, возможно, создать array , затем запомнить выбранные параметры и продолжать перерисовывать таблицу, понятия не имею

Это код для выполнения фильтрации с несколькими выборками от a dropdown до 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();
});
  

Вы можете попробовать щелкнуть по флажку идентификаторы типа ввода