Руководство: использование jQuery Table плагина — делаем таблицу удобной

Работа с таблицами в WEB-интерфейсе может быть намного удобнее работы в том же Excel`е. Можно организовать пользовательские элементы самостоятельно, но зачем? Одна строка JS кода и подключенный плагин — готово.

Плагин jQuery Table — это профессиональный инструмент для работы с HTML-таблицами. Он обладает огромным функционалом, который включает в себя:

  • Сортировку по любому столбцу;
  • Быстрый поиск по таблице;
  • Пагинацию;
  • Лимит на отображение кол-ва элементов;
  • Адаптивный дизайн таблицы.

Особенно хочется отметить, адаптивный дизайн таблицы HTML — это извечная проблема для верстальщика. Спору нет, загонять контент в ячейки и позиционировать их без «ползания», весьма удобно. Однако, когда речь идет о просмотре таблицы на мобильном устройстве, то здесь начинаются проблемы. Порой, неразрешимые.

Итак, пришло время ознакомиться с тем, как нам преобразовать таблицу. Готовый результат можно посмотреть здесь. Скачиваем архив из источника, либо подключаем файлы CSS и JS через ресурс CDN:

И давайте начнем с самого простого примера, допустим, имеем следующую HTML-таблицу:

И без какого-либо CSS-кода, объявляем нашу таблицу в скриптах:

В данном случаем, Вы получите все параметры таблицы по-умолчанию. В большинстве вариантах, этих настроек бывает достаточно. Однако, данный плагин jQuery Table не был таким популярным, если бы не обладал потрясающей гибкостью. Отключаем сортировки и пагинацию:

Все просто и корректно работает. Давайте организуем сортировку по-умолчанию по любому необходимому полю:

где, "order": [[ 3, "desc" ]] - это третий (с 0) столбец и по убыванию. Скрываем колонки и убираем из быстрого поиска:

Таблица с горизонтальной прокруткой:

Очень удобно также указывать и языковые настройки:

Конечно, одним из полезных свойств плагина является его поддержка технологии AJAX:

просто указываем текстовый файл, где будут располагаться массивы со столбцами вида:

Плагин jQuery Table имеет понятную документацию, которая ответить на все вопросы. Вряд ли, у Вас найдутся задачи, которые не смог бы решить этот инструмент.

Все полезные ссылки находятся на странице источника. Там же Вы можете задать вопрос автору плагина. Удачи!

2456 просмотров
В поисках шаблона для сайта?