Я не могу разместить выбор фильтра вверху. Как мне добиться?
Я остановился на опции initComplete, так как она запускается только один раз после полной инициализации DataTable, и методы API можно безопасно вызывать.
Также, где именно я мог бы сделать выпадающие значения столбца уникальными
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>
Вы можете заменить содержимое заголовков столбцов с помощью .appendTo( $(column.header()).empty() )
. Вы также можете добавить прослушиватели событий внутри initComplete
-обратного вызова и прикрепить их непосредственно к входам.
const dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Lorem ipsum", "Accountant", "Edinburgh", "1562", "2011/07/25", "$86,000"],
["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 () {
this.api().columns().every( function () {
let column = this;
let select = $('<select><option value = "">All</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change, click', function ( e ) {
e.stopPropagation();
let val = $.fn.dataTable.util.escapeRegex( $(this).val() );
column.search( val ? '^'+val+'$' : '', true, false ).draw();
});
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value = "'+d+'">'+d+'</option>' )
});
});
}
});
<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()
по умолчанию на свой собственный узел <select>
, например:
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>
Но это повлияет на функцию сортировки - вы будете менять порядок сортировки столбцов каждый раз, когда вы нажимаете / выбираете параметр (как это можно увидеть в другом ответе на этот вопрос. Либо его можно отключить, как это сделано в моем случае. Если это функция по-прежнему должна работать, для этого есть обходной путь.
Самый многообещающий ответ! Еще раз спасибо.
Заголовки отсутствуют, мы должны показать имена столбцов