Настройка плагина DataTables
1 . Официальный сайт с примерами https://datatables.net/
2. Сортировка столбца с датой заданного формата
Предположим, что в одном из столбцов содержатся даты вида 27.12.2016. Сортировка по умолчанию будет работать неправильно. Для настройки необходимо подключить дополнительное расширение плагина, которое зависит от moment.js. Поэтому подключаем два файла (скачать можно здесь)
<script src="'assets/libs/plugins/datatables/moment.min.js'"></script>
<script src="assets/libs/plugins/datatables/datetime-moment.js"></script>
Далее остается настроить формат и вызвать плагин:
$.fn.dataTable.moment( 'DD.MM.YYYY');
$("#example_table").DataTable();
Подробности на официальном сайте: https://datatables.net/blog/2014-12-18
3. Как отключить сортировку некоторых столбцов?
Предположим, что в таблице 6 столбцов и два последних должны быть без сортировки:
$("#example_table").DataTable({
"columns": [
null,
null,
null,
null,
{"orderable": false },
{"orderable": false }
]
});
4. Как запомнить настройки пользователя?
Предположим, пользователь выбрал показ таблицы по 100 записей. Чтобы при повторном посещении страницы настройки не вернулись к 10 по умолчанию, можно использовать свойство stateSave.
$("#example_table").DataTable({
stateSave: true
});
5. Как скрыть пагинацию, информацию о записях, поле для поиска?
$('#example_table').dataTable( {
"paging": false,
"info": false,
"sDom": ''
});
6. Изменить варианты количества строк для показа, сделать по умолчанию свой вариант
$('#example_table').dataTable( { "iDisplayLength": 100,
"aLengthMenu": [[ 10, 20, 50, 100 ,-1],[10,20,50,100,"все"]] });
7. Выбрать столбец для сортировки, причем по убыванию
$('#example_table').dataTable( {
"order": [[ 2, "desc" ]],
});
8. Изменение надписей
Можно, конечно, поиском найти файлы и заменить в них текст. Но лучше:
language: {
"processing": "Подождите...",
"search": "Поиск:",
"lengthMenu": "Показать _MENU_ записей",
"info": "Записи с _START_ до _END_ из _TOTAL_ записей",
"infoEmpty": "Записи с 0 до 0 из 0 записей",
"infoFiltered": "(отфильтровано из _MAX_ записей)",
"infoPostFix": "",
"loadingRecords": "Загрузка записей...",
"zeroRecords": "Записи отсутствуют.",
"emptyTable": "В таблице отсутствуют данные",
"paginate": {
"first": "Первая",
"previous": "Предыдущая",
"next": "Следующая",
"last": "Последняя"
},
"aria": {
"sortAscending": ": активировать для сортировки столбца по возрастанию",
"sortDescending": ": активировать для сортировки столбца по убыванию"
}
}
9. Пример быстрой загрузки с ajax
Используем deferRender, при этом меняем формат первого столбца. После запроса обновляем еще отдельные div-ы. С сервера получаем response()->json(['stat'=>[8,9,8,...], 'data'=>[[9,8,8,...],[7,8,7,...]);, где data - массив строк для таблицы.
var dt = $("#table").DataTable({
"deferRender": true,
"ajax": {
url: "{{route('ajax')}}",
headers: {'X-CSRF-TOKEN': _token},
type: 'POST',
datatype: 'JSON',
data: function(d) {
d.action = 'datatable'; d.data = $('#filter_form').serialize(); d._token = _token;
},
complete: function(d) {
for(var i=0; i<d.responseJSON.stat.length; i++)
$('#div'+i).text(d.responseJSON.stat[i]);
}
},
"iDisplayLength": 25,
"aLengthMenu": [[ 25, 50, 100 , 250], [25, 50, 100, 250]],
"columns": [
{"orderable": false,
"render": function ( data, type, row ) {
return '<i title="'+statuses[data]+'"></i>';
}
},
{"orderable": false}, null, null, null, {"orderable": false}, {"orderable": false}, null, null, {"orderable": false}
],
language: {
"processing": "Загрузка...", "loadingRecords": "Загрузка...", "zeroRecords": "Ничего не найдено", "emptyTable": "Ничего не найдено"
}
});