Jquery работа с таблицами: Перебор ячеек таблицы jQuery

Includes

• Multiple formats
• No login requirement
• Instant download
• Verified by our users

изучаем Jquery 1.

• 7301 views

DownloadEmbed

This document was uploaded by our user. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form. Report DMCA

E-Book Overview

Издание, посвященное jQuery версии 1.3, знакомит с основами использования этой библиотеки для создания привлекательных интерактивных сайтов. jQuery поможет автоматизировать решение типичных задач и упростить решение более сложных. Опытные веб дизайнеры, немного знакомые с программированием, смогут быстро приступить к использованию jQuery благодаря тому, что она основана на стандартах технологий HTML и CSS. Опытные программисты при изучении библиотеки оценят ее концептуальную целостность. На английском уже вышла обновленная версия для jQuery 1. 4.

E-Book Information

• Series: High Tech

• Year: 2,010

• Pages: 445

• Pages In File: 445

• Language: Russian

• Topic: 70

• Library: www.infanata.com

• Issue: 2010 07-10

• Identifier: 978-5-93286-177-6

• Commentary: 1146132976 хор

• Org File Size: 8,152,901

• Extension: djvu

• Tags: Библиотека Компьютерная литература HTML / CSS / JavaScript jQuery

• Toc: Содержание ……Page 6
  Вступительное слово ……Page 14
  Об авторах ……Page 16
  Благодарности ……Page 17
  О технических редакторах ……Page 18
  Предисловие . …..Page 20
  О чем рассказывается в этой книге ……Page 21
  Что необходимо для работы с этой книгой ……Page 22
  Типографские соглашения ……Page 23
  Поддержка покупателей ……Page 24
  Что делает библиотека jQuery ……Page 26
  Чем обусловлен успех jQuery ……Page 28
  Хронология развития проекта jQuery ……Page 29
  Подготовка документа HTML ……Page 31
  Подключение jQuery ……Page 34
  В заключение ……Page 37
  Объектная модель документа ……Page 39
  Фабричная функция $() ……Page 40
  Селекторы CSS ……Page 41
  Оформление уровней списка ……Page 42
  Селекторы атрибутов ……Page 44
  Оформление ссылок ……Page 45
  Оформление чередующихся строк ……Page 46
  Селекторы форм ……Page 49
  Методы обхода дерева DOM ……Page 50
  Изменение оформления отдельных ячеек ……Page 51
  Составление цепочек методов ……Page 52
  В заключение ……Page 53
  Момент запуска программного кода ……Page 55
  Множество сценариев в одной странице . …..Page 56
  Сосуществование с другими библиотеками ……Page 58
  Простой переключатель стилей ……Page 59
  Сокращенная форма подключения обработчиков ……Page 67
  Отображение и сокрытие дополнительных возможностей ……Page 69
  Выделение элементов, предусматривающих реакцию на щелчок мышью ……Page 70
  Распространение события ……Page 72
  Побочные эффекты фазы всплытия ……Page 74
  Изменение движения события: объект события ……Page 75
  Остановка распространения события ……Page 76
  Действия по умолчанию ……Page 77
  Делегирование событий ……Page 78
  Удаление обработчика события ……Page 80
  Пространство имен события ……Page 81
  Повторное подключение событий ……Page 82
  События от клавиатуры ……Page 84
  В заключение ……Page 87
  Изменение встроенных свойств стиля CSS ……Page 89
  Простые эффекты скрытия и отображения ……Page 94
  Скорость ……Page 96
  Эффекты проявления и растворения .. ….Page 97
  Составные эффекты ……Page 98
  Создание собственных анимационных эффектов ……Page 99
  Переключение эффекта проявления/растворения ……Page 100
  Управление сразу несколькими свойствами ……Page 101
  Работа с одним набором элементов ……Page 104
  Работа с несколькими наборами элементов ……Page 107
  Функции обратного вызова ……Page 109
  В заключение ……Page 111
  Манипулирование атрибутами ……Page 112
  Атрибуты, отличные от атрибута class ……Page 113
  Еще раз о фабричной функции $() ……Page 115
  Добавление новых элементов ……Page 117
  Перемещение элементов ……Page 119
  Маркировка, нумерация и создание ссылок на контекст ……Page 123
  Добавление сносок ……Page 125
  Обертывание элементов ……Page 126
  Копирование элементов ……Page 127
  Стили CSS ……Page 129
  Программный код ……Page 130
  Украшение врезок ……Page 132
  Коротко о методах манипулирования деревом DOM … …Page 135
  В заключение ……Page 136
  6.AJAX ……Page 137
  Загрузка данных по требованию ……Page 138
  Добавление разметки HTML ……Page 139
  Работа с объектами JavaScript ……Page 142
  Извлечение объектов JavaScript ……Page 143
  Глобальные функции jQuery ……Page 144
  Запуск сценария ……Page 147
  Загрузка документа XML ……Page 149
  Выбор формата данных ……Page 152
  Передача данных на сервер ……Page 154
  Выполнение запроса GET ……Page 155
  Выполнение запроса POST ……Page 158
  Сериализация формы ……Page 159
  Слежение за ходом выполнения запроса ……Page 162
  AJAX и события ……Page 165
  Ограничения безопасности ……Page 166
  Использование формата JSONP для удаленных данных ……Page 167
  Низкоуровневый метод AJAX ……Page 169
  Загрузка частей страницы HTML ……Page 170
  В заключение ……Page 172
  7. Работа с таблицами ……Page 174
  Сортировка на стороне сервера …… Page 175
  Сортировка с помощью JavaScript ……Page 177
  Разбивка на страницы на стороне сервера ……Page 194
  Разбивка на страницы с помощью JavaScript ……Page 195
  Окончательная версия ……Page 201
  Выделение строк ……Page 203
  Подсказки ……Page 211
  Свертывание и развертывание разделов таблицы ……Page 216
  Фильтрация ……Page 219
  Окончательная версия ……Page 224
  В заключение ……Page 227
  Улучшение простой формы ……Page 228
  Прогрессивное улучшение оформления формы ……Page 229
  Поля, отображаемые по условию ……Page 236
  Проверка содержимого формы ……Page 239
  Манипулирование флажками ……Page 247
  Окончательная версия ……Page 249
  Компактные формы ……Page 252
  Текст-заполнитель для полей ……Page 253
  Функция автодополнения на основе технологии AJAX ……Page 256
  Окончательная версия ……Page 264
  Работа с числовыми данными в формах ……Page 266
  Структура таблицы для корзины с покупками . …..Page 267
  Предотвращение возможности ввода нечисловых значений ……Page 270
  Арифметические вычисления ……Page 271
  Удаление элементов ……Page 278
  Изменение информации с адресом доставки ……Page 283
  Окончательная версия ……Page 286
  В заключение ……Page 288
  Прокрутка заголовков ……Page 289
  Подготовка страницы ……Page 290
  Получение рассылки ……Page 292
  Подготовка к выполнению прокрутки ……Page 295
  Функция прокрутки заголовков ……Page 296
  Приостановка при наведении указателя мыши ……Page 299
  Получение рассылки из другого домена ……Page 302
  Эффект изменения прозрачности по высоте ……Page 304
  Окончательная версия ……Page 306
  Карусель изображений ……Page 308
  Подготовка страницы ……Page 309
  Прокрутка изображений щелчком мыши ……Page 312
  Увеличение изображения ……Page 320
  Окончательная версия ……Page 333
  В заключение ……Page 336
  Поиск расширений и получение справочной информации . …..Page 337
  Как использовать расширения ……Page 338
  Расширение Form ……Page 339
  Советы и рекомендации ……Page 340
  Библиотека расширений jQuery UI ……Page 341
  Эффекты ……Page 342
  Компоненты взаимодействий ……Page 344
  Виджеты ……Page 347
  jQuery UI ThemeRoller ……Page 349
  Другие рекомендуемые расширения ……Page 350
  Формы ……Page 351
  Таблицы ……Page 352
  Изображения ……Page 354
  Окна с подсветкой и модальные диалоги ……Page 355
  Диаграммы ……Page 358
  В заключение ……Page 360
  Добавление новых глобальных функций ……Page 361
  Добавление нескольких функций ……Page 362
  Создание вспомогательного метода ……Page 363
  Контекст методов объекта ……Page 365
  Объединение методов в цепочки ……Page 368
  Методы обхода дерева DOM ……Page 369
  Добавление новых сокращенных методов ……Page 374
  Параметры методов ……Page 377
  Отображения параметров ……Page 379
  Значения параметров по умолчанию . …..Page 381
  Функции обратного вызова ……Page 382
  Настраиваемые значения по умолчанию ……Page 383
  Добавление селекторных выражений ……Page 385
  Подготовка расширения к распространению ……Page 388
  Интерфейсы методов ……Page 389
  В заключение ……Page 390
  jQuery API ……Page 391
  Справочник MSDN JScript ……Page 392
  JSMin ……Page 393
  Mezzoblue CSS cribsheet ……Page 394
  JavaScript ant ……Page 395
  DOM scripting ……Page 396
  Платформы разработки веб-приложений с использованием jQuery ……Page 397
  Firebug ……Page 398
  Панель инструментов разработчика для Microsoft Internet Explorer ……Page 399
  Web Inspector ……Page 400
  NitobiBug ……Page 401
  Aptana ……Page 402
  Вложенные функции ……Page 403
  Великий побег ……Page 405
  Область видимости переменных ……Page 406
  Взаимодействия между замыканиями ……Page 408
  Аргументы метода $(document).ready() ……Page 409
  Обработчики событий . …..Page 410
  Угроза утечки памяти ……Page 412
  Проблема утечки памяти в Internet Explorer ……Page 414
  Добрая весть ……Page 415
  В заключение ……Page 416
  Селекторные выражения ……Page 417
  Методы навигации по дереву DOM ……Page 420
  Методы событий ……Page 422
  Методы эффектов ……Page 425
  Методы манипулирования деревом DOM ……Page 426
  Методы поддержки AJAX ……Page 430
  Прочие методы ……Page 432
  Алфавитный указатель ……Page 434
  

