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/