10 лучших плагинов для таблиц jQuery в 2020 году

Ищете способ создавать солидные таблицы с разнообразными свойствами и дополненной компоновкой?

Здесь я перечислил 10 плагинов для таблиц jQuery, которые помогут вам сделать это и многое другое!

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

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

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

Лучшие бесплатные плагины для таблиц jQuery

Здесь я собрал для вас 10 лучших плагинов для таблиц jQuery с открытым исходным кодом, которые вы можете использовать самостоятельно на своих веб-страницах, я надеюсь, что это поможет вам, и они вам понравятся! Давайте углубимся непосредственно в пост и выясним лучшие плагины для таблиц jQuery.

1. Возможность динамического изменения

Плагин Dynatable jQuery дает вам контроль над задачами создания таблицы, и, конечно же, плагин определенно заслуживает внимания. В некоторых случаях, когда вы полностью увлечены JavaScript/jQuery, некоторые примеры или документация могут вас отпугнуть.

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

Во-первых, хотя плагин относительно старый, он все еще работает и предлагает множество функций с отличными функциональными возможностями. Кроме того, плагин может похвастаться 70 572 загрузками и предлагает вам точную документацию.

Dynatable позволяет своим пользователям выполнять интеллектуальную сортировку по одному или нескольким столбцам, и вы также можете щелкнуть заголовок один раз для возрастания, еще раз для убывания и еще раз, чтобы остановить сортировку по этому столбцу. Это может быть отличным решением для ваших целей.

Лакомые кусочки: Пользовательский запрос и пользовательская сортировка.

Получите плагин: веб- сайт и GitHub .

2. Начальная таблица

CSS по-прежнему широко популярен, а Bootstrap является одним из ведущих фреймворков CSS. Плагин Bootstrap table — это многофункциональный и легкий плагин для таблиц, который обеспечивает ты все функции, необходимые для выполнения минимальной работы по разработке.

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

Плагин поддерживается тысяча s участников, и он имеет тысячи коммитов. Разработка плагина — это непрерывный процесс, и это развивающийся проект с открытым исходным кодом.

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

Лакомые кусочки : находчивое расширение. Экспорт в CSV и JSON.

Получить плагин: веб-сайт и демо .

3. Сортировщик таблиц jQuery

jQuery Table Sorter — это плагин для таблиц jQuery, который преобразует HTML-таблицу с тегами THEAD TBODY в сортируемую без обновления страницы.

Этот плагин может анализировать и сортировать множество типов данных, включая связанные данные в ячейке. Плагин Table Sorter имеет множество функций. Это позволяет сортировать несколько столбцов и несколько тел.

Одним из наиболее важных аспектов плагина является кроссбраузерность, что означает, что он одновременно подходит для IE 6.0+, FF2+, Safari 2.0+, Opera 9.0+ и так далее. Вы можете иметь систему виджетов с помощью плагина, который расширяет возможности использования.

Вы можете увидеть плагин на их официальном сайте и получить его на Github.

4. Таблицы данных

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

Обширные функции и настройки делают плагин удобным для разработчиков. Плагин предоставляет не только универсальные функции, но и солидную документацию. Интеграция с фреймворками CSS для изменения стиля плагина довольно величественна.

Одной из замечательных частей плагина является его премиальная система поддержки через отчеты об ошибках GitHub или прямой контакт с разработчиком через форум поддержки. Более того, если вы хотите интегрировать DataTables в корпоративную систему или что-то критически важное. В этом случае вы можете приобрести корпоративную лицензию, дайте s вам прямую поддержку от разработчиков.

В целом я могу сказать, что DataTables предлагает вам функции, ориентированные на разработчиков, с дополнительным элементом поддержки и помощником.

Получить плагин: веб-сайт и демо.

5. Сортировка — плагин jQuery

Sortable — один из самых известных плагинов jQuery, который в основном работает для сортировки таблиц. Если вы хотите добавить какие-либо функции сортировки, вам просто нужно добавить этот плагин jQuery, и все будет сделано! ?

Этот плагин является плагином с открытым исходным кодом, основанным на JavaScript и CSS-библиотека. Основная обязанность плагина — сортировка таблиц. Вы можете добавить любой сценарий и стиль с 6 потрясающими темами с помощью плагина.

Этот плагин удобен для мобильных устройств, занимает мало места и не требует зависимостей. Это кросс-браузерная совместимость, которая может работать одновременно с IE8+ , Firefox 4+ , Current Webkit (Chrome, Safari) и Opera .

Чтобы реализовать плагин в вашей среде, вам просто нужно включить стили и исходный скрипт. Пример базы кода приведен ниже для вашего лучшего понимания.

 <link rel="stylesheet" href="sortable-theme-dark.css" /> <script src="sortable.min.js"></script>