Зачетная работа — Основы WEB -технологий

В зачетной работе нужно спроектировать и создать сайт-визитку . Для реализации проекта использовать все упражнения разобранные на практических занятиях.. В реализации сайта использовать языки разметки гипертекста XHTML, HTML5, CSS2, CSS3, Ajax-JQuery для подгрузки контента. Верстка обязательно должна быть адаптивной. Скрипты писать на языке сценариев JavaScript с использованием библиотеки JQuery. Аутентификацию пользователей реализовать на PHP+MySQL. Обязательно реализовать Ajax-подгрузку контента( пример показан на страничке:  ссылка: Создание простого AJAX сайта с помощью jQuery). Предполагается свободный выбор предметной области. Ниже представлен пример выполнения зачетной работы. Первая часть – сами страницы сайта.  Вторая часть – аутентификация пользователей  В процессе выполнения зачетной работы студент должен выполнить следующие этапы работы:  1. Разработать концептуальную модель сайта, включающую в себя систему стилевого оформления (технология CSS), цветовой дизайн, подборку графического оформления (рисунки и т.п.).  2. Спроектировать информационную структуру сайта.  3. Разработать механизм аутентификации пользователей сайта.   4. Подготовить отчет о результатах работы содержащий в себе:  — титульный лист — вариант котрольной работы и задание  — листинг программного кода главной страницы — скриншот разработанного WEB-приложения Примерная тематика для самостоятельной работы студентов:  1. Рекламное агентство  2. Магазин канцтоваров  3. Мебельная фабрика  4. Консалтинговое агентство  5. Издательский дом  6. Туристическое агентство  7. Гостиничный комплекс  8. Строительная компания  9. Агентство недвижимости  10. Ресторан  11. Городской портал  12. Медицинский центр  13. Детский развивающий центр  14. Полиграфическая компания  15. Газета  16. Доставка еды  17. Дизайн клуб  18. Автоломбард  19. Домашние гостиницы  20. Спортивный клуб  21. Салон красоты  22. Фотостудия  23. Футбольный клуб  24. Средняя школа  25. Авиакомпания  26. Автошкола  27. Курьерская служба  28. Банк  29. Интернет магазин  30. Бытовые услуги (хим. чистка)  Пример реализации некоторых страничек сайта. 1 страничка — PHP, данные переданы методом Post.(минимум того, что надо уметь писать на PHP по окончании этого курса)  Усложненный вариант(максимум того, что надо уметь писать на PHP по окончании этого курса). Реализация проекта — аутентификация пользователя, написана на языке сценариев JavaScript с использованием библиотеки JQuery, языка разметки HTML5, каскадной таблицы стилей CSS3. Информация о пользователях  хранится в базе данных (MySql, PHP). Создать две формы в HTML5: форма входа и форма регистрации. Эти формы должны меняться друг с другом местами с помощью эффекта animate из Jquery. Для оформления использовать CSS3. Информация о пользователях (логины, пароли) хранится в базе данных (из одной — 2 таблиц)              Аутентификация пользователя (авторизация и регистрация).Аутентификация пользователя (успешная регистрация, попытка повторной регистрации, попытка авторизоваться с чужим паролем). 2-5 странички.Информационная часть.(Xhtml-JQuery)    Верстка должна быть адаптивной, например так: Вошли на сайт. Главная страница Страница «ПАРИЖ»Текст сворачивается и разворачивается.    Страница «МУЗЕЙ ОРСИ»-работа с изображениями, таблицами                                                                Страница «Лувр»   Страница «Версаль»-события радиокнопок, чекбоксов

	ċ	chalkwork-payments[1]. zip View				Dec 25, 2014, 1:52 AM	Ol Gerenko
	ċ	MySite.7z View				Dec 25, 2014, 1:18 AM	Ol Gerenko

Таблицы jQuery: Плагины для создания таблиц и управления ими

JavaScript

jQuery

10 ноября 2016 г. плагины для таблиц.

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

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

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

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

Dynatable

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

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

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

GitHub

Bootstrap Table

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

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

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

Вам нужно либо запустить проект Bootstrap, либо, при желании, добавить в проект файл Bootstrap CSS и JS. Плагин работает либо через стандартные атрибуты данных HTMTL в ваших таблицах (с описанием необходимых вам функций/параметров), либо через более традиционный подход JS. Если вы уже участвуете в проекте Bootstrap, это отличное начало. Если вы работаете над чем-то другим, кроме Bootstrap, вам нужно взвесить все за и против.

В течение многих лет плагин активно поддерживался десятками участников и тысячами коммитов. Это постоянно развивающийся проект с открытым исходным кодом. Трудно сказать, будет ли это расширено на Bootstrap 4 (поскольку для этого требуется Bootstrap 2/3), но на данный момент можно поспорить, что оно будет продолжать поддерживаться.

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

Веб-сайт
Демонстрация

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

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

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

Веб-сайт/Демонстрация

DataTables

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

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

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

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

Возможность интеграции с CSS-фреймворками для изменения стиля плагина впечатляет. Он совместим с Bootstrap, Foundation, jQuery UI и другими. Другие аспекты, такие как доступ к событиям, система API и динамические данные через AJAX, делают DataTables хорошим выбором.

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

Что касается поддержки, если вы заинтересованы в интеграции DataTables в корпоративную систему или что-то критически важное, вы можете приобрести корпоративные лицензии, которые предоставляют вам прямую поддержку от разработчиков и доступ к запрашиваемым функциям.

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

Веб-сайт/демонстрации

jQuery HighchartTable

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

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

На его веб-сайте представлены все варианты, с описанием простого JSFiddle для каждого, чтобы вы могли увидеть, как все это работает. Вы можете управлять типом графика, цветами, метками и другими интерактивными элементами в соответствии с вашими потребностями.

Следует учитывать, что этот плагин на самом деле не выполняет преобразования диаграмм. Это обрабатывается Highcharts, а это означает, что вам также необходимо включить их файлы JS и CSS, чтобы заставить его работать. Кроме того, хотя у этого плагина есть некоторая активность/разработка, похоже, что его разработчики не слишком активны на GitHub, а это означает, что если для Highcharts выйдет новое обновление или функция, они будут решать, будут ли они обновлять этот плагин для его поддержки. .

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

Веб-сайт
Демо
GitHub

Tabulator

Tabulator — это подключаемый модуль таблиц jQuery, используемый для динамического создания интерактивных расширяемых таблиц из HTML, массива JavaScript, источника данных Ajax или данных JSON. Табулятор имеет широкий спектр функций, таких как фильтрация, сортировка, регулируемая ширина столбцов, интеллектуальная загрузка данных таблицы, нумерация страниц и прямое редактирование ввода таблицы.

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

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

Разработчики Табулятора достаточно активны на GitHub, выпуская обновления каждые несколько месяцев и кучу коммитов и исправлений ошибок за год. Версия 2.7 плагина была выпущена в октябре 2016 года, и можно с уверенностью предположить, что сам плагин будет продолжать развиваться с течением времени. Это может быть важным фактором для вас при выборе плагина таблицы, так как иногда вам может понадобиться поддержка или вы столкнетесь с ошибками.

Веб-сайт
Демонстрации
GitHub

FancyGrid

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

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

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

Интересно отметить, что для плагина нет открытого репозитория GitHub. Вы можете бесплатно загрузить его с их веб-сайта для личного использования, но для коммерческого использования вам необходимо приобрести лицензию на его использование. Highcharts (используемый для 2D-диаграмм) также требует лицензирования для его использования, поэтому вам нужно подумать, готовы ли вы приобрести эти элементы для своего проекта.

