创建过滤数据表的多选下拉列表
Posted
技术标签:
【中文标题】创建过滤数据表的多选下拉列表【英文标题】：Create A Multi Select Dropdown Which Filters A DataTable 【发布时间】：2019-08-10 03:16:42 【问题描述】：我有一个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
<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 然后记住选择的选项并继续重新绘制表格不知道
【问题讨论】：
【参考方案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();
);
【讨论】：
【参考方案2】：您可以尝试点击输入类型复选框的 ID
【讨论】：
不确定我是否理解您的回复。我已经可以使用$("input[name = 'filterReportDD'], label[name = 'filterReportDD']").click(function () 加入我的function。我需要帮助来过滤选中每个复选框的表格以上是关于创建过滤数据表的多选下拉列表的主要内容，如果未能解决你的问题，请参考以下文章
在 Selenium Webdriver 如何处理这种包含复选框的多选下拉列表
vue+element 支持模糊搜索的多选下拉列表封装(可直接使用)