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

DataTables

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

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

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

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