Еще несколько интересных моментов: я обнаружил, что загрузка их веб-сайта происходит с задержкой (иногда он не загружался или для создания примеров требовалось время). Это вполне может быть просто изолированной проблемой, но важно отметить (поскольку никто не любит ждать целую вечность, пока загрузятся документы/примеры). Кроме того, мобильная поддержка не задокументирована. Трудно сказать, связано ли это с тем, что плагин никогда не разрабатывался для мобильных устройств, или просто документация устарела. Если вы ищете беспроблемный, потрясающий опыт работы за столом с поддержкой мобильных устройств, то другие плагины могут быть более подходящими.

В целом, однако, FancyGrid представляет собой довольно всеобъемлющий плагин с широкими возможностями настройки, которые вы можете использовать для своего сайта.

Веб-сайт/демонстрации

jQuery KingTable

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

В отличие от некоторых других наших плагинов, KingTable полностью задокументирован на GitHub, а на специальной вики-странице описаны все различные настройки и варианты использования плагина.

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

Мобильная отзывчивость — еще один элемент, который стоит обсудить. Плагин не делает ничего особенного для мобильных устройств, поэтому ваша таблица будет реагировать так же, как и обычно (например, прокручивать вбок или сжимать столбцы на небольших устройствах). Возможно, вы могли бы настроить это самостоятельно, но плагин не справится с этим за вас. Тем не менее, в аналогичной теме KingTable имеет отличную поддержку рабочего стола для пользователей с традиционной клавиатурой, с поддержкой вкладок, управлением разбиением на страницы с помощью левой и правой (или A / D) клавиш, а также другими небольшими улучшениями.

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

Веб-сайт/GitHub

Документация (Wiki)

Stackable.js

Stackable.js — это ориентированный на мобильные устройства подключаемый модуль jQuery, цель которого — сделать ваши таблицы удобными для мобильных устройств путем настройки их макета для небольших устройств.

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

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

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

GitHub
Веб-сайт/демонстрация

JQuery ReStable

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

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

Сам плагин предназначен только для мобильных настроек: он не добавляет никаких функций и не имеет реальных параметров для настройки; это простой плагин в стиле drop-and-go. Пока у вас правильная HTML-разметка и вы добавляете немного базового jQuery, чтобы запустить все, все уладится само собой.

ReStable — довольно небольшой плагин, и поэтому у него есть несколько коммитов на GitHub. Это не проект сообщества/команды, что само по себе хорошо, но вы можете учитывать это, если вам когда-нибудь понадобится поддержка для помощи. Как и большинство небольших проектов, вы должны использовать его «как есть» и надеяться на лучшее.

Веб-сайт/демонстрация
GitHub

FooTable

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

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

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

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

FooTable — длинный стандартный проект с несколькими сотнями коммитов от десятков участников. Идет постоянная деятельность и совершенствование. Если вы ищете плагин, который был протестирован, итерирован и улучшен (с возможностью использовать команду опытных участников), то этот плагин может быть идеальным для вас. Версия 3 этого плагина была полностью переработана, поэтому вы можете найти случайные ошибки/проблемы, но, судя по тому, что я видел, он работает практически сразу после установки с небольшой настройкой.

Веб-сайт/демонстрация
GitHub

Tabella.js

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

В отличие от других плагинов, вы используете Tabella для создания своей таблицы. Вы выбираете элемент, который хотите использовать в качестве контейнера для своей таблицы, а затем предоставляете свои данные в виде объекта (с указанием заголовков и значений столбцов). Было бы хорошо, если бы этот плагин мог принимать необработанные данные JSON или передавать их в существующую таблицу для очистки и рендеринга, но в целом он работает хорошо, предоставляя вам таблицу, удобную для мобильных устройств.

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

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

На этот определенно стоит обратить внимание, если вы хотите что-то необычное, чтобы ваш стол работал на мобильных устройствах.

GitHub
Веб-сайт/Демонстрация

Подведение итогов

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

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

Наконец, если вы хотите улучшить свои навыки JavaScript, ознакомьтесь с нашей библиотекой книг по JavaScript!

Поделиться этой статьей

jameshjQuery

10 лучших плагинов для таблиц jQuery, которые нельзя пропустить в 2018 году

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

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

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

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

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

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

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

1. Dynatable

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

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

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

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

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

Получите подключаемый модуль:   Веб-сайт и GitHub .

2. Таблица Bootstrap

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

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

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

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

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

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

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

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

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

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

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

4. DataTables

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

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

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

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

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

5. Sortable — плагин jQuery

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

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

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

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

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

Загрузите плагин: C Веб-сайт odecanyon.

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

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

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

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

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

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

9. Плагин Tablesorter — jQuery Table

Плагин 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 Plugin , который создан на основе комбинации библиотеки jQuery и платформы Bootstrap в удобной для WordPress манере.

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

Заключение

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

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

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

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

Плагин таблицы jQuery

Плагин таблицы jQuery — страница 1

Загрузите бесплатные плагины jQuery Data Table, Data Grid, Table Sort и другие плагины для работы с таблицами в нашем разделе jQuery Table Plugin. Страница 1 .

ДемоСкачать

19. 09.2022 — Таблица — 49 просмотров

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

ДемоСкачать

08.09.2022 — Таблица — 41471 просмотров

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

ДемоСкачать

07.09.2022 — Таблица — 154 просмотров

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

ДемоСкачать

31. 08.2022 — Таблица — 500 просмотров

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

ДемоСкачать

20.08.2022 — Таблица — 39044 просмотров

Bootstrap Table — это отзывчивый, динамичный, расширяемый, многофункциональный и легко настраиваемый плагин таблицы данных jQuery для Bootstrap 4, Bootstrap 3 и Bootstrap 2.

ДемоСкачать

20.08.2022 — Таблица — 39623 просмотров

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

ДемоСкачать

10. 08.2022 — Таблица — 16839 просмотров

tui.grid — это надежный компонент сетки данных, который помогает динамически отображать большие данные в высокопроизводительной многофункциональной сетке данных за минуту.

ДемоСкачать

03.08.2022 — Таблица — 201 просмотров

Плагин сортировки таблиц jQuery, который автоматически выбирает подходящий метод сортировки на основе значения данных и поддерживает сложные таблицы с rowspan/colspan.

ДемоСкачать

19.07.2022 — Таблица — 528 просмотров

Легкий и многофункциональный плагин jQuery, который превращает ваши HTML-таблицы (или данные JSON) в интерактивные таблицы данных с расширенными функциями.

ДемоСкачать

09. 07.2022 — Таблица — 375 просмотров

Подключаемый модуль JavaScript, который создает многофункциональную таблицу данных, которая поддерживает любой тип данных, например статическую таблицу HTML, массивы JS, объекты JS и данные Ajax JSON.

ДемоСкачать

09.07.2022 — Таблица — 70857 просмотров

handsontable — это мощная, гибкая, многофункциональная, похожая на Excel библиотека сеток/таблиц данных CRUD для JavaScript, Angular, React и Vue.js.

ДемоСкачать

24.06.2022 — Таблица — 382 просмотров

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

ДемоСкачать

20. 06.2022 — Таблица — 172 просмотров

Плагин jQuery, предоставляющий несколько API для простого преобразования чисел в HTML-таблицу.

ДемоСкачать

18.05.2022 — Таблица — 1739 просмотров

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

ДемоСкачать

26.04.2022 — Таблица — 331 просмотров

Легкий, но мощный подключаемый модуль jQuery JSON to Table, который быстро создает HTML-таблицы из предоставленных вами массивов JSON или объектов JSON.

ДемоСкачать

21. 04.2022 — Таблица — 4667 просмотров

Плагин jQuery, упрощающий экспорт таблиц в форматы JSON, XML, CSV, TSV, TXT, SQL, DOC, XLS, XLSX, PNG или PDF.

ДемоСкачать

24.01.2022 — Таблица — 48763 просмотров

Мощный плагин jQuery и Vanilla JavaScript, который позволяет динамически создавать электронные таблицы, такие как сетка данных CRUD (таблица), из локальных данных JS или даже файлов JSON, CSV, XSLX.

ДемоСкачать

05.01.2022 — Таблица — 2383 просмотров

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

ДемоСкачать

06. 11.2021 — Таблица — 49074 просмотров

Еще один конвертер таблиц на основе jQuery в CSV, который экспортирует вашу html-таблицу в загружаемый файл CSV.

ДемоСкачать

09.09.2021 — Таблица — 2928 просмотров

Подключаемый модуль jQuery, который включает флажок «Отметить все», чтобы выбрать все указанные строки в таблице HTML.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• Следующий
• Последний

Создайте HTML-таблицу с помощью jQuery – stats.seandolinar.com

