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






Добро пожаловать!

Сортируемые таблицы 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 из 5)
Загрузка...

Комментарии

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

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

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

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

Комментарии

  • Загрузка...

Наверх