Отправка сообщения






Сортируемые таблицы DataTables

dataTables
Табличные данные довольно часто используется на сайтах, для показа различных списков структурированных по столбцам. Для подобных таблиц может понадобиться возможность сортировки записей по столбцам, и тут может пригодиться плагин для JQuery. Название плагина, пожалуй, говорит о своем назначении – DataTables. Данный плагин является довольно гибким инструментом, который способен расширить возможности управления таблицами в html.

Давайте кратко рассмотрим возможности плагина:

  • Возможность разбивки таблицы на страницы (пагинация);
  • Фильтрация «на лету»;
  • Возможность сортировки по нескольким столбцам с определением типа данных;
  • Автоматическая обработка ширины столбцов;
  • Возможность локализации;
  • Поддержка JQuery UI ThemeRoller;
  • Дополнительные модули, Editor, TableTools, FixedColumns и т.п.;

Рассмотрим простой пример использования плагина DataTables:

$(document).ready(function() {
    $('#example').DataTable();
} );

Сортировка по столбцам может быть соответственно по возрастанию (asc) и по убыванию (desc). Стоит обратить внимание на то, что нумерация столбцов начинается с 0.
Код сортировки:

$(document).ready(function(){
	$('#example').dataTable( {
		"aaSorting": [[ 4, "desc" ]]
	});
});

Таблица сортируется путем нажатия на нужный заголовок. Кроме того есть и режим мультисортировки, т.е. по нескольким столбцам. Для этого необходимо при выборе столбцов необходимо зажимать клавишу Shift.

$(document).ready(function(){
	$('#example').dataTable( {
		"aaSorting": [[ 4, "desc" ]]
	});
});

Теперь поговорим о разбивке таблицы на страницы или как ещё принято называть пагинации.
Настраивается пагинация так же просто.

$(document).ready(function(){
	$('#example').dataTable({
		"sPaginationType": "full_numbers"
	});
});

Параметр sPaginationType может быть иметь одно из двух значений:
two_button – значение по умолчанию, будут показаны только кнопки «вперед» и «назад»;
full_numbers – будут показаны все кнопки постраничной навигации, включая номера страниц;

Ещё одна приятная особенность плагина это возможность задания количества строк на странице.

$(document).ready(function(){
	$('#example').dataTable({
		"iDisplayLength": 50
	});
});

Кроме всего прочего с другими особенностями данного плагина, а так же его примерами вы можете ознакомиться на официальном сайте проекта плагина dataTables.
Надеюсь, информация была вам полезной. Так же касательно темы таблиц рекомендую к прочтению статью о том, как сделать фиксированные заголовки в таблице.

Добавил: htmaker, 11.10.2015 г.
 
нравится (1 оценок, среднее: 5,00 из 1)
Загрузка...

Комментарии

  1. Стас пишет:

    Единственный сайт где нашел нормальный внятный ответ: Как сортировать столбец в DataTables. Спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Наверх