Для проекта, над которым я работал, мне нужно было быстрое и простое решение для создания динамической таблицы на основе данных, отправленных обратно из вызова AJAX. Я использовал jQuery для создания таблицы HTML и управления ею, так как использовать jQuery было быстро, и он уже есть в моем проекте.

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

переменные данные = {
    k: ['Имя', 'Род занятий', 'Зарплата', 'Сосед по комнате'],
    v: [['Чендлер', 'Менеджер по закупкам ИТ', '120 000 долларов', 'Джоуи'],
        ['Джоуи', 'Безработный актер', '50 000 долларов', 'Чендлер'],
        ['Моника', 'Шеф', '80 000 долларов', 'Рэйчел'],
        ['Рэйчел', 'Помощник покупателя', '70 000 долларов', 'Моника'],
        ['Росс', 'Динозавры', '100 000 долларов', 'Нет соседа по комнате']]
}
 

Это объект JavaScript с двумя ключами: один для заголовка, который я сократил k , и основные значения данных, которые имеют ключ v . Заголовок — это просто массив строк, а значения — это массив массивов. Я специально разработал этот код для работы с этими параметрами, поэтому может быть встроено больше проверок, но источник данных довольно жесткий.

Чтобы создать класс Table , я определил атрибуты:

Таблица функций () {
    //устанавливает атрибуты
    this.header = [];
    это.данные = [[]];
    this.tableClass = ''
}
 

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

У меня есть три метода установки, которые просто позволяют объекту Table устанавливать свои атрибуты и иметь набор данных.

Table.prototype.setHeader = функция (ключи) {
    //устанавливает данные заголовка
    this.header = ключи
    вернуть это
}

Table.prototype.setData = функция (данные) {
    //устанавливаем основные данные
    это.данные = данные
    вернуть это
}

Table.prototype.setTableClass = функция (tableClass) {
    //задаем имя класса таблицы
    this.tableClass = класс таблицы
    вернуть это
}
 

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

Table.prototype.build = функция (контейнер) {

    //селектор по умолчанию
    контейнер = контейнер || '.table-контейнер'
 
    //создает таблицу
    таблица переменных = $('

‘).addClass(this.tableClass) var tr = $(‘

‘) //создает строку var th = $(‘

‘).append(заголовок)) //создает var tbody = $(‘

‘) //заполняет тело таблицы this. data.forEach (функция (d) { var row = tr.clone() // создает строку d.forEach (функция (e, j) { row.append(td.clone().text(e)) // заполняет строку }) tbody.append(row) //помещает строку в tbody }) $(container).append(table.append(tbody)) //помещает всю таблицу в контейнер вернуть это }

Я аннотировал большую часть кода, но в основном это создает объекты jQuery для каждой части структуры таблицы: таблица ( таблица ), строка ( tr ), ячейка заголовка ( th ) и обычная ячейка таблицы ( td ). Метод clone() необходим для того, чтобы jQuery создал еще один элемент HTML. В противном случае он будет продолжать удалять, изменять и добавлять один и тот же элемент.

Использовать только что созданный прототип довольно просто, мы уже сделали сложную часть. Мы используем ключевое слово new для создания экземпляра нового объекта. Это позволяет нам создавать множество различных независимых Таблица объектов, которыми можно манипулировать индивидуально в приложении.

//создает новый объект таблицы
таблица переменных = новая таблица ()
    
//устанавливает данные таблицы и строит ее
стол
    .setHeader(данные.k)
    .setData(данные.v)
    .setTableClass («Шон»)
    .строить()
 

Выше приведен короткий фрагмент кода с цепочкой методов. Это позволяет нам не писать отдельные строки кода для каждого метода, который выглядел бы как таблица.setData() . Я использовал setHeader() для установки массива ( data.k ), который заполняет заголовок таблицы. Метод setData() устанавливает массив массива ( data.v ) в качестве источника данных для остальной части таблицы.

Наконец, метод build() использует данные, которые мы только что установили, для фактического запуска кода, который манипулирует HTML, и это то, что вы видите в своем веб-браузере.

Прежде чем использовать его на веб-странице, должен быть HTML. (И немного CSS, чтобы таблица выглядела прилично. ) Самое главное, что div контейнер имеет класс "стол-контейнер" . Класс Table по умолчанию ищет этот класс для добавления таблицы. Вы можете настроить это, изменив строку выбора jQuery в качестве параметра в методе table.build([строка выбора jQuery]) .

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

Лучшие плагины для таблиц jQuery, которые стоит попробовать

Для отображения данных на веб-страницах веб-разработчики в основном используют div вместо HTML-таблиц. Цель состоит в том, чтобы предложить конечному пользователю лучший опыт.

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

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

Взгляните на них!

Плагины Neat jQuery Table

Freezeheader, как следует из названия, замораживает строку заголовка в стандартной HTML-таблице. Это простой плагин jQuery, также известный как таблица фиксированных заголовков.

jQueryTabledit — встроенный редактор HTML-таблиц, совместимый с Bootstrap. Вы можете редактировать данные как в электронной таблице, так и с помощью кнопок для переключения между режимами редактирования и просмотра.

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

WaTable — это настраиваемый плагин для таблиц jQuery. Он предлагает варианты сортировки, разбивки по страницам и фильтрации.

Хотите создать таблицы данных в WordPress?

wpDataTables может сделать это за вас. Есть веская причина, по которой это плагин WordPress №1 для создания адаптивных таблиц и диаграмм.

И очень легко сделать что-то вроде этого:

1. Вы предоставляете данные таблицы
2. Настроить и настроить
3. Опубликовать в посте или на странице

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

«Да, но я просто слишком люблю Excel, а на сайтах ничего подобного нет». Да, есть. Вы можете использовать условное форматирование, как в Excel или Google Sheets.

Я говорил вам, что вы тоже можете создавать диаграммы с вашими данными? И это только малая часть. Есть много других функций для вас.

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

Datatable — это плагин таблицы данных. Он используется для разбиения на страницы таблиц jQuery, фильтрации и загрузки AJAX.

Это очень легкий плагин с богатым набором функций. Он отображает данные в табличном формате. Он также предлагает богатую поддержку для радио, флажков, сортировки таблиц Bootstrap, разбиения на страницы и т. д. SQL, MS Word, MS Excel, MS Powerpoint или PDF.

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

Это легкий плагин jQuery, который заполняет пробел, когда поле ввода по умолчанию для таблиц данных отсутствует. Редактируемая таблица jQuery может использоваться как в соревнованиях AJAX, так и/или HTTP POST. Это также позволяет вам предварительно установить заголовок и количество столбцов. Также есть возможность дать пользователю полную свободу.

Dynatable является семантическим, интерактивным и интересным в использовании. Он также использует HTML5 и JSON. Он предоставляет простой расширяемый API. Это особенно полезно для больших наборов данных, поскольку облегчает просмотр и взаимодействие.

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

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

jQuery Table Sorter

jQuery Table Sorter также является альтернативой DataTables. Этот плагин jQuery создает HTML-таблицы и добавляет в них элементы THEAD и TBODY. Это позволяет сортировать таблицы без необходимости постоянного обновления страницы.

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

Также этот плагин показывает отличную совместимость с разными браузерами. Среди прочего, он работает с Internet Explorer 6.0+, Firefox 2+, Opera 9.0+ и Safari 2.0+. Он предлагает расширяемость через систему виджетов.

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

Это полезный плагин для создания таблиц jQuery, удобных для мобильных устройств.

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

StupidTable — плагин для сортировки таблиц. Он до абсурда легкий и до глупости простой. Важно только то, что вы понимаете основы сортировки таблиц JavaScript. При этом вы можете полностью контролировать этот плагин таблицы jQuery. Заставьте его делать столько или меньше, как вы хотите!

Другой плагин для таблиц — Stacktable.js. Это плагин для выравнивания высоты и/или ширины элементов таблицы jQuery. Подключаемый модуль jQuery предоставляет простой способ преобразования широких таблиц jQuery в формат, более подходящий для небольших экранов. Он создаст копию таблицы и преобразует ее в формат ключа/значения с двумя столбцами.

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

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

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

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

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

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

Табулятор — еще одна запись в нашей статье о плагинах таблиц jQuery. Его можно использовать для динамического создания интерактивных и расширяемых таблиц. Они могут быть из HTML, массива JavaScript, источника данных AJAX или данных JSON.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вам понравилась эта статья о плагинах для таблиц jQuery, вы должны прочитать эту о таблицах Bootstrap.

Мы также писали о нескольких связанных темах, таких как таблицы CSS, адаптивные таблицы с CSS, таблицы HTML, как центрировать таблицу с помощью CSS, цвет фона таблицы, плагины таблиц цен WordPress и примеры таблиц данных.

Опции таблицы · Таблица начальной загрузки

Посмотреть на GitHub

API параметров таблицы Bootstrap Table.

