Разработка сайтов на UMI.CMS
Знать UMI.CMS в совершенстве невозможно.
Даже сами разработчики знают о ней не все...

UMi

Ursa Minor

Таблицы с сортировкой и фильтрацией

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

Разработчик http://javascripttoolbox.com/lib/table/index.php

Демо таблицы с сортировкой

 

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

В моем примере для таблицы задан id=pricetable и она обернута в див id="pricelist". Это  не важно для работы основного скрипта, но эти идентификаторы используются в моей пристройке к скрипту (так вытащено из работающего решения), о котором будет рассказано ниже.

У таблицы задан class="table-autosort:2". Это указывает, что после загрузки страницы следует произвести автоматическое упорядочивание по второму столбцу.

Для заголовков столбцов заданы классы вида <th class=" filterable sortable table-sortable:numeric"> Это означает, что данный столбец позволяет фильтровать значения, сортировать их в прямом и обратном направлениях, тип сортировки - численный. Направление сортировки меняется при клике по заголовку столбца.

В строке <tr class="filter_container"> задаются фильтры значений. Этот класс используется в скрипте, который производит наполнение значениями выпадающие списки.

Собственно, сама таблица больше никаких настроек не требует.

 

Теперь о выпадающих списках.

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

<select onchange="Table.filter(this,this)">
<option value>Все</option>
</select>

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

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

Новости

30.10.2016

Обновлено описание макроса для вывода всех элементов справочника UMI.CMS с учетом версии 14.

 

21.07.2015

Памятка по обновлению до debian 8.1. Приятно вкусить все плюшки PHP 5.6

11.11.2014

Как выполнить SQL-запрос из bash-скрипта. Памятка

11.11.2014

Как отследить нагрузку сайта на сервер.

06.11.2014

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

05.11.2014

Выкладываю как заготовку свой слайдер изображений на mootools

Все обновления