Визуальный фильтр HTML таблицы с помощью JS, Код внутри, нужна помощь в оптимизации |
Здравствуйте Гость [ Вход | Регистрация ] | Форум в сети 6729-й день
![]() |
Шановні користувачі! Запрошуємо вас до офіційного телеграм-канала 0day Community. Тут ви зможете поспілкуватися одне з одним та дізнатися про останні новини щодо роботи ресурса, поставити запитання до адміністрації, тощо. Перейти до телеграм-канала можна відсканувавши QR-код або натиснувши на посилання: @zeroday_ua |
Визуальный фильтр HTML таблицы с помощью JS, Код внутри, нужна помощь в оптимизации |
mzk |
Пост
#1
|
Репутация: ![]() ![]() Cтаршой ![]() ![]() Группа: Пользователи Сообщений: 673 С нами с: 27-February 08 ![]() |
Привет
![]() В общем, есть таблица с множеством колонок строк. Строки нужно фильтровать по статусу для визуализации. Я нашел следующее решение, которое отлично работает, но... эти фильтры не зависимы друг от друга. То есть, если я выберу фильтр FilterLogistics() он фильтрует по 8-й колонке, а после него выберу FilterStatus(), то все отфильтрованное с помощью FilterLogistics() сбросится и применится только FilterStatus() Не могу понять, как их зацепить вместе? » Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... « Сам хедер в таблице: » Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... « |
![]() ![]() |
phpkiev |
Пост
#2
|
Репутация: ![]() ![]() Ветеран ![]() ![]() ![]() ![]() ![]() Группа: Пользователи Сообщений: 5 193 С нами с: 24-November 07 ![]() |
О Боги.. Вы серъёзно? Рисуете простыню HTML через echo? А зачем? Даже если вам чужд MVC подход, вы можете этот хтмл тупо встроить как есть, а чтоб не загромождать рнр код - то подключить его через include() - это ж гораздо удобней и проще саппортить будет.
А по основному вопросу - ну так это ж очевидно. Если оставить за кадром тот факт, что фильтрация таблицы на клиенте средствами JS выглядит мягко говоря странным решением - то посмотрите, что вы делаете. У вас два одинаковых метода, которые делают одно и то-же, но на разных колонках. А именно - при вызове каждый этот метод проверяет условие в строке таблицы, и при выполнении оного присваивает свойству display значение "", а если условие не выполняется, то прячет строчку через display = "none". Соотв. при этом если к таблице уже был применён фильтр ранее на другую колонку - он будет перезатёрт. Я вижу несколько вариантов решения этой задачи на JS, но это будут костыли, т.к. при достаточно большом наборе данных вы очень просто и быстро забъёте процессор клиентской машины. Такие задачи обычно решают иначе - вебформа собирает значения фильтров и отправляет их на бакенд, а уже там проводится фильтрация и сортировка и на клиент присылается уже готовый к отображению набор данных. Это можно сделать через AJAX запрос, чтоб не перегружать страничку. |
mzk |
Пост
#3
|
Репутация: ![]() ![]() Cтаршой ![]() ![]() Группа: Пользователи Сообщений: 673 С нами с: 27-February 08 ![]() |
О Боги.. Вы серъёзно? Рисуете простыню HTML через echo? А зачем? Даже если вам чужд MVC подход, вы можете этот хтмл тупо встроить как есть, а чтоб не загромождать рнр код Как умею, сори ![]() Насколько мне известно, то в MVC подходе точно так же присутствует вывод HTML элементов с помощью PHP. Нет? ![]() Я вижу несколько вариантов решения этой задачи на JS, но это будут костыли, т.к. при достаточно большом наборе данных вы очень просто и быстро забъёте процессор клиентской машины. Такие задачи обычно решают иначе - вебформа собирает значения фильтров и отправляет их на бакенд, а уже там проводится фильтрация и сортировка и на клиент присылается уже готовый к отображению набор данных. Это можно сделать через AJAX запрос, чтоб не перегружать страничку. Сама таблица не будет настолько большой, чтобы забить память клиентской машины Идея в том, чтобы быстро показать статусы и уйти "исправлять" ситуацию На текущем этапе оставился на этом: CODE Format if (td.innerHTML.toUpperCase().indexOf(filter) > -1 && tr[i].style.display !== "none") Таким образом фильтруем то, что уже отфильтровано первым разом. Момент в том, что если выбрать уже другие фильтры, то ничего не сработает. Вариант решения сейчас - выбор "Всі" на любом столбце ресетит таблицу путем tr[i].style.display = "" Прошу камнями не бросать, правильные решения приходят с опытом ![]() Сообщение отредактировал mzk - Mar 27 2020, 14:02 |
phpkiev |
Пост
#4
|
Репутация: ![]() ![]() Ветеран ![]() ![]() ![]() ![]() ![]() Группа: Пользователи Сообщений: 5 193 С нами с: 24-November 07 ![]() |
Так работать не будет. Надо написать всего одну функцию и в ней проверять все условия одновременно. В противном случае задача становится слишком сложной, т.к. придётся для каждой строки хранить её состояние после каждого фильтра.
|
![]() ![]() |
![]() |
Упрощённая версия | Сейчас: 17th August 2024 - 11:13 |
Сайт не розміщує електронні версії творів, а займається лише колекціонуванням та каталогізацією посилань, що публікуються нашими користувачами. Якщо Ви є правовласником якоїсь частини опублікованого матеріалу та не бажаєте, щоб посилання на нього знаходилось в нашому каталозі, зв’яжіться з нами і ми видалимо його. Файли для обміну надані користувачами сайту і адміністрація не несе відповідальності за їх вміст. |