Параметры таблицы определены в jQuery.fn.bootstrapTable.defaults .

—

аякс

ajaxOptions

• Атрибут: данные-ajax-параметры

• Тип: Объект

• Деталь:

  Дополнительные параметры отправки запроса ajax. Список значений: jQuery.ajax.

• По умолчанию: {}

• Пример: Опции AJAX

кнопки

• Атрибут: кнопки данных

• Тип: Функция

• Деталь:

  Этот параметр позволяет создавать/добавлять пользовательские кнопки на «панель кнопок» (справа вверху таблицы). Эти кнопки можно отсортировать с помощью опции таблицы buttonsOrder, для этого следует использовать используемый ключ/имя для события!

  Настраиваемая кнопка имеет широкие возможности настройки, существуют следующие параметры:

  • текст
    • Описание: Этот параметр используется для параметра таблицы showButtonText.
    • Тип: Строка
  • значок
    • Описание: Этот параметр используется для параметра таблицы showButtonIcons.
    • Тип: Строка — Требуется только класс значков, например. fa-пользователи
  • визуализация
    • Описание: Установите для этого параметра значение false , чтобы скрыть кнопку по умолчанию. Кнопка снова станет видимой при добавлении атрибута данных data-show-BUTTONNAME="true" .
  • атрибуты
    • Описание: Эта опция позволяет добавлять дополнительные атрибуты html, например. название
    • Тип: Объект
    • Пример: {название: 'Название кнопки'}
  • HTML
    • Описание: Если вы не хотите автоматически генерировать HTML-код, вы можете использовать эту опцию, чтобы вставить свой собственный HTML-код. Опция event работает только в том случае, если ваш пользовательский HTML содержит name="BUTTONNAME" . Если используется этот параметр, следующие параметры будут игнорироваться:
      • текст
      • значок
      • атрибуты
    • Тип: Функция|Строка
  • событие
    • Описание: Следует использовать, если вы хотите добавить событие к кнопке
    • Тип: Функция|Объект|Строка

  Параметр event можно настроить тремя способами. Одно событие с клик событие:

   {
     'событие': () => { }
   }
   

  Одно событие с самоопределяемым типом события:

   {
       'мероприятие': {
         'мышиный ввод': () => { }
       }
     }
   

  Несколько событий с самоопределяемыми типами событий:

   {
         'мероприятие': {
           'клик': () => {},
           'mouseenter': () => { },
           'mouseleave': () => { }
         }
       }
   

  Подсказка: Вместо встроенных функций вы также можете использовать имена функций.

  Сконфигурированная пользовательская кнопка может выглядеть так:

   {
    btnRemoveEvenRows: {
      'текст': 'Удалить четные строки',
      'значок': 'фа-мусор',
      'событие': () => {
        //ДЕЙСТВУЙТЕ, ЧТОБЫ УДАЛИТЬ ЧЕТНЫЕ СТРОКИ
      },
      'атрибуты': {
        'title': 'Удалить все строки с четным идентификатором'
      }
    }
  }
   

• По умолчанию: {}

• Пример: Кнопки

кнопкиВыровнять

• Атрибут: выравнивание кнопок данных

• Тип: Строка

• Деталь:

  Укажите, как выровнять кнопки панели инструментов. «левый» , «правый» можно использовать.

• По умолчанию: «право»

• Пример: Выравнивание кнопок

кнопкиКласс

• Атрибут: кнопки данных-класс

• Тип: Строка

• Деталь:

  Определяет класс (добавлен после 'btn-' ) кнопок таблицы.

• По умолчанию: «вторичный»

• Пример: Кнопки Класс

кнопкиЗаказать

• Атрибут: данные-кнопки-заказ

• Тип: Массив

• Деталь:

  Укажите, как заказать кнопки панели инструментов.

• По умолчанию: ['paginationSwitch', 'обновить', 'переключить', 'полноэкранный режим', 'столбцы']

• Пример: Кнопки Заказ

кнопкиПрефикс

• Атрибут: кнопки данных префикс

• Тип: Строка

• Деталь:

  Определяет префикс кнопок таблицы.

• По умолчанию: 'кнопка'

• Пример: Префикс кнопок

кнопкиПанель инструментов

• Атрибут: кнопки данных-панель инструментов

• Тип: Строка/узел

• Деталь:

  Селектор jQuery, указывающий панель инструментов с пользовательскими кнопками, например: #buttons-toolbar , .buttons-toolbar или узел DOM.

• По умолчанию: не определено

• Пример: Панель инструментов кнопок

кэш

• Атрибут: кэш данных

• Тип: Логический

• Деталь:

  Установите false , чтобы отключить кэширование запросов AJAX.

• По умолчанию: правда

• Пример: Табличный кэш

картаВид

• Атрибут: просмотр карты данных

• Тип: Логический

• Деталь:

  Установите true , чтобы отображалась таблица просмотра карточек, например, мобильное представление.

• По умолчанию: ложь

• Пример: Просмотр карты

• Атрибут: data-checkbox-header

• Тип: Логический

• Деталь:

  Установите false , чтобы скрыть флажок «Отметить все» в строке заголовка.

• По умолчанию: правда

• Пример: Заголовок флажка

классы

• Атрибут: классы данных

• Тип: Строка

• Деталь:

  Имя класса таблицы. 'таблица' , 'таблица с рамкой' , 'table-hover' , 'table-striped' , 'table-dark' , 'table-sm' и 'table-borderless' . По умолчанию таблица имеет рамку.

• По умолчанию: 'таблица с границей таблицы при наведении курсора'

• Пример: Классы таблиц

нажмите, чтобы выбрать

• Атрибут: данные-щелчок-выбор

• Тип: Логический

• Деталь:

  Установите true , чтобы установить флажок или переключатель при выборе строк.

• По умолчанию: ложь

• Пример: Нажмите, чтобы выбрать

столбцы

тип контента

• Атрибут: тип содержимого данных

• Тип: Строка

• Деталь:

  ContentType запроса удаленных данных, например: application/x-www-form-urlencoded .

• По умолчанию: 'приложение/json'

• Пример: Тип содержимого

пользовательский поиск

• Атрибут: пользовательский поиск данных

• Тип: Функция

• Деталь:

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

  • данные : данные таблицы.
  • текст : текст поиска.
  • filter : объект фильтра из метода filterBy .

  Пример использования:

 функция customSearch(данные, текст) {
    вернуть data.filter (функция (строка) {
      вернуть row.field.indexOf (текст) > -1
    })
  }
   

индивидуальная сортировка

• Атрибут: индивидуальная сортировка данных

• Тип: Функция

• Деталь:

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

  • sortName : имя сортировки.
  • sortOrder : порядок сортировки.
  • данные : данные строк.

• По умолчанию: не определено

• Пример: Индивидуальный заказ

данные

• Атрибут: данные-данные

• Тип: Массив | Объект

• Деталь:

  Данные для загрузки.

  Если в данных есть свойство __rowspan или __colspan , то ячейки объединятся автоматически, например:

   $table.bootstrapTable({
    данные: [
      {
        идентификатор: 1,
        имя: «Элемент 1»,
        _name_rowspan: 2,
        цена: '$1'
      },
      {
        идентификатор: 2,
        цена: $2
      }
    ]
  })
   

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

• По умолчанию: []

• Пример: Из данных

поле данных

• Атрибут: поле данных

• Тип: Строка

• Деталь:

  Ключ во входящем JSON, содержащем «строк» ​​ списка данных.

• По умолчанию: «строки»

• Пример: Итого/поле данных

тип данных

детальФильтр

• Атрибут: фильтр сведений о данных

• Тип: Функция

• Деталь:

  Включить расширение для каждой строки, если для параметра detailView задано значение true . Верните true, и строка будет включена для расширения, верните false, и расширение для строки будет отключено. Функция по умолчанию возвращает значение true, чтобы разрешить расширение для всех строк.

• По умолчанию: функция (индекс, строка) { вернуть true }

• Пример: Подробный фильтр

DetailFormatter

• Атрибут: форматирование данных

• Тип: Функция

• Деталь:

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

• По умолчанию: функция (индекс, строка, элемент) { return '' }

• Пример: Детальный вид

DetailView

• Атрибут: подробное представление данных

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить подробную таблицу просмотра. Вы можете установить uniqueId Параметр для сохранения состояния подробного представления при обновлении таблицы.

• По умолчанию: ложь

• Пример: Подробный вид UniqueId

DetailViewAlign

• Атрибут: data-detail-view-align

• Тип: Строка

• Деталь:

  Укажите, как выровнять значок подробного вида. «левый» , «правый» можно использовать.

• По умолчанию: «левый»

• Пример: Детальный вид Выравнивание

DetailViewByClick

• Атрибут: данные-подробности-просмотр по клику

• Тип: Логический

