Таблицы с сортировкой и фильтрацией
Иногда требуется представление информации в табличной форме. В случае больших таблиц желательно предоставить пользователю возможность отфильтровать только нужные ему строки. Оказывается, все уже решено до нас)
Разработчик //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>
Наполнение их уникальными значениями из соотв. столбца произойдет после загрузки страницы. В исходном коде демки есть встроенный скрипт, который выполняет эту работу. Общий принцип его таков:
- читаются в массив все столбцы первой строки, имеющие параметр "фильтруемое";
- в цикле по этому массиву считываются все значения соотв. столбца, выбираются уникальные, упорядочиваются по возрастанию
- по полученному на предыдущем шаге массиву строятся элементы списка