Филтър за таблици на Javascript

Най-накрая намерих време и искам да представя на вашето внимание моя нов скрипт, който ви позволява да филтрирате данни в html таблици.

Скриптът поддържа следните видове филтри:

  • Текстово поле
  • Падащ списък
  • Радио бутони
  • Квадратчета за отметка

Скриптът е малък и доста лесен за свързване, а също така се комбинира добре със скрипта за сортиране на таблици. Можете да го изтеглите заедно с примери за свързване и конфигурация в моето хранилище:bitbucket.org

Филтър за демонстрационна таблица:

Символи Текст Числа Числа Текст
A B C- 1 2 3
бдиня23вентилатор
бстрелец12Арба
° Свентилатор31стрелец
° Сстрелец21Фантомас
бстрелец12диня
° Свентилатор33стрелец
Адиня22диня
Авентилатор11Стрелочник
° Свентилатор33диня
бвентилатор23Фантик
° Сстрелец11диня
° Свентилатор32Стрелка

Концептуално, скриптът се състои от две части: филтърни обектиfilterTable.Filter и самата функцияfilterTable( . ), която обвързва тези обекти-филтри за html таблица.

Филтърният обект има следния конструктор:

Първи аргумент: HTMLElement HTMLElementRef

Втори аргумент: Обратно извикване на функция

- функция:обратно извикване(стойност, филтри, i) където:Низова стойност - стойността на клетката от таблицата, която се проверява в момента на извикване на функциятаHTMLElements[] филтри - масив от HTML елементи, присвоени от филтри за проверената колона.Число i - индекс на филтриращия елемент в масива филтри, който е валидатор за текущото извикване. Тези. filters[i] във функцията за обратно извикване ще съдържа елемента, с който потребителят е взаимодействал, в резултат на което е бил задействан процесът на валидиране. Функцията трябва да върне true или false в зависимост от това дали входящата стойност на стойността преминава филтрирането със стойността на филтъра filters[i], зададена според вашата идея, или не.

Трети аргумент: String eventName

- името на събитието, прикачено към филтъра, чрез което ще се стартира проверката (onkeyup onclick onblur onchange и др.) onchange - стойност по подразбиране

Самата функцияfilterTable има следния подпис:

Изглежда доста объркващо, но нека да разгледаме един пример. Първо ни трябва html - рамката на таблицата. Обърнете внимание, че филтрите са само елементи на html форма; между другото, те имат уникални id атрибути, чрез които ще ги изберем за предаване към конструктора filterTable.Filter

Струва си да се отбележи, че такива типове филтри като текстово поле или падащ списък са „родни“ за скрипта и за да ги приложите, дори не е необходимо да прибягвате до извикване наfilterTable.Filter - просто предадете връзка към самия html елемент.

Обърнете внимание, че вторият аргумент къмfilterTable( .) е обектна конфигурация от филтри, чиито свойства имат имена-номера, започващиот 0 и до NUMBER_COLUMNS_TABLE-1 Стойността на всяко такова свойство трябва да бъде филтър:

Отново имайте предвид, че за текстово поле и падащ списък е достатъчно просто да подадете препратка към html елемента. И също така обърнете внимание на връзката на последния филтър. Може да попитате защо - все пак в последната колона филтърът е текстово поле! Да, така е, но ако сте работили внимателно с демонстрационния пример, забелязахте, че първият филтър - тестовото поле работи само след като сте въвели цялата стойност и сте натиснали бутона "Enter" или сте щракнали някъде другаде на страницата, т.е. филтърът се задейства от събитието "onchange" по подразбиране! Но филтърното текстово поле на последната колона - работи незабавно, щом въведете произволен знак. За да приложа това поведение, трябваше да създам филтър според всички правила сfilterTable.Filter и също трябваше да задам функция за обратно извикване и плюс, беше необходимо да предам името на събитието "onkeyup", чрез което щеше да бъде иницииран процесът на филтриране. Като този. Надявам се, че не съм ви объркал напълно.

Това е всичко, очаквам вашите отзиви и предложения и се надявам да намерите моята работа за полезна. Е, накрая давам пълен списък на сценария.

Филтър за диапазон от стойности „ОТ“ и „ДО“

По искане на работниците показвам как можете да внедрите филтър, който ще ви позволи да изберете диапазоните от стойности на числата "от" и "до". В заглавката на колоната, която се нуждае от този филтър, напишете кода, който представлява два падащи списъка. Съответно: първата е стойността "от", а втората е стойността "до":

И в извикването на скрипта предписваме филтър (за третата колона) за краткост, съкратих списъка, оставяйкисамо филтърна дефиниция "от" и "до":

Примери за таблица с филтри без значение за малки и големи букви

Филтърнечувствителен към малки и главни букви за точно съвпадение (може да замени стандартния)

Филтърнечувствителен към малки и главни букви за постепенно въвеждане на дума

По принцип нечувствителността към малки и главни букви може да бъде вградена в самия филтърен скрипт, но засега нямам време да пренапиша този скрипт в бъдеще, като взема предвид всички ваши желания, тогава ще направим тази функция там. Както се казва: останете на линия ;)