• Деталь:

  Установите true , чтобы переключить представление подробностей при щелчке по ячейке.

• По умолчанию: ложь

• Пример: Значок подробного просмотра

DetailViewIcon

• Атрибут: data-detail-view-icon

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить столбец подробного представления (значок плюс/минус).

• По умолчанию: правда

• Пример: Значок подробного просмотра

побег

• Атрибут: экранирование данных

• Тип: Логический

• Деталь:

  Экранирует строку для вставки в HTML, заменяя символы &, <, >, “, ` и ‘.

• По умолчанию: ложь

• Пример: Выход из таблицы

Опции фильтра

• Атрибут: параметры фильтрации данных

• Тип: Логический

• Деталь:

  Определить параметры фильтра алгоритма по умолчанию, filterAlgorithm: 'и' означает, что все указанные фильтры должны совпадать, filterAlgorithm: 'или' означает, что один из заданных фильтров должен совпадать.

• По умолчанию: {Алгоритм фильтрации: 'и'}

• Пример: Параметры фильтра

• Атрибут: поле данных нижнего колонтитула

• Тип: Строка

• Деталь:

  Определяет ключ объекта нижнего колонтитула (из массива данных или ответа сервера JSON). Объект нижнего колонтитула можно использовать для установки/определения столбцов нижнего колонтитула и/или значения нижнего колонтитула. срабатывает только когда разбивка на страницы данных — это true , а разбивка на страницы на стороне данных — это server .

 {
      "ряды": [
        {
          "идентификатор": 0,
          "имя": "Элемент 0",
          "цена": "$0",
          "количество": 3
        }
      ],
      "нижний колонтитул": {
        "id": "идентификатор нижнего колонтитула",
        "_id_colspan": 2,
        "name": "имя нижнего колонтитула"
      }
    }
     

• Атрибут: стиль нижнего колонтитула данных

• Тип: Функция

• Деталь:

  Функция форматирования стиля нижнего колонтитула принимает один параметр:

  • столбец : объект столбца.

  Поддержка классов или css . Пример использования:

 функция нижний колонтитул (столбец) {
    возвращаться {
      css: { 'шрифт': 'нормальный' },
      классы: 'мой-класс'
    }
  }
   

• Атрибут: стиль заголовка данных

• Тип: Функция

• Деталь:

  Функция форматирования стиля заголовка принимает один параметр:

  • столбец : объект столбца.

  Поддержка классов или css . Пример использования:

 стиль заголовка функции (столбец) {
    возвращаться {
      css: { 'шрифт': 'нормальный' },
      классы: 'мой-класс'
    }
  }
   

высота

• Атрибут: высота данных

• Тип: Номер

• Деталь:

  Высота таблицы, включает фиксированный заголовок таблицы.

• По умолчанию: не определено

• Пример: Высота стола

иконки

• Атрибут: значки данных

• Тип: Объект

• Деталь:

  Определяет значки, используемые на панели инструментов, в разбиении на страницы и в представлении сведений.

• По умолчанию:

 {
    paginationSwitchDown: 'fa-caret-square-down',
    paginationSwitchUp: 'fa-caret-square-up',
    обновление: 'fa-sync',
    toggleOff: 'fa-toggle-off',
    toggleOn: 'fa-toggle-on',
    столбцы: 'fa-th-list',
    полноэкранный режим: 'fa-стрелки-alt',
    DetailOpen: 'fa-plus',
    DetailClose: 'фа-минус'
  }
   

• Пример: Табличные значки

Размер значка

• Атрибут: размер значка данных

• Тип: Строка

• Деталь:

  Определяет размер значка, undefined , 'lg' , 'sm' можно использовать.

• По умолчанию: не определено

• Пример: Размер значка

iconsPrefix

• Атрибут: data-icons-prefix

• Тип: Строка

• Деталь:

  Определяет имя набора значков ( 'glyphicon' или 'fa' для FontAwesome). По умолчанию для Bootstrap v4 используется 'fa' .

• По умолчанию: «фа»

• Пример: Префикс значков

  idField

• Атрибут: поле идентификатора данных

• Тип: Строка

• Деталь:

  Укажите, какое поле будет использоваться в качестве значения флажка/переключателя, его аналог для selectItemName.

• По умолчанию: не определено

• Пример: Поле идентификатора

ignoreClickToSelectOn

• Атрибут: данные-игнорировать-щелкнуть-для-выбора-на

• Тип: Функция

• Деталь:

  Включить игнорирование элементов clickToSelect . Принимает один параметр:

  • элемент : элемент, на который нажали.

  Возвращает true, если щелчок следует игнорировать, и false, если щелчок должен привести к выбору строки. Этот параметр актуален, только если clickToSelect имеет значение true.

• По умолчанию: { return ['A', 'BUTTON'].includes(tagName)}

• Пример: Игнорировать Щелкните для выбора

загрузкаРазмер шрифта

• Атрибут: размер шрифта загрузки данных

• Тип: Строка

• Деталь:

  Чтобы определить размер шрифта загружаемого текста, по умолчанию используется значение 'auto' , вычисляемое автоматически в соответствии с шириной таблицы, между 12 и 32 пикселями.

• По умолчанию: «авто»

• Пример: Загрузка размера шрифта

загрузка шаблона

локаль

• Атрибут: локаль данных

• Тип: Строка

• Деталь:

  Устанавливает используемую локаль (например, 'zh-CN' ). Файлы локали должны быть предварительно загружены. Позволяет использовать резервные локали, если они загружены, в следующем порядке:

  • Первые попытки для локали, как указано,
  • Затем пробует языковой стандарт с «_», переведенным на «-», и кодом региона в верхнем регистре,
  • Затем пробует короткий код локали (например, 'zh' вместо 'zh-CN' ),
  • И, наконец, будет использоваться последний загруженный файл локали (или локаль по умолчанию, если локали не загружены).

  Если оставлено неопределенное или пустая строка, используйте последнюю загруженную локаль (или 'en-US' , если файлы локали не загружены).

• По умолчанию: не определено

• Пример: Языковой стандарт таблицы

поддерживать метаданные

• Атрибут: данные-обслуживание-мета-данные

• Тип: Логический

• Деталь:

  Установите true , чтобы сохранить следующие метаданные на странице изменений и поиске:

  • выбранные строки
  • скрытые строки

• По умолчанию: ложь

• Пример: Поддерживать метаданные

метод

• Атрибут: метод данных

• Тип: Строка

• Деталь:

  Тип метода для запроса удаленных данных.

• По умолчанию: «получить»

• Пример: Табличный метод

минимумКолонкс

• Атрибут: минимальное количество столбцов данных

• Тип: Номер

• Деталь:

  Минимальное количество столбцов, которые нужно скрыть из раскрывающегося списка столбцов.

• По умолчанию: 1

• Пример: Минимальное количество столбцов

множественный SelectRow

• Атрибут: данные-множественный-выбор-строки

• Тип: Логический

• Деталь:

  Установите true , чтобы включить множественный выбор строки. Можно использовать Ctrl + щелчок, чтобы выбрать одну строку или Shift + щелчок, чтобы выбрать диапазон строк.

• По умолчанию: ложь

• Пример: Множественный выбор строки

Список страниц

• Атрибут: список страниц данных

• Тип: Массив

• Деталь:

  При настройке свойства нумерации страниц инициализируйте размер страницы, выбрав список. Если вы включите опцию «все» или «неограниченно» , все записи будут показаны в вашей таблице.

  Подсказка: если в таблице есть меньшие строки в качестве параметров, параметры будут скрыты автоматически. Чтобы отключить эту функцию, вы можете установить SmartDisplay на ложь

• По умолчанию: [10, 25, 50, 100]

• Пример: Список страниц

номер страницы

• Атрибут: номер страницы данных

• Тип: Номер

• Деталь:

  При установке свойства нумерации страниц инициализируйте номер страницы.

• По умолчанию: 1

• Пример: Номер страницы

Размер страницы

• Атрибут: размер страницы данных

• Тип: Номер

• Деталь:

  При настройке свойства нумерации страниц инициализируйте размер страницы.

• По умолчанию: 10

• Пример: Размер страницы

• Атрибут: разбиение на страницы

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить панель инструментов разбиения на страницы в нижней части таблицы.

• По умолчанию: ложь

• Пример: Пагинация таблицы

пагинацияDetailHAalign

• Атрибут: data-pagination-detail-h-align

• Тип: Строка

• Деталь:

  Укажите, как выровнять детали разбиения на страницы. 'левый' , "правильно" можно использовать.

• По умолчанию: «левый»

• Пример: Разбиение на страницы по горизонтали

• Атрибут: data-pagination-h-align

• Тип: Строка

• Деталь:

  Укажите способ выравнивания нумерации страниц. 9Можно использовать 0049 «левый» , «правый» .

• По умолчанию: «право»

• Пример: Разбиение на страницы по горизонтали

• Атрибут: цикл разбивки на страницы

• Тип: Логический

• Деталь:

  Установить верно , чтобы включить режим непрерывного цикла разбиения на страницы.

• По умолчанию: правда

• Пример: Цикл пагинации

• Атрибут: data-pagination-next-text

• Тип: Строка

• Деталь:

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

• По умолчанию: '›'

• Пример: Текст страницы

пагинацияPagesBySide

• Атрибут: разбиение на страницы данных рядом

• Тип: Номер

• Деталь:

  Количество страниц с каждой стороны (справа, слева) от текущей страницы.

• По умолчанию: 1

• Пример: Номер индекса страницы

• Атрибут: части данных-разбиения на страницы

• Тип: Массив

• Деталь:

  Эти параметры определяют, какие части разбиения на страницы должны быть видны.

  • pageInfo Показывает, какой набор данных будет отображаться на текущей странице (например, Отображение с 1 по 10 из 54 строк ).
  • pageInfoShort Подобно pageInfo , показывает только количество строк в таблице (например, Показывает 54 строки ).
  • pageSize Показывает раскрывающийся список, определяющий, сколько строк должно отображаться на странице.
  • pageList Показывает основную часть пагинации (Список страниц).

• По умолчанию: ['pageInfo', 'pageSize', 'pageList']

• Пример: Части пагинации

• Атрибут: данные-разбивка на страницы-пре-текст

• Тип: Строка

• Деталь:

  Укажите значок или текст, отображаемый в деталях страницы, кнопку «Назад».

• По умолчанию: '‹'

• Пример: Текст страницы

• Атрибут: размер последовательных страниц данных

• Тип: Номер

• Деталь:

  Максимальное количество последовательных страниц подряд.

• По умолчанию: 5

• Пример: Номер индекса страницы

• Атрибут: промежуточное использование пейджинации данных

• Тип: Логический

• Деталь:

  Расчет и отображение промежуточных страниц для быстрого доступа.

• По умолчанию: ложь

• Пример: Номер индекса страницы

• Атрибут: data-pagination-v-align

• Тип: Строка

• Деталь:

  Укажите, как выравнивать страницы по вертикали. «верх» , «низ» , Можно использовать «оба» (поместить нумерацию страниц сверху и снизу).

• По умолчанию: «нижний»

• Пример: Пагинация по вертикали

параметры запроса

• Атрибут: параметры запроса данных

• Тип: Функция

• Деталь:

  При запросе удаленных данных можно отправить дополнительные параметры, изменив queryParams.

  Если queryParamsType = 'limit' , объект params содержит: limit , offset , search , sort , order .

  Кроме того, он содержит: pageSize , pageNumber , searchText , sortName , sortOrder .

  Возврат Ложь , чтобы остановить запрос.

• По умолчанию: функция (параметры) { возвращаемые параметры }

• Пример: Параметры запроса

ЗапросПарамсТип

• Атрибут: data-query-params-type

• Тип: Строка

• Деталь:

  Установите 'limit' для отправки параметров запроса с типом RESTFul.

• По умолчанию: «предел»

• Пример: Тип параметров запроса

Поиск регулярных выражений

• Атрибут: регулярное выражение-поиск данных

• Тип: Логический

• Деталь:

  Установите true , чтобы включить поиск регулярных выражений. Если эта опция включена, вы можете искать с помощью регулярных выражений, например. [47a] долларов США за все позиции, оканчивающиеся на 4 , 7 или a . Регулярное выражение можно ввести с флагами /[47a]$/gim или без флагов [47a]$ . Флаги по умолчанию: gim .

• По умолчанию: ложь

• Пример: Поиск регулярных выражений

запомнитьЗаказать

• Атрибут: порядок запоминания данных

• Тип: Логический

• Деталь:

  Установите true , чтобы запомнить порядок для каждого столбца.

• По умолчанию: ложь

• Пример: Помните о заказе

обработчик ответа

• Атрибут: обработчик данных-ответа

• Тип: Функция

• Деталь:

  Перед загрузкой удаленных данных обработайте формат данных ответа. Объект параметров содержит:

  • рез : данные ответа.
  • jqXHR : объект jqXHR, который является надмножеством объекта XMLHTTPRequest. Для получения дополнительной информации см. Тип jqXHR.

• По умолчанию: function(res) { return res }

• Пример: Обработчик ответа

атрибуты строки

• Атрибут: атрибуты строки данных

• Тип: Функция

• Деталь:

  Функция форматирования атрибута строки принимает два параметра:

  • строка : данные записи строки.
  • индекс : индекс строки.

  Поддержка всех пользовательских атрибутов.

• По умолчанию: {}

• Пример: Атрибуты строки

стиль строки

• Атрибут: стиль строки данных

• Тип: Функция

• Деталь:

  Функция форматирования строк, принимает два параметра:

  • строка : данные записи строки.
  • индекс : индекс строки.

  Классы поддержки или css.

• По умолчанию: {}

• Пример: Стиль строки

поиск

• Атрибут: поиск данных

• Тип: Логический

• Деталь:

  Включить ввод поиска.

  Существует три способа поиска:

  • Значение содержит поисковый запрос (по умолчанию). Пример: Github содержит git.
  • Значение должно совпадать с поисковым запросом. Пример: Github (значение) и Github (поисковый запрос).
  • Сравнения (<, >, <=, =<, >=, =>). Пример: 4 больше 3.

  Примечания:

  • Если вы хотите использовать пользовательский ввод для поиска, используйте searchSelector.
  • Вы также можете выполнять поиск по регулярному выражению, используя параметр regexSearch.

• По умолчанию: ложь

• Пример: Поиск по таблице

поискАкцентНейтрализовать

• Атрибут: поиск данных-акцент-нейтрализация

• Тип: Логический

• Деталь:

  Установите значение true , если вы хотите использовать функцию нейтрализации акцента.

• По умолчанию: ложь

• Пример: Акцент поиска Нейтрализовать

поискВыравнивание

• Атрибут: выравнивание поиска данных

• Тип: Строка

• Деталь:

  Укажите, как выровнять поисковый ввод. «левый» , «правый» можно использовать.

• По умолчанию: «право»

• Пример: Выравнивание поиска

поискПодсветка

• Атрибут: выделение-поиск данных

• Тип: Логический

• Деталь:

  Установите значение true , чтобы выделить искомый текст (используя HTML-тег ). Вы также можете определить собственный модуль форматирования выделения, например, для значений с HTML или для использования пользовательского цвета выделения.

• По умолчанию: «ложь»

• Пример: Подсветка поиска

searchOnEnterKey

• Атрибут: поиск данных по клавише ввода

• Тип: Логический

• Деталь:

  Метод поиска будет выполняться до тех пор, пока не будет нажата клавиша Enter.

• По умолчанию: ложь

• Пример: Поиск по клавише ввода

поискСелектор

• Атрибут: селектор поиска данных

• Тип: Булево значение|Строка

• Деталь:

  Если этот параметр установлен (должен быть допустимым селектором dom, например, #customSearch ), найденный элемент dom (элемент ввода ) будет использоваться в качестве поиска по таблице вместо встроенного ввода поиска.

• По умолчанию: ложь

• Пример: Селектор поиска

поисктекст

• Атрибут: текст поиска данных

• Тип: Строка

• Деталь:

  При настройке свойства поиска инициализируйте текст поиска.

• По умолчанию:

• Пример: Поиск текста

searchTimeOut

• Атрибут: тайм-аут поиска данных

• Тип: Номер

• Деталь:

  Установить тайм-аут для поиска огня.

• По умолчанию: 500

• Пример: Тайм-аут поиска

имя_выбора_элемента

• Атрибут: data-select-item-name

• Тип: Строка

• Деталь:

  Имя входа радио или флажка.

• По умолчанию: 'btSelectItem'

• Пример: Поле идентификатора

сервер Сортировка

• Атрибут: сортировка сервера данных

• Тип: Логический

• Деталь:

  Установите false для сортировки данных на стороне клиента, работает только тогда, когда sidePagination является server .

• По умолчанию: правда

• Пример: Сортировка по серверу

шоубуттониконс

• Атрибут: data-show-button-icons

• Тип: Логический

• Деталь:

  На всех кнопках будут отображаться значки.

• По умолчанию: правда

• Пример: показать значки кнопок

шоубуттонтекст

• Атрибут: data-show-button-text

• Тип: Логический

• Деталь:

  На всех кнопках будет отображаться текст.

• По умолчанию: ложь

• Пример: показать текст кнопки

шоуКолонкс

• Атрибут: данные-показать-столбцы

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить раскрывающийся список столбцов. Мы можем установить для параметра переключаемый столбец значение false , чтобы скрыть элемент столбца в раскрывающемся списке.

• По умолчанию: ложь

• Пример: Основные столбцы и большие столбцы

showColumnsSearch

• Атрибут: data-show-columns-search

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить поиск фильтра столбца.

• По умолчанию: ложь

• Пример: Поиск по столбцам

showColumnsToggleAll

• Атрибут: data-show-columns-toggle-all

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить флажок «Переключить все» в опции/раскрывающемся списке столбцов.

• По умолчанию: ложь

• Пример: Столбцы Переключить все

• Атрибут: data-show-extended-pagination

• Тип: Логический

• Деталь:

  Установите true , чтобы показать расширенную версию разбивки на страницы (включая количество всех строк без фильтров). Если вы используете нумерацию страниц на стороне сервера, используйте totalNotFilteredField для определения количества.

• По умолчанию: ложь

• Пример: Показать расширенную разбивку на страницы

• Атрибут: data-show-footer

• Тип: Логический

• Деталь:

  Установить верно , чтобы отобразить сводную строку нижнего колонтитула.

• По умолчанию: ложь

• Пример: Показать нижний колонтитул

показатьПолноэкранный

• Атрибут: data-show-fullscreen

• Тип: Логический

• Деталь:

  Установить верно , чтобы отобразить полноэкранную кнопку.

• По умолчанию: ложь

• Пример: Показать в полноэкранном режиме

• Атрибут: data-show-header

• Тип: Логический

• Деталь:

  Установите false , чтобы скрыть заголовок таблицы.

• По умолчанию: правда

• Пример: Показать заголовок

• Атрибут: data-show-pagination-switch

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить кнопку переключения страниц.

• По умолчанию: ложь

• Пример: Показать переключатель пагинации

показатьОбновить

• Атрибут: обновление данных

• Тип: Логический

• Деталь:

  Установите true , чтобы показать кнопку обновления.

• По умолчанию: ложь

• Пример: Показать обновление

showSearchButton

• Атрибут: кнопка поиска данных

• Тип: Логический

• Деталь:

  Установите true , чтобы показать кнопку поиска после ввода поиска. Поиск будет выполняться только в том случае, если кнопка нажата (например, для предотвращения пробок или времени загрузки).

• По умолчанию: ложь

• Пример: Показать кнопку поиска

showSearchClearButton

• Атрибут: данные-показать-поиск-кнопка очистки

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить кнопку очистки за вводом поиска, которая очистит ввод поиска (также весь фильтр из элемента управления фильтром (если включен)).

• По умолчанию: ложь

• Пример: Показать кнопку очистки поиска

показатьToggle

• Атрибут: data-show-toggle

• Тип: Логический

• Деталь:

  Установите true , чтобы отобразить кнопку-переключатель для переключения просмотра таблицы/карты.

• По умолчанию: ложь

• Пример: Показать переключатель

• Атрибут: разбиение на страницы на стороне данных

• Тип: Строка

• Деталь:

  Определяет боковую нумерацию страниц таблицы, может быть только 'клиент' или 'сервер' . Для использования стороны 'server' требуется установить параметр 'url' или 'ajax' .

  Обратите внимание, что требуемый формат ответа сервера зависит от того, установлен ли параметр 'sidePagination' на 'клиент' или 'сервер' . См. следующие примеры:

  • Без пагинации на стороне сервера
  • С нумерацией страниц на стороне сервера

• По умолчанию: «клиент»

• Пример: Разбиение на страницы на стороне клиента и на стороне сервера

молчаниеСортировка

• Атрибут: молчание сортировки данных

• Тип: Логический

• Деталь:

  Установите false , чтобы отсортировать данные с сообщением о загрузке. Этот параметр работает, когда для параметра sidePagination установлено значение 9.0049 ‘сервер’ .

• По умолчанию: правда

• Пример: Бесшумная сортировка

• Атрибут: одиночный выбор данных

• Тип: Логический

• Деталь:

  Установите true , чтобы разрешить выбор флажком только одной строки.

• По умолчанию: ложь

• Пример: Одиночный выбор

смарт-дисплей

• Атрибут: data-smart-display

• Тип: Логический

• Деталь:

  Установите true для интеллектуального отображения разбивки на страницы или карточек.

• По умолчанию: правда

• Пример: Интеллектуальный дисплей

сортируемый

• Атрибут: сортируемый по данным

• Тип: Логический

• Деталь:

  Установите false , чтобы отключить сортировку всех столбцов.

• По умолчанию: правда

• Пример: Сортируемая таблица

класс сортировки

sortEmptyLast

• Атрибут: данные-сортировка-пусто-последние

• Тип: Логический

• Деталь:

  Установить true для сортировки <пустая строка> , undefined и null в качестве последнего значения.

• По умолчанию: ложь

• Пример: Сортировать пустым последним

имясортировки

• Атрибут: имя сортировки данных

• Тип: Строка

• Деталь:

  Определяет, какой столбец будет отсортирован.

• По умолчанию: не определено

• Пример: Порядок сортировки имен

порядок сортировки

• Атрибут: порядок сортировки данных

• Тип: Строка

• Деталь:

  Определяет порядок сортировки столбцов, может быть только undefined , 'asc' или 'desc' .

• По умолчанию: не определено

• Пример: Порядок сортировки имен

сортировкаСброс

sortСтабильный

• Атрибут: стабильная сортировка данных

• Тип: Логический

• Деталь:

  Установите true , чтобы получить стабильную сортировку. Мы добавим в строку свойство '_position' .

• По умолчанию: ложь

• Пример: Стабильная сортировка

строгий поиск

• Атрибут: строгий поиск данных

• Тип: Логический

• Деталь:

  Включить строгий поиск. Отключает проверки сравнения.

• По умолчанию: ложь

• Пример: Строгий поиск

theadClasses

• Атрибут: классы головок данных

• Тип: Строка

• Деталь:

  Имя класса таблицы thead. Bootstrap v4, используйте классы модификаторов .thead-light или .thead-dark , чтобы сделать thead светло- или темно-серым.

• По умолчанию:

• Пример: Классы Thead

панель инструментов

• Атрибут: панель данных

• Тип: Строка/узел

• Деталь:

  Селектор jQuery, указывающий панель инструментов, например: #toolbar , . toolbar или узел DOM.

• По умолчанию: не определено

• Пример: Пользовательская панель инструментов

панель инструментовВыравнивание

• Атрибут: data-toolbar-align

• Тип: Строка

• Деталь:

  Укажите, как выровнять пользовательскую панель инструментов. «левый» , «правый» можно использовать.

• По умолчанию: «левый»

• Пример: Выравнивание панели инструментов

общее поле

• Атрибут: поле данных всего

• Тип: Строка

• Деталь:

  Ключ во входящем JSON, содержащем «всего» данных.

• По умолчанию: «всего»

• Пример: Итого/поле данных

ВсегоНефильтровано

всегоNotFilteredField

• Атрибут: общее количество нефильтрованных данных

• Тип: строка

• Деталь:

  Поле из ответа JSON будет использоваться для showExtendedPagination .

• По умолчанию: totalNotFiltered

• Пример: Всего не отфильтрованных полей

всего строк

обрезка при поиске

• Атрибут: обрезка данных при поиске

• Тип: Логический

• Деталь:

  Установить верно , чтобы обрезать пробелы в поле поиска.

• По умолчанию: правда

• Пример: Обрезка при поиске

undefinedText

• Атрибут: данные-неопределенный текст

• Тип: Строка

• Деталь:

  Определяет значение по умолчанию не определено текст.

• По умолчанию: '-'

• Пример: Неопределенный текст

уникальный идентификатор

• Атрибут: уникальный идентификатор данных

• Тип: Строка

• Деталь:

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

• По умолчанию: не определено

• Пример: getRowByUniqueId

адрес

• Атрибут: URL-адрес данных

• Тип: Строка

• Деталь:

  URL-адрес для запроса данных с удаленного сайта.

  Обратите внимание, что требуемый формат ответа сервера зависит от того, указана ли опция 'sidePagination' . См. следующие примеры:

  • Без пагинации на стороне сервера
  • С нумерацией страниц на стороне сервера

• По умолчанию: не определено

• Пример: С URL-адреса

• Обработка ошибок

  Чтобы получить ошибки загрузки, используйте onLoadError

• Атрибут: виртуальная прокрутка данных

• Тип: Логический

• Деталь:

  Установите true , чтобы включить виртуальную прокрутку для отображения виртуального «бесконечного» списка.

• По умолчанию: ложь

• Пример: Большие данные

• Атрибут: высота элемента виртуальной прокрутки данных

• Тип: Номер

• Деталь:

  Если этот параметр не определен, по умолчанию будет использоваться высота первого элемента.

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

• По умолчанию: не определено

видимыйПоиск

• Атрибут: видимый поиск данных

• Тип: Логический

• Деталь:

  Установите true для поиска только в видимом столбце/данных.