Javascript фильтрация данных

Сортировать HTML-таблицу мы уже научились. Вторая после сортировки задача базы данных – выборка строк из таблицы по определённому критерию. Например, чтобы поле город заканчивалось на -тск. Эту вторую задачу разумнее, конечно, решать на сервере: сначала выбрать данные, а потом вывести их на HTML-страницу. А не наоборот – выложить всю таблицу из БД пользователю, а он потом пусть как хочет сортирует и фильтрует этот многомегабайтный файл.

Проблема в том, что пользователь не всегда точно знает, что ищет (как наилучшим образом сформулировать запрос для БД). Например, вы хотите найти «выпадающее меню» в Яндексе. Ну, нашли сколько-то тысяч миллионов. Полистали ссылки, оказалось, что надо всё-таки «многоуровневое меню». А потом ещё одно уточнение: «выезжающее» (а не «выпадающее»). Увидели, что с этим связано слово «слайд» (или slide) – и опять новый запрос, в котором половина первоначальных данных по меню теряется... Всё это вы ищете приблизительно на первых десяти страницах. И можно не набирать каждый раз новый запрос для поиска, а вывести, например, первых 100 результатов (или хотя бы 50) по «приблизительному» запросу, а потом дополнительные слова искать в браузере обыкновенным Ctrl+f. При поиске с помощью Ctrl+f современные версии браузеров обычно подсвечивают все найденные результаты на странице.

Если данные выводятся в HTML в виде таблицы, можно эту таблицу скопировать в Excel и там сортировать и фильтровать, гибко отбирать нужные данные. Всё дело в этом – в гибкости визуальных (как в Excel) табличных фильтров. При запросе к серверной БД вы заранее не видите, из чего выбирать, и невольно возникает скрытое пожелание: «Огласите весь список!». У кого-то, конечно, возникает, а у кого-то и нет. Узнать мы об этом наверняка не можем, потому что для визуальных фильтров, для отбора данных прямо на HTML-странице просто не существует широко используемых инструментов. У себя на сайтах мы начинаем понемногу такие инструменты внедрять.

Пример – список рубрик для доски объявлений http://irkutsk.ir2.ru/. В правом фрейме мы выводим весь список рубрик (что-то вроде таблицы из одной колонки), а над списком – поле ввода для поиска. При вводе букв в поле поиска список немедленно изменяется:

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

Следующий шаг – создание фильтра для таблицы из нескольких колонок. Фильтры обычно используют вместе с сортировкой, поэтому Javascript функцию фильтрации строк мы не стали помещать в отдельный проект, а просто добавили к скрипту Simple Table Sorter и присвоили ему номер версии 2.0 (файл http://ir2.ru/tabsort2.js); примеры работы: http://ir2.ru/tabsort3.htm, http://ir2.ru/limit1000.htm (260 Кб, 1000 строк – для оценки производительности).

Подключение

Функция фильтрации подключается к скрипту-сортировщику так.

1. Во-первых, надо подключить сам скрипт сортировки, для этого в элемент head страницы нужно поместить три следующие строчки:

(ну, и, соответственно, поместить на сайт три файла: http://ir2.ru/ir2.js, http://ir2.ru/tabsort2.js, http://ir2.ru/tabsort.css). Для того, чтобы таблица обрабатывалась сортировщиком (и функцией фильтрации), в HTML-коде таблицы следует указать <table class="sortable">

2. Сам модуль фильтров по значениям колонок таблицы можно подключить двумя способами: только к заголовкам с явно указанным типом сортировки (<th axis="num">, <th axis="str">) или ко всем заголовкам подряд.

Для подключения фильтров к заголовкам с явно указанным типом сортировки нужно в секции скрипта tabsort2.js "Настройки" назначить use_inputs = true.

Для подключения модуля фильтров ко всем заголовкам сортируемых таблиц без разбора в секции "Настройки" назначить use_inputs = true; inputs_force = true.

Особенности работы

Подключенный модуль фильтров во время подготовки таблиц к сортировке (функция preptabs()) добавляет к каждому (если inputs_force = true) полю заголовка таблицы элементы input: если тип сортировки задан явно и равен "num" (<th axis="num">), добавляется два поля ввода input с подсказками впереди (>= и <=); если ввести число в верхнее поле ввода (>=), будет производиться отбор строк, данный столбец которых содержит числа большие или равные введённому пользователем значению; елси ввести число в нижнее поле – наоборот; таким образом, можно отфильтровать диапазон чисел по данному столбцу.

Во всех остальных случаях (<th axis="str">, другие значения, не равные "num" или вообще отсутствие axis) функция preptabs() добавляет к полю заголовка один элемент input; при вводе в него символов производится поиск значений по данному столбцу – ищутся совпадения с введённой пользователем строкой от начала строк; если первым символом в поле поиска пользователь введёт пробел, будут искаться совпадения в любой части строки (не только от начала).

Количество найденных строк отображается в отдельном элементе span с красной рамкой, который позиционируется на 100 пикселов выше поля поиска. Оформление этого элемента можно изменить в правилах CSS для класса .abstopleft в файле tabsort.css. Для удаления сообщения с количеством результатов следует нажать Escape. При последующих отборах строк с помощью полей поиска сообщение будет появляться заново.

Производительность

Скорость фильтрации строк (как и сортировки) с помощью наших Javascript функций невелика. Её, разумеется, нельзя сравнивать со скоростью фильтрации на стороне сервера. Так, в нашем примере из 1000 строк (файл http://ir2.ru/limit1000.htm, 260 Кб) отбор после введённого значения для поиска длится 3-4 секунды (AMD Athlon 999МГц, 512 МБ ОЗУ, Windows XP, Firefox 3). В Гугл Хроме, разумеется, в полтора-два раза быстрее. Ну, и скорость работы нашего Simple Table Sorter'а в любом случае выше скорости работы всех известных нам аналогов типа сортировщика для jQuery: наши алгоритмы - и сортировки, и фильтрации данных - ориентированы прежде всего именно на скорость работы (за счёт чего, конечно, в какой-то степени пострадал интерфейс).

Функция фильтрации строк, работающая на этой странице:

D.M., admin