Таблица с фильтром jquery

Таблица с фильтром jquery

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

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

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

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

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

Приветствую, друзья. Встречайте новую подборку с очередными JQuery полезностями, а именно здесь Вы сможете скачать несколько JQuery плагинов таблиц для сайта. Тут собраны самые популярные и функциональные таблицы, которые можно использовать совершенно в разных целях. Я думаю, что данная подборка существенно сократит Вам долгие поиски того что нудно именно Вам.

Последнее изменение: 23.01.2019 · 2818

Сортировка и фильтрация очень полезны, если у вас есть определенные наборы данных, такие как таблицы или гриды, однако вы также можете использовать их для управления представлениями списка, например, для страницы портфолио. Фильтры jQuery и плагины сортировки позволяют вам контролировать порядок, размещение, разбиение по страницам и организацию элементов страницы / таблицы.

Эта статья включает в себя 20 лучших плагинов jQuery фильтрации и сортировки для разработчиков, плагины ниже имеют ряд функций и позволяют легко сортировать и фильтровать данные для ваших веб-приложений. Не стесняйтесь поделиться своими мыслями, разместив комментарий ниже.

Читайте также:  Как делать оружие из душ боссов

1. Shuffle

Shuffle.js — это плагин jQuery для сортировки, фильтрации и размещения группы элементов. ОН быстродействующий, отзывчивый и быстрый. Ссылка

2. Sortable

jQuery Sortable — гибкий, удобный сортировочный плагин. Он позволяет сортировать элементы списка (или таблицы и т. Д.) По горизонтали и вертикали с помощью мыши. Поддерживает вложенные списки и чистые контейнеры перетаскивания. jQuery Sortable не зависит от jQuery UI и хорошо работает с Twitter Bootstrap (вы даже можете сортировать навигацию Bootstrap). Ссылка

3. HTML5 Sortable

HTML5 Sortable — это плагин jQuery для создания сортируемых списков и сеток с использованием встроенного API перетаскивания HTML5. Ссылка

4. jQuery DataTables

jQuery DataTables — мощный плагин, который может сортировать, разбивать на страницы и фильтровать миллионы записей. Ссылка

5. jPList

jPList — гибкий плагин jQuery для сортировки, разбивки на страницы и фильтрации любой HTML-структуры. Поддерживаются источники данных: PHP + MySQL, ASP.NET + Sql Server, PHP + SQLite. Он работает с такими шаблонами JavaScript, как Handlebars, Mustache и т. Д. JPList поддерживает XML + XSLT. Работает во всех основных браузерах. Для некоммерческих, личных или открытых проектов и приложений вы можете использовать jPList бесплатно в соответствии с условиями лицензии GPL V3. Ссылка

6. Mixitup

MixItUp — это плагин jQuery, обеспечивающий анимированную фильтрацию и сортировку. Он отлично подходит для управления любым категоризованным или упорядоченным контентом, таким как портфолио, галереи и блоги, но также может служить мощным инструментом для привлечения пользовательского интерфейса приложения и визуализации данных. MixItUp прекрасно работает с вашими существующими HTML и CSS, что делает его отличным выбором для адаптивных макетов. В отличии от подобного рода плагинов (isotope и т.п) данный плагин решает проблему динамической высоты. Если вдруг блок у Вас планирует сменить высоту, то обязательно используйте данный плагин. Ссылка

Читайте также:  Решение систем трех уравнений с четырьмя неизвестными

7. Tiny Sort

TinySort — это небольшой скрипт, который сортирует HTMLElements. Он сортируется по значению текста или атрибута или по одному из его потомков. Приведенные примеры должны помочь вам в этом. Ссылка

8. List.js

List.js — это легкий кросс-браузерный собственный JavaScript, который делает ваши простые списки HTML очень гибкими, доступными для поиска, сортируемыми и фильтруемыми. Также есть возможность добавлять, редактировать и удалять элементы с помощью простых шаблонов. Ссылка

9. JTPS

jTPS — это подключаемый к данным плагин jQuery, который предлагает нумерацию страниц, анимированную прокрутку страниц и интеллектуальную возможность естественной сортировки. Версия для разработки в настоящее время 15 КБ. Ссылка

10. Columns

Столбцы — это простой способ создания данных JSON в HTML-таблицах с возможностью сортировки, поиска и разбивки на страницы. Все, что вам нужно, это предоставить данные, а Columns сделает все остальное. Ссылка

11. Quicksand

Quicksand — это плагин jQuery для переупорядочивания и фильтрации элементов с хорошей анимацией тасования. Ссылка

12. Stup >

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

13. Pour Over

PourOver — это библиотека для простой, быстрой фильтрации и сортировки больших коллекций — например, 100 000 единиц — в браузере. Он позволяет создавать приложения и архивы для исследования данных со скоростью 60 кадров в секунду, которые не должны ждать вызова базы данных для отображения результатов запроса. Ссылка

14. jQuery Sortable Lists

jQuery Sortable Lists позволяет сортировать html-списки, а также создавать древовидные структуры путем перетаскивания мышью с плавным движением, функции обратного вызова isAllowed или экспорта и многое другое. Ссылка

Читайте также:  Тест скорости hdd windows 7

15. jQuery Sort and Order Portfolio

Плагин jQuery Sort and Order Portfolio имеет ряд функций, таких как расширяемый фильтр и кнопки заказа, настройка анимации, управляемой css3, постепенное ухудшение качества, опциональный обратный порядок, вы можете установить, поддерживает ли кнопка заказа поддержку или нет, и многое другое. Ссылка

16. Isotope

Isotope — это изысканный плагин jQuery для магических макетов. Вы можете выявить и скрыть элементы с помощью фильтрации и переупорядочить элементы с помощью сортировки. Синтаксис очень прост, но макеты могут быть действительно динамичными и интеллектуальными. А также, прогрессивно улучшен для CSS3 преобразований и переходов. Ссылка

17. Dynatable

Dynatable — это динамичный, семантический интерактивный плагин для таблиц, использующий jQuery, HTML5 и JSON. И это не только для таблиц. Dynatable предоставляет платформу для реализации наиболее распространенных элементов из коробки, включая сортировку, поиск и фильтрацию. Прежде всего, Dynatable — это чистый и элегантный API, который интересно использовать. Ссылка

18. Bootstrap Dropdown

Bootstrap Dropdown Filter — это элемент управления для jPList, библиотеки с открытым исходным кодом для сортировки, фильтрации и разбиения на страницы. Он позволяет фильтровать любую структуру HTML (DIVs, UL / LI, таблицы и т. Д.) По заданному пути jQuery и использует стандартный раскрывающийся компонент Bootstrap для макета. Ссылка

19. Table Sorter

Tablesorter — это плагин jQuery для преобразования стандартной таблицы HTML с тегами THEAD и TBODY в сортируемую таблицу без обновления страницы. Tablesorter может успешно анализировать и сортировать многие типы данных, включая связанные данные в ячейке. Ссылка

20. WaTable

Швейцарский плагин jQuery для таблиц с фильтром, форматированием, разбивкой на страницы и сортировкой данных с легкостью и скоростью. Ссылка

Ссылка на основную публикацию
Adblock detector