150+ лучших плагинов jQuery Table и jQuery Data Grid с демонстрационным примером
5 августа 2019 г. | Плагины, таблицы
fancyTable — это плагин jQuery для создания html-таблиц с возможностью поиска и сортировки с разбиением на страницы.
Подробнее Демонстрация
17 мая 2019 г. | Core Java Script, Responsive, Tables
FXB Grid — это удобный для мобильных устройств элемент управления сеткой javascript.
Особенности:
- Отображение и скрытие столбцов в зависимости от ширины контейнера
- Адаптивное изменение высоты строки в зависимости от размера шрифта
- Низкая загрузка процессора — продлите срок службы батареи
- Полная поддержка сенсорных устройств
- Специальные сенсорные жесты
Подробнее Демонстрация
24 апреля 2019 г. | Анимация, CSS2 / CSS3.0, Таблицы
Многоцелевая адаптивная таблица с анимированными сворачиваемыми столбцами и липкой головой, созданная с помощью CSS3, jQuery и TweenMax от GSAP.
Подробнее Демонстрация
8 марта 2019 г. | Основной сценарий Java, таблицы
Frappe DataTable — это простая, современная и интерактивная библиотека данных для отображения табличных данных. Первоначально созданный для ERPNext, он может использоваться для рендеринга большого количества строк без ущерба для производительности и имеет базовые функции сетки данных, такие как встроенное редактирование и навигация с помощью клавиатуры. Он не требует jQuery, как большинство сеток данных.
Подробнее Демонстрация
4 февраля 2019 г. | Core Java Script, Tables
x-spreadsheet — это электронная таблица на основе JavaScript (холст).
Подробнее Демонстрация
6 августа 2018 г. | Core Java Script, Tables
Легкая и простая таблица данных без зависимостей.
Особенности:
- Отображение данных (массив с объектами) в простой таблице
- Ленивая загрузка данных (вы можете загружать данные когда угодно)
- Поддержка пользовательских скинов
- Малый размер упаковки
- Нет зависимостей
- Поддержка пользовательских событий (обновление, добавление, удаление)
- Свободный API
- Распознавание данных во вводе и изменение типа ввода
Подробнее Демонстрация
2 июля 2018 г.
Toast UI Grid — мощный компонент для отображения и редактирования данных. Испытайте совершенный преобразователь данных!
Особенности:
- Пользовательский модуль форматирования и преобразования ячеек
- Различные типы ввода (флажок, радио, выбор, пароль и т. д.)
- Полная навигация с помощью клавиатуры (перемещение, выделение, копирование, вставка, удаление и т. д.)
- Виртуальная прокрутка (Обработка больших наборов данных без потери производительности)
- Копирование и вставка с помощью буфера обмена с помощью стороннего приложения
- Изменение размера и порядка столбцов, отображение и скрытие
- Заголовки нескольких столбцов
- Валидация
- Пагинация
- Объединение ячеек
Подробнее Демонстрация
15 мая 2018 г. | Основной сценарий Java, таблицы
Библиотека javascript, позволяющая прокручивать элементы по горизонтали с помощью значка указателя.
Подробнее Демонстрация
24 апреля 2018 г. | Plugins, Responsive, Tables
Удобное для мобильных устройств решение для таблиц, которое сохраняет заголовки для каждой ячейки таблицы на мобильных устройствах. На мобильных устройствах ориентация меняется с горизонтальной на вертикальную, и перед каждой ячейкой ставится соответствующий заголовок таблицы в качестве метки. .
Подробнее Демонстрация
16 апреля 2018 г. | Плагины, Таблицы
Dgtable — это табличное представление для jQuery, предназначенное для обеспечения высокой производительности и позволяющее пользователю взаимодействовать с пользовательским интерфейсом, например:
- Сортировка
- Сортировка более чем по одному столбцу
- Подвижные колонны
- Изменение размера столбцов
- Полный предварительный просмотр ячейки при наведении
- Встроенная поддержка RTL
Подробнее Демонстрация
jQuery Mobile Tables
« Предыдущая
Следующая глава »
Адаптивные таблицы
Адаптивный дизайн полезен, когда вы хотите, чтобы содержимое вашей мобильной веб-страницы
чтобы реагировать на устройство пользователя, например размер экрана и ориентацию.
Благодаря простому имени класса jQuery Mobile знает о доступном пользователю размер экрана и автоматически изменяет свой размер, чтобы отображать релевантный контент для этого конкретного пользователя.
Адаптивные таблицы позволяют нам отображать большой набор табличных данных, которые будут выглядеть привлекательно как для мобильных устройств, так и для настольных компьютеров.
Существует два типа адаптивных таблиц: перекомпоновка и переключение столбцов .
Таблица перекомпоновки
Режим перекомпоновки позиционирует данные таблицы горизонтально, пока не достигнет минимума размера, то все строки группируются по вертикали.
Создайте таблицу, добавьте data-role=»table» и класс «ui-responsive» к элементу
| Для корректной работы адаптивной таблицы необходимо включить и Элементы |
Таблица переключения столбцов
Режим «переключение столбцов» скроет столбцы, если ширины недостаточно для отображать данные.
Чтобы создать таблицу переключения столбцов, добавьте к элементу
| Я никогда не будет скрыт | I очень важно — меня, наверное, не скроют | Я менее важен — меня можно спрятать | Мне это не важно — есть хороший шанс, что меня скроют |
|---|
Если вы не укажете приоритет для столбца, столбец будет постоянным
и недоступны для сокрытия. |