javascript - 创建一个多选下拉列表来过滤数据表

Question

我有一个 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 &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 & 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>

屏幕截图 JQuery 函数调用代码需要去的地方

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

})

不知道该怎么做，我假设它需要某种循环并可能构建一个数组然后记住选择的选项并继续重新绘制表格不知道

Answer 1

这是执行从 dropdown 到 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();
});