创建过滤数据表的多选下拉列表

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();

})

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

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();
});

Answer 2

您可以尝试点击输入类型复选框的 ID