时间戳

首页 > 解决方案 > 创建过滤数据表的多选下拉列表

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

问题描述

我有一个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 Fucntion 调用代码需要去的地方在此处输入图像描述 

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

})

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

标签： javascriptjquerydatatabledatatables

解决方案

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

推荐阅读