我想在列过滤器中选择多个项目。以下示例允许您使用下拉列表对列进行过滤:
http://datatables.net/release-datatables/examples/api/multi_filter_select.html
但是,我希望能够在列过滤器中选择多个项目,可能在下拉列表中的每个项目旁边都有一个复选框。例如在示例中,我会将'A'和'C'标记为'CSS grade',以便只在表格中显示这些等级。
如何使用DataTables插件或其他方式获得多选列过滤器?
答案 0 :(得分:0)
您可以使用选择列表,复选框和其他内容构建自己的过滤器div,并使用fnFilter从服务器请求过滤后的数据。例如:
$("#mycheckbox").click(function () {
var dt = $('#mytable').dataTable({ "bRetrieve": true });
dt.fnFilter($("#mycheckbox").is(':checked'), 1);
});
文章:
sSearch_1 : true/false
答案 1 :(得分:0)
这很容易,多次以各种方式询问 - 但令人惊讶的是我无法找到完全匹配。如果您的列对应于您的列:
<select class="form-control" id="ddlSearch">
<option value="0">Name</option>
<option value="1">Position</option>
<option value="2">Office</option>
<option value="3">Age</option>
<option value="4">Start date</option>
<option value="5">Salary</option>
</select>
然后实现此javascript以在单独的列中获取seacrh
var table;
$(document).ready(function() {
table = $('#example').DataTable({
pageLength: 100,
dom: 'lrtip',
});
var column_no = 0;
$('#ddlSearch').on('change',function(){
column_no = Number($(this).val());
});
$( '#txtSearch' ).on( 'input', function () {
if ( table.columns([column_no]).search() !== $( '#txtSearch' ).val() ) {
table.columns([column_no]).search( $( '#txtSearch' ).val() ).draw();
}
} );
});
例如尝试此https://jsfiddle.net/07rnpgs1/
一切顺利
答案 2 :(得分:0)
您可以检出this DataTables插件。它提供了每列多个条件选择,以及跨几列的并集选择。
这是短暂的 DEMO :
$(document).ready(function () {
//Source data definition
var tableData = [{
name: 'Clark Kent',
city: 'Metropolis',
race: 'cryptonian'
}, {
name: 'Bruce Wayne',
city: 'Gotham',
race: 'human'
}, {
name: 'Steve Rogers',
city: 'New York',
race: 'superhuman'
}, {
name: 'Peter Parker',
city: 'New York',
race: 'superhuman'
}, {
name: 'Thor Odinson',
city: 'Asgard',
race: 'god'
}, {
name: 'Jonathan Osterman',
city: 'New York',
race: 'superhuman'
}, {
name: 'Walter Kovacs',
city: 'New Jersey',
race: 'human'
}, {
name: 'Arthur Curry',
city: 'Atlantis',
race: 'superhuman'
}, {
name: 'Tony Stark',
city: 'New York',
race: 'human'
}, {
name: 'Scott Lang',
city: 'Coral Gables',
race: 'human'
}, {
name: 'Bruce Banner',
city: 'New York',
race: 'superhuman'
}
];
//DataTable definition
window.dataTable = $('#mytable').DataTable({
sDom: 'tF',
data: tableData,
columns: [{
data: 'name',
title: 'Name'
}, {
data: 'city',
title: 'City'
}, {
data: 'race',
title: 'Race'
}]
});
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.mfilter.tk/js/mfilter.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>