javascript Настройка плагина DataTables

Настройка плагина DataTables

JavaScript1 . Официальный сайт с примерами 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" ]],

});

другие материалы