Меню

Получение отображаемого диапазона из отфильтрованной таблицы

Работа с таблицами с использованием API JavaScript для Excel

В этой статье приведены примеры кода, в которых показано, как выполнять стандартные задачи для таблиц с использованием API JavaScript для Excel. Полный список свойств и методов, поддерживаемых объектами и объектами, см. в таблице Object Table TableCollection (API JavaScript для Excel) и TableCollection Object (API JavaScriptдля Excel).

Создание таблицы

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

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

Новая таблица

Новая таблица Excel.

Добавление строк в таблицу

В примере ниже показано, как добавить семь новых строк в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новые строки будут добавлены в конец таблицы. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Свойство объекта TableRow указывает номер индекса строки в коллекции строк index таблицы. Объект TableRow не содержит id свойства, которые можно использовать в качестве уникального ключа для идентификации строки.

Добавление строк в таблицу из надстройки контента приведет к утечке памяти. См. GitHub выпуск #1415 текущего состояния и дополнительные сведения.

Таблица с новыми строками

Таблица с новыми строками в Excel.

Добавление столбца в таблицу

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

Свойство index объекта TableColumn указывает номер индекса столбца в коллекции столбцов таблицы. Свойство id объекта TableColumn содержит уникальный ключ, идентифицирующий столбец.

Добавление столбца, содержащего статические значения

В примере кода ниже показано, как добавить новый столбец в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новый столбец будет добавлен после всех существующих столбцов в таблице. Он будет содержать заголовок Day of the Week (День недели), а также данные для заполнения ячеек в столбце. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Таблица с новым столбцом

Таблица с новым столбцом в Excel.

Добавление столбца, содержащего формулы

В примере кода ниже показано, как добавить новый столбец в таблицу ExpensesTable (Таблица расходов) на листе Sample (Пример). Новый столбец будет добавлен в конец таблицы, будет содержать заголовок Type of the Day (Тип дня), и в нем будет использована формула для заполнения каждой ячейки столбца. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Таблица с новым столбцом, содержащим вычисленные значения

Таблица с новым вычисляемой колонкой в Excel.

Resize a table

Надстройка может изменять объем таблицы без добавления данных в таблицу или изменения значений ячейки. Чтобы повторно использовать таблицу, используйте метод Table.resize. В следующем примере кода показано, как сделать таблицу повторной. В этом примере кода используется Раздел ExpensesTable из раздела Создание таблицы ранее в этой статье и задает новый диапазон таблицы A1:D20.

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

Таблица после повторного

Таблица с несколькими пустыми строками в Excel.

Изменение имени столбца

В примере кода ниже показано, как изменить имя первого столбца в таблице на Purchase date. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Таблица со столбцом с новым именем

Таблица с новым именем столбца в Excel.

Получение данных из таблицы

В примере кода ниже показано, как считать данные из таблицы ExpensesTable (Таблица расходов), размещенной на листе Sample (Пример), а затем отобразить эти данные под таблицей на том же листе.

Таблица и выведенные данные

Таблица данных в Excel.

Обнаружение изменений данных

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

Объект TableChangedEventArgs предоставляет сведения об изменениях и источнике. Так как событие onChanged возникает при изменении формата или значения данных, может быть полезно, чтобы надстройка проверяла, действительно ли значения изменились. Свойство details объединяет эти сведения в виде интерфейса ChangedEventDetail. В следующем примере кода показано, как отобразить значения и типы измененной ячейки до и после изменения.

Сортировка данных в таблице

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

Данные таблицы, отсортированные по столбцу Amount (Сумма) в порядке убывания

Отсортировали данные таблицы в Excel.

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

Применение фильтров к таблице

В примере кода ниже показано, как применить фильтры для столбцов Amount (Сумма) и Category (Категория) в таблице. В результате применения фильтров будут отображены только те строки, у которых в столбце Category (Категория) содержится одно из указанных значений, а значения в столбце Amount (Сумма) меньше среднего значения для всех строк.

Таблица данных, в которой применены фильтры для столбцов Category (Категория) и Amount (Сумма)

Данные таблицы фильтруются в Excel.

Удаление фильтров в таблице

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

Данные таблицы без фильтров

Данные таблицы не фильтруются в Excel.

Получение отображаемого диапазона из отфильтрованной таблицы

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

Автофильтр

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

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

