单个列搜索使用带顶部过滤器的DataTable.js过滤js源数据 [英] Individual column searching filter for js sourced data using DataTable.js with filter at the top
问题描述
我无法将过滤器选择放在顶部。我如何实现？
I am unable to place the filter selects at the top. How do I achive?
我坚持使用initComplete选项，因为它只在DataTable完全初始化时触发一次，并且可以安全地调用API方法。
I stuck to initComplete option as it is triggered just once upon DataTable fully initialized and API methods can be called safely.
另外，我确切地将列下拉值设为unnique
const dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
];
const dataTable = $('#example').DataTable({
data: dataSet,
dom: 't',
columns: ['Name', 'Job Title', 'Location', 'Id', 'Hire Date', 'Salary'].map(header => ({
title: header
})),
initComplete: function () {
//purge existing <tfoot> if exists
$('#example tfoot').remove();
//append new footer to the table
$('#example').append('<tfoot><tr></tr></tfoot>');
//iterate through table columns
this.api().columns().every(function () {
//append <select> node to each column footer inserting
//current column().index() as a "colindex" attribute
$('#example tfoot tr').append(`<th><select colindex="${this.index()}"></select></th>`);
//grab unique sorted column entries and translate those into <option> nodes
const options = this.data().unique().sort().toArray().reduce((options, item) => options += `<option value="${item}">${item}</option>`, '<option value=""></option>');
//append options to corresponding <select>
$(`#example tfoot th:eq(${this.index()}) select`).append(options);
});
}
});
$('#example').on('change', 'tfoot select', function (event) {
//use "colindex" attribute value to search corresponding column for selected option value
dataTable.column($(event.target).attr('colindex')).search($(event.target).val()).draw();
})
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example">
</table>
推荐答案
您可以替换默认 column（）。header（） with您的自定义< select> 节点，如下所示：
You may replace default column().header() with your custom <select> node, like that:
const dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
];
const dataTable = $('#example').DataTable({
data: dataSet,
dom: 't',
ordering: false,
columns: ['Name', 'Job Title', 'Location', 'Id', 'Hire Date', 'Salary'].map(header => ({title: header})),
initComplete: function(){
const table = this.api();
table.columns().every(function(){
//grab initial column title
const title = $(this.header()).text();
//replace header with <select> node
$(this.header()).html(`<select><option value="">${title} (All)</option></select>`);
//grab unique sorted column values into <option> nodes
const options = this.data().unique().sort().toArray().reduce((options, item) => options += `<option value="${item}">${item}</option>`, '');
//population <select> with options
$(this.header()).find('select').append(options);
});
}
});
//filter upon option select
$('#example').on('change', 'thead select', event => dataTable.column($(event.target).closest('th')).search($(event.target).val()).draw());
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example"></table>
</body>
</html>
但它会影响排序功能 - 每次点击/选择选项时都会交换列排序顺序（就像在这个问题的另一个答案中可以看到的那样。）它可以被禁用，因为它是在我的。如果该功能仍然需要功能，有一个解决方法。
But it will affect sorting feature - you'll get column sorting order swapped each time you click/select option (like it can be seen in another answer to this question. Either it can be disabled, as it is done in mine. If that feature still needs to be functional, there's a workaround for that.
这篇关于单个列搜索使用带顶部过滤器的DataTable.js过滤js源数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