Затем добавьте атрибут сортировки в таблицу и некоторые классы.

 <table class="sortable-theme-dark" data-sortable> <!-- ... --> </table>

Теперь вы можете сортировать таблицу без перезагрузки страницы. Вот как вы можете это сделать.

Получите плагин: веб-сайт и GitHub.

6. JSON для начальной загрузки таблицы

Плагин JSON To Bootstrap Table jQuery позволяет вам загружать адаптивные таблицы из данных файла JSON. Плагин создаст таблицу, полную данных, которые извлекаются из бэкэнда.

Этот плагин является превосходным плагином, который должен отображать отзывчивую таблицу Bootstrap с кнопками разбиения на страницы и действиями. Вам просто нужно проанализировать ваши данные JSON и передать их в плагин таблицы JSON to Bootstrap, и он динамически создаст таблицу.

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

Получить плагин: C odecanyon Интернет сайт.

7. TinyTable — плагин таблиц jQuery

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

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

Существует еще один вариант — преобразовать таблицу в таблицу с двумя столбцами, которая растягивает ваш сайт по всей длине. Кроме того, с помощью плагина вы можете иметь несколько вариантов демонстрации длинных таблиц, украшая их.

Плагин совместим с браузерами IE9, IE10, IE11, Firefox, Safari, Opera, Chrome и т. д. Это умный плагин jQuery, который вы можете выбрать для работы.

Получите плагин: Веб-сайт C odecanyon.

8. Tablesaw — бесплатный плагин jQuery

Это бесплатный плагин jQuery, который должен использовать адаптивное табличное представление с сохранением качественных разрешений экрана. Разработчикам по-прежнему сложно поддерживать адаптивный дизайн таблицы с надлежащим разрешением экрана.

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

• Стек — это позволит складывать заголовки таблиц в два макета столбцов с заголовками слева и данными справа. Это происходит, когда окно просмотра меньше 40 em или 640 пикселей в ширину.
• Переключатель столбца — позволяет пользователям устанавливать видимость столбца.
• Режим смахивания — использование режимов смахивания.
• Переключатель режимов — используется для переключения между различными режимами.
• Sortable — используется для сортировки данных таблицы.
• Кухонная мойка — используется для объединения всех режимов в одном устройстве.
• Отметить все — включает флажок, который используется для переключения других флажков в столбце.

Этот подключаемый модуль обеспечивает поддержку класса A в IE9+, Android Browser 2.3 и Blackberry OS 6+.

Получить плагин: GitHub .

9. Tablesorter — Плагин таблиц jQuery

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

Используя Tablesorter, вы можете получить новые возможности, такие как алфавитно-цифровая сортировка, функции обратного вызова страницы, несколько виджетов, липкие заголовки, приложение темы пользовательского интерфейса, фильтры столбцов, и изменение размера, и т.п.

Tablesorter поддерживает Bootstrap V2-4 и имеет доступные синтаксические анализаторы для сортировки простого текста, URL-адресов, чисел с плавающей запятой, целых чисел, валюты, IP-адреса, дат и времени и т. д. Вы также можете создать собственный анализатор самостоятельно. Плагин имеет очень маленький размер кода, начиная всего с 25 КБ в минимизированном виде.

Получить плагин: GitHub .

10. FooTable — плагин таблиц jQuery

FooTable — это плагин jQuery, который делает простую HTML-таблицу отзывчивой. Плагин встроен в jQuery и в основном работает с Bootstrap. Это умный плагин, который делает ваши таблицы умнее, чем когда-либо.

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

Независимо от того, сколько столбцов данных у вас может быть в таблице, созданной этим плагином, FooTable преобразует все эти HTML-таблицы в расширяемые адаптивные таблицы.

Плагин предоставляет своим пользователям 3 готовые темы для стола, и они могут добавлять пользовательский CSS в любом месте стола. Используя селектор CSS, вы можете настроить таргетинг на любую конкретную таблицу на вашем сайте.

Получить плагин: GitHub .

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

После прочтения поста вы можете подумать о любом плагине для WordPress, который лучше всего служит той же цели. Я бы порекомендовал вам плагин Ninja Tables для WordPress , который создан на основе комбинации библиотеки jQuery и фреймворка Bootstrap в удобной для WordPress манере.

Получить плагин Ninja Tables

Вывод

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

Если вы не используете WordPress, вы можете использовать любой из упомянутых выше в списке. Или, если вы являетесь пользователем WordPress, я настоятельно рекомендую вам без всяких сомнений выбрать Ninja Tables.

Если вы уже используете какой-либо из них, сообщите мне о своем опыте использования плагина. Или, если вы еще не пробовали, просто попробуйте любой из них. Сообщите нам о ваших требованиях, если вам нужно, или какие-либо предложения по теме.

Если вы являетесь пользователем WordPress, то вам определенно стоит использовать Ninja Tables.