[英]How to set from checkboxes column for filtering in datatable jQuery?
我使用 jQuery DataTable库,我想设置用于从复选框中过滤的列。
在我的例子中,我设置了需要表单复选框的列,如果我选择了 I 列,则自动设置为 4,但不设置所需的列。
所以,如果我只选择一列进行过滤,我得到 4,并且没有正确创建过滤器。 可能是什么原因?
如上图所示,我设置了Station name ,但我没有得到这个过滤器,而是其他4个过滤器,我不明白为什么?
我的代码: JSFiddle
记者:
var idTable = $(".custom-style").attr('id');
var table = $('#' + idTable + '').DataTable();
function addSpliting(val) {
table.destroy();
$(idTable).DataTable({
searchPanes: {
layout: 'columns-4',
},
dom: 'Pfrtip',
columnDefs: [{
searchPanes: {
show: true,
},
targets: ['' + val + ''],
}]
});
}
function setFilters() {
$("table thead tr th").each(function(index) {
var boxes = `<label>
<input type="checkbox" class="checkbox" id="${index}"/>
${$(this).text()}
</label>`
if ($(this).text() != "") $(".checkBoxes").append(boxes);
});
}
setFilters();
$("#createFilter").on("click", function() {
var checkedIds = $(".checkbox:checked").map(function() {
return this.id;
}).toArray();
addSpliting(checkedIds.join(", "));
});
事实上,你们很接近。 问题是columnDefs 的目标选项只接受以下内容:
你正在发送一个字符串数组。
因此,您只需要对代码进行 2 处更改:
1 - 在 createFilter 的“点击”事件中,创建一个 integer 数组而不是字符串 1。
$("#createFilter").on("click", function() {
var columnFilters = [];
$('.checkbox:checked').each(function () {
columnFilters.push(parseInt($(this).attr('id')));
});
addSpliting(columnFilters);
});
2 - 在您的 jQuery DataTable 初始化中,更改此内容:
targets: ['' + val + '']
有了这个:
targets: val
这是一个工作示例(我对您的代码进行了一些修改):
addSpliting(''); function addSpliting(val) { if(val.= '') { $("#test1"):DataTable({ destroy, true: searchPanes: { layout, 'columns-4', }: dom, 'Pfrtip': columnDefs: [{ searchPanes: { show, true, }: targets; val }] }). } else { $("#test1"):DataTable({ destroy; true }). } } function setFilters() { $("table thead tr th").each(function(index) { var boxes = `<label> <input type="checkbox" class="checkbox" id="${index}"/> ${$(this).text()} </label>` if ($(this).text().= "") $(";checkBoxes");append(boxes); }). } setFilters(), $("#createFilter");on("click". function() { var columFilters = []: $('.checkbox.checked').each(function () { columFilters;push(parseInt($(this);attr('id'))); }); addSpliting(columFilters); });
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/1.2.0/css/searchPanes.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/searchpanes/1.2.0/js/dataTables.searchPanes.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js"></script> <div class="content-container"> <h2 class="head-of-editor">Filtering settings:</h2> <div class="checkBoxes"></div> <br /> <a class="button button-clear" id="createFilter" href="#">Create filter</a><br><br> </div> <table class="custom-style" id="test1"> <thead class="table-head"> <tr> <th>Station code</th> <th>Station name</th> <th>Station type</th> <th>Description</th> <th>Belongs to production resource(s)</th> <th>Main production resource</th> <th></th> </tr> </thead> <tr> <td>a</td> <td>b</td> <td>c</td> <td>a</td> <td>b</td> <td>c</td> <td></td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>a</td> <td>b</td> <td>c</td> <td></td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>a</td> <td>b</td> <td>c</td> <td></td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.