Читайте также:  Болезнь Крона причины и проявления

Объект AutoFilter можно также применять к диапазону на уровне листа. Дополнительные сведения см. в статье Работа с листами с использованием API JavaScript для Excel.

Форматирование таблицы

В примере кода ниже показано, как применить форматирование к таблице. В примере показано, как указать различные цвета заливки для строки заголовков, основной части, второй строки и первого столбца таблицы. Сведения о свойствах, которые вы можете использовать для задания формата, см. в статье Объект RangeFormat (API JavaScript для Excel).

Таблица после применения форматирования

Таблица после форматирования применяется в Excel.

Преобразование диапазона в таблицу

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

Данные в диапазоне (перед его преобразованием в таблицу)

Данные в диапазоне Excel.

Данные в таблице (после преобразования диапазона в таблицу)

Данные в таблице Excel.

Импорт данных JSON в таблицу

В примере кода ниже показано, как создать таблицу на листе Sample (Пример), а затем заполнить ее с помощью объекта JSON, который определяет две строки данных. Если Excel, в котором работает код, поддерживает набор требований ExcelApi 1.2, то ширина столбцов и высота строк лучше всего соответствуют текущим данным в таблице.

Источник

15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц

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

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

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

D3.js – документы, ориентированные на данные

Сегодня, когда мы задумываемся о графиках, то первое, что приходит в голову – это D3.js Являясь open source проектом, D3.js, вне всякого сомнения, дарит много полезных возможностей, которых не хватает большинству существующих библиотек. Такие возможности как “Enter and Exit”, мощные переходы, и синтаксис, схожий с jQuery или Prototype, делают его одной из лучших JavaScript библиотек для создания графиков и диаграмм. В D3.js они генерируются посредством HTML, SVG и CSS.

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

D3.js не работает должным образом со старыми браузерами, такими как IE8. Но вы всегда можете применить такие плагины как aight plugin для кроссбраузерной совместимости.

D3.js ранее широко использовался на таких вебсайтах как NYTimes, Uber и Weather.com

Google Charts

Google Charts – JavaScript библиотека, которую я регулярно использую для простого и лёгкого создания графиков. Предоставляет множество предварительно созданных диаграмм, таких как комбинированные гистограммы, столбчатые диаграммы, календарные графики, секторные диаграммы, гео схемы, и др.

В Google charts также имеется множество конфигурационных настроек, которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

Вот замечательный список с примерами, построенными на Google charts.

ChartJS

ChartJS наделяет графики красивым плоским дизайном. Он использует HTML5 canvas для рендеринга. Поддержка для старых браузеров, таких как IE7/8, добавляется с помощью полифилла.

Графики ChartJS отзывчивы по умолчанию. Они отлично работают на мобильных устройствах и планшетах. Благодаря 6 основным разновидностям графиков прямо из коробки (core, столбчатый, кольцевой, лепестковый, линейчатый и полярный), ChartJS определённо является одной из наиболее впечатляющих open source библиотек для построения графиков и диаграмм, за последнее время.

Chartlist.js

Chartlist.js предоставляет красивые отзывчивые графики. Также как и ChartJS, Chartlist.js является результатом труда сообщества, которое разочаровалось в дорогих диаграммных библиотеках JavaScript. Он использует SVG для рендеринга графиков/схем. Может управляться и конфигурироваться посредством CSS3 media queries и Sass. Также, примите к сведению, что замечательная анимация, предоставляемая Chartlist.js, будет работать только в современных браузерах.

n3-charts

Если Вы – AngularJS разработчик, то n3-charts определённо вам покажется необычайно полезным и интересным. n3-charts создан поверх D3.js и AngularJS. Он предоставляет множество стандартных графиков в виде настраиваемых AngularJS директив.
Ознакомьтесь с перечнем графиков, созданных с помощью на n3-charts.

Ember Charts

EmberCharts – ещё один великолепный open source репозиторий, построенный на D3.js и Ember.js Предоставляет легко настраиваемые графики временного ряда, гистограммы, секторные диаграммы и диаграммы рассеяния. Использует SVG для рендеринга графиков.

Smoothie Charts

Если вы имеете дело с потоком данных в реальном времени, то вам может пригодиться Smoothie Charts. Для рендеринга графика здесь используется элемент HTML5 canvas. Это библиотека на чистом JavaScript, которая предоставляет такие опциональные возможности для графиков реального времени как задержка и вспышка цвета.

Chartkick

Chartkick – JavaScript библиотека для построения графиков/схем в Ruby приложениях. Предоставляет все основные типы диаграмм, такие как секторная, столбчатая, гистограмма, комбинированная гистограмма, гео, временная и диаграмма кратного ряда. Диаграммы генерируются через SVG.

MeteorCharts

Вы ещё не пробовали работать с Meteor v 1.0? Ладно, MeteorCharts поможет вам в создании красивых диаграмм для Meteor приложений. Для рендеринга графиков предоставляется возможность выбора любой из этих технологий: HTML5 canvas, WebGL, SVG и даже DOM.
Это замечательный генератор графиков, который позволяет вам выбрать его тип, тему, а затем выполнить генерацию. Бесплатен для использования в некоммерческих проектах. Подсчитать стоимость коммерческой лицензии можно здесь.

Highcharts JS

Highcharts JS – ещё одна весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту. Как и другие библиотеки, HighchartsJS содержит множество предварительно созданных диаграмм: сплайновых, фигурных, комбинированных, столбчатых, гистограмм, круговых, точечных и пр.

Одно из самых больших преимуществ применения HighchartsJS – совместимость со старыми браузерами, такими как Internet Explorer 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Хотя HighchartsJS и бесплатен для персонального использования, вам необходимо приобрести лицензию для коммерческого применения.

Fusioncharts

Fusioncharts – одна из наиболее старых JavaScript библиотек, которая была впервые выпущена в 2002 году. Графики генерируются посредством HTML5/SVG и VML для лучшей портируемости и совместимости.

Читайте также:  Русско польская война таблица дата событие итог

В отличие от множества библиотек, Fusioncharts предоставляет возможность парсинга как JSON данных, так и XML. Вы также можете экспортировать эти графики в 3 разных формата: PNG, JPG и PDF.

Fusioncharts хорошо совместим со старыми браузерами, такими как IE6. И по этой причине он стал одной из наиболее предпочитаемых библиотек во множестве торговых организаций.

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

Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы. Одна из старейших и наиболее популярных диаграммных библиотек.

Flot поддерживает линейчатые, точечные, гистограммы, столбчатые и любые комбинации из этих видов диаграмм. Также совместим со старыми браузерами, такими как IE 6 и Firefox 2.

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

amCharts

amCharts, несомненно, одна из наиболее красивых диаграммных библиотек. Она в полной мере разделилась на 3 независимых вида: JavaScript Charts, Maps Charts (amMaps) и Stock charts.

amMaps – мой любимый из этих трёх, что указаны выше. Предоставляет такие возможности, как теплокарты, рисование линий, добавление текста на карту, загрузка иконок или фотографий в верхнюю часть вашей карты, изменение масштаба и пр.
amCharts использует SVG для рендеринга графиков который работает только в современных браузерах. Графики могут не правильно отображаться в IE ниже 9й версии.

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

EJSChart

EJS Chart заявляют о своём практичном решении для предприятий. Графики выглядят аккуратней и читабельней чем большинство других из более старых библиотек. Также имеется совместимость с IE6+ и другими старыми браузерами. Ознакомьтесь с этим списком примеров.

EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями здесь.

uvCharts

uvCharts – JavaScript библиотека с открытым исходным кодом, заявляется о наличии более 100 конфигурационных опций. У неё имеются графики 12 различных стандартов прямо из коробки.

uvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.

Заключение

Теперь выбор наилучшей диаграммной библиотеки для своих будущих проектов остаётся только за вами. Разработчики, которым нужен полный контроль над графиками, определённо выберут D3.js Практически все вышеуказанные библиотеки обзавелись хорошей поддержкой на форумах Stackoverflow.

Если вы ищите инструменты для генерации уже готовых графиков, то перейдите к статье 5 Инструментов Для Создания Удивительных Онлайн Графиков. Вы также можете прочесть Создание Простых Линейных и Столбчатых Диаграмм с Помощью D3.js, для того чтобы начать знакомство с D3.js. Также у нас есть выпуски, посвящённые GoogleCharts с AngularJS.

Надеюсь вам понравилась эта статья. Хорошего дня.

Источник



Динамическая работа с таблицами

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

  1. создание;
  2. управление атрибутами;
  3. добавление/удаление столбцов и строк;
  4. перемещение строк;
  5. заполнение ячеек
  1. 1. создание таблицы
  2. 2. управление атрибутами
  3. 3. добавление/удаление столбцов и строк и 4. перемещение строк
  4. 5. заполнение ячеек
  5. дополнительно

1. создание таблицы

Для того, чтобы создать новую таблицу на странице нужно сгенерировать элемент TABLE (createElement()) и добавить его в иерархическую структуру документа с помощью метода appendChild():

2. управление атрибутами

Есть два способа присвоения атрибутов элементу: использование метода setAttribute()

и прямое обращение к свойствам объекта

Есть и более простой способ добавления в документ таблицы с определенными атрибутами:

3. добавление/удаление столбцов и строк и 4. перемещение строк

Для вставки строк используется метод insertRow(), ячеек — insertCell():

Для удаления строк используется метод deleteRow(), по своей конструкции аналогичный методу insertRow(), ячейки — deleteCell(). Для перемещения строк существует функция moveRow(индекс_источника, индекс_приёмника), но она пока работает только в IE (по крайней мере мне не удалось заставить ее работать в других браузерах).

Следующий пример работает только в IE:

удалить строку поднять строку опустить
1 удалить строку поднять строку опустить строку
2 удалить строку поднять строку опустить строку

5. заполнение ячеек

Заполнение ячеек возможно с помощью свойств innerHTML и innerTEXT (их отличия, думаю, понятны из названия):

дополнительно

Как перебрать в цикле все таблицы на странице:

Как перебрать в цикле все ячейки таблицы:

как закрасить строки таблицы через одну:

Спасибо, очень помогло! И про рекламу незабыл!

Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

Мде
А в файрфоксе moveRow не работает

хуйня этот файрфокс

Почему то не работает setAttribute(«bgcolor»,»#ff0000) для ячеек таблицы TD, созданных с помощью createElement(‘TD’) в Internet Explorer, вообще не могу никак там цвет сделать в таблице…. ( ФФ и ОПера все номрально.

Спасибо за сайт! Очень помог разобраться с форматированием таблиц. Незнаю, ошибка ли это, но вот тут ‘s’ в середине кода лишняя: var t = document.getElementsById(‘t1’); и еще, не разобравшись с: rows[i].className = «odd»; я выбрал способ: rows[i].style.background=»#DDDDFF»;

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

Спасибо! Реально очень ценная информация!

Интересная статейка, даже для меня, человека недавно начавшем изучать js, написано все предельно понятным языком. В общем спасибо!

Просто, кратко, доступно. Спасибо.

Огромное спасибо! Все очень четко и понятно. Давно хотел разобраться с построением таблиц, но хорошей статьи не попадалось. Еще раз спасибо.

Читайте также:  Рисунки и графические объекты в текстовых документах Word

Источник

Tabulator.js — строим интерактивную html-таблицу за 10 минут

Однажды на работе коллега-бекендщик подошел с вопросом. Есть get-запрос, который отдает json с массивом данных. Нужно по ним построить таблицу в браузере. Проект личный, таблица для внутреннего использования, красоты особой не нужно. Главное сделать минимальными усилиями.

Как бы поступил я, обычный jquery-программист? Получил бы данные через $.get, распарсил, прогнал массив через шаблонизатор, добавил стили. Работы на пару часов. Если нужна еще сортировка, пагинация и фильтрация, то больше.

Коллега поступил гораздо мудрее и загуглил готовые решения. ЗАГУГЛИЛ. Да, так можно было. И показал результат.

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

Итак, библиотека tabulator. Вот сайт — tabulator.info. Сайт по не-русски, но мышайтишники, разберемся. А если вам разбираться лениво, да и букв там много, то покажу на примере и картинках, как библиотека работает. Пойдем по тому же пути, что проделал коллега.

Есть у меня одна апишечка. Отдает json с массивом популярных статей в блоге. Хочу этот список показать. Для начала вот сама апишечка — https://cp.simpple.ru/api/v1/widgets/ratings/753bf174295992b3ca2d0bd4a78d6598/popular&limit=8. Откройте в браузере, убедитесь, что работает. Видите, там 4 поля: айдишник, заголовок статьи, количество проголосовавших и средняя оценка. Отобразим эту информацию в браузере.

Базовая таблица

Для начала подключим на странице одну css и две js, в том числе jquery — tabulator без нее не работает.

Можно скачать исходники с сайта либы, я же подключал с cdn, чтобы лишний раз файлы не таскать.

Затем в html поставим пустой див, где и отрисуем таблицу

И еще один js-файлик, где зададим настройки табулятора.

В файлике tabulator.js сначала пишем заготовку

В табуляторе можно напрямую указать url, куда сама либа будет ходить аяксом. Но у меня это не сработало, либа заругалась на кроссдоменные запросы. Поэтому пришлось добавить прослойку в виде $.get. Но не суть. Самое интересное внутри. Для инициализации беру код из доки. Только названия полей ставлю нужные

Настройки колонок понятные: заголовок, название поля field (совпадает с полем в json-массиве), ширина и выравнивание. И formatter — классная штука, вариантов форматирования много, я взял progress как в доке. Обновляем страницу и видим это Tabulator по умолчаниюКрасота! 10 строчек кода и море удовольствия: и таблица, и сортировки, и даже симпатичный прогрессбар. Без усилий мы сделали таблицу, которую врукопашную кодили бы пару часов.

Добавляем ссылки

Разбираемся дальше. Я хочу не просто показать заголовки статей, а дать ссылки на них. Настройка formatter может быть не только текстом или прогрессбаром. Но также и функцией, которая возвращает любые строки. Добавим в нашу таблицу новое скрытое поле id, а в существующем title напишем функцию formatter

Зачем лишнее поле id? Оно используется для формирования ссылки в другой колонке таблицы. Поэтому приходится id добавить, чтобы потом вытащить из объекта data = cell.getData(). Уберем колонку — и из data поле id пропадет. Обновляем страницу и смотрим на ссылки. Tabulator со ссылками

Идем дальше. А не добавить ли в таблицу пагинацию?

Пагинация

Это очень просто. В настройках сразу после layout: ‘fitColumns’ добавим еще 2 пункта.

И в апишном запросе изменим limit=8 на 30. Чтобы получить больше данных и сделать пагинацию интереснее. Вот что получилось Tabulator с пагинациейЧувствуете, как круто? Реализовывать пагинацию собственными лапками то еще удовольствие. Вот здесь мы уже делали Постраничная навигация по товарам в интернет-магазине. А в табуляторе это 2 строки.

Дальше вообще идет магия.

Дизайн

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

Смотрим Tabulator с bootstrapУже гораздо круче. Bootstrap4, все дела. И пагинация приличнее стала. Такой вариант уже не то что в админке держать, а и людям не стыдно показать.

И последнее, что сегодня замутим. Добавим кастомную колонку «Рейтинг статьи». По скриншотам Вы видели, что статьи сортируются по количеству голосов и средней оценке. Но статья, которой 3 человека поставили пятерку, ценнее статьи, которой четверо поставили трояк, согласны? 3 * 5 > 4 * 3. Арифметика. Поэтому введем самую полезную колонку таблицы Рейтинг = Количество голосов * Средняя оценка

Как работает formatter, мы уже знаем. Появилась еще новая функция sorter. Выглядит диковато, но на первый взгляд. Берем два сравниваемых значения (value = count * rating) и возвращаем их разницу. Кастомные сортировки работают по такому принципу, углубляться не будем.

Напоследок добавим еще пару штрихов:
1. tooltip: true в колонке с прогрессбаром. Чтобы при ховере показалось число голосов
2. initialSort: [< column: 'rating', dir: 'desc' >] — сразу после настроек пагинации, чтобы таблица по дефолту сортировалась по убыванию рейтинга. Сверху самые классные статьи.
И итоговый скрин Tabulator с кастомной колонкой

Живой пример

А теперь на фиг картинки, посмотрим, что получилось уже в действии. Там не скриншоты, все кликается, сортируется, ссылки активны.

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

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

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

Заключение

Куда такую таблицу можно прикрутить? Да навскидку:

1. Посещаемость статей
2. Список заказов в админке интернет-магазина
3. Список товаров в админке.
4. Логи или список событий. Здесь нужно будет запариться с серверной пагинацией, не все ж данные на клиент сразу тащить. Но это проще, чем целиком делать руками.
5. Здесь будет ваша фантазия

Источник