Jquery-плагин DataTables для лёгкого создания сортируемых таблиц
DataTables -это плагин для Javascript-библиотеки JQuery. Это гибкий инструмент, добавляющий расширенные возможности управления таблицами в html. Основные возможности плагина:
- постраничная разбивка с задаваемым количеством записей
- фильтрация "на лету"
- сортировка по нескольким столбцам с определением типа данных
- автоматическая обработка ширины столбцов
- отображение данных практически из любого источника данных (DOM, JavaScript массива, Ajax файла и обработки на стороне сервера (PHP, C #, Perl, Ruby, AIR, Gears и т.д.))
- локализируемость
- поддержка JQuery UI ThemeRoller
- дополнительные модули, Editor, TableTools, FixedColumns и т.д.
Примеры использования:
Простая вставка
$(document).ready(function() { $('#example').dataTable(); } ); |
Сортировка по конкретному столбцу (нумерация начинается с 0). "asc" - сортировка по возрастанию, "desc" - по убыванию.
После таблицу можно сортировать нажатием на заголовок колонки. Если зажать Shift, включается режим мультисортировки но нескольким колонкам.
$(document).ready(function() { $('#example').dataTable( { "aaSorting": [[ 4, "desc" ]] } ); } ); |
Постраничная разбивка таблицы. Ключ "sPaginationType" имеет два состояния: two_button (по умолчанию) и full_numbers. "two_button" означает, что будут выводиться только кнопки "Вперед" и "Назад" для постраничной навигации, а "full_numbers" указывает, что выводятся кнопки "К первой", "К последней", "Вперед", "Назад" и номера страниц, количество которых задано в переменной jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPages (по умолчанию 5).
$(document).ready(function() { $('#example').dataTable( { "sPaginationType": "full_numbers" } ); } ); |
Количество строк на странице задается ключом iDisplayLength
$(document).ready(function() { $('#example').dataTable( { "iDisplayLength": 50 } ); } ); |
Скачать с официального сайта или Скачать с этого сайта версию 1.9.4
Источник: http://datatables.net/