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/

| jQuery, Вёрстка и CSS | Опубликовано: 12.03.2013 12:12 | 0