Сделать столбцы несортируемыми в dataTables.js плагине jQuery
Я использую плагин jQuery dataTables.js.
Первый столбец моей таблицы - это счетчик строк, поэтому я не хочу, чтобы он сортировался пользователем. В последнем столбце содержится ссылка на действие, которую пользователь может выполнять в строке. Как я могу сделать эти два столбца несортируемыми?
Примечание. Я использую режим конвейера (серверный процесс) для данных.
Ответы
Ответ 1
Это делается установкой bSortable на false:
/* Using aoColumnDefs */
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
] } );
} );
/* Using aoColumns */
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null,
null
] } );
} );
Ответ 2
DataTables 1.10+ также поддерживает атрибуты стиля HTML5 data-
, включая data-sortable="false"
, что делает столбец непригодным для сортировки:
<table>
<thead>
<tr>
<th data-sortable="false">Row</th>
<th>Name</th>
<th>Join Date</th>
<th>Organization</th>
<th data-sortable="false">Options</th>
</tr>
</thead>
<tbody>
<tr>
[etc]
</tr>
</tbody>
</table>
Посмотрите эту демонстрацию в jsFiddle
Ответ 3
aaSortingFixed
Этот параметр в основном идентичен к параметру aaSorting, но не может быть отменено путем взаимодействия с пользователем стол. Это означает, что вы может иметь столбец (видимый или скрытый), который сортировка будет всегда сначала быть вынужденным - любая сортировка после что (от пользователя) будет выполняются по мере необходимости. Это может быть полезно для группировки строк вместе.
Пример использования:
$(document).ready( function() {
$('#example').dataTable( {
"aaSortingFixed": [[0,'asc'],[5,'asc']]
} );
} );
0
- номер вашей строки "unsortable" (слева). (Итак, в этом примере фиксируются столбец первого и шестого порядков)
Официальная документация
Ответ 4
Вы можете определить функцию обратного вызова для поддержки номера неизменяемых номеров в отдельном столбце:
$('#someId').dataTable({
// ...
"aoColumns": [
// ...
{"bSortable": false}, // set unsortable this column
// ...
],
fnDrawCallback: function(oSettings) {
$(this).find('tbody tr').each(function(index) {
$(this).find('td').eq(1).text(index + 1); // .eq([index of column])
});
}
});
Ответ 5
Существует несколько способов отключить сортировку по определенным столбцам.
Самый простой метод заключается в использовании параметра aoColumnDefs
для настройки столбца (ов):
/*
* aoColumnDefs must be an array of objects (definitions)
* each definition must contain the aTargets property that
* specifies the columns on which the definition applies
* and other properties such as bSortable, bSearchable, bVisible
*/
var aoColumnDefs = [
{
"aTargets": [0, 6],
"bSortable": false
}
];
var dataTable = $('#example').dataTable({
"aoColumnDefs": aoColumnDefs
});
Другим, менее гибким вариантом является использование параметра aoColumn
для настройки столбца (ов):
/*
* aoColumn must be an array of objects
* the array size must match the number of columns
* use null to tell the plugin to use default settings for that column
*/
var aoColumns = [
/* 0 */ { "bSortable": false },
/* 1 */ null,
/* 2 */ null,
/* 3 */ null,
/* 4 */ null,
/* 5 */ null,
/* 6 */ { "bSortable": false }
];
var dataTable = $('#example').dataTable({
"aoColumns": aoColumns
});
Демо:
Документация: