Наверх

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
} );
} );

 

DataTable

Скачать с официального сайта или Скачать с этого сайта версию 1.9.4

Источник: http://datatables.net/

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

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