Здравствуйте Гость [ Вход | Регистрация ] | Форум в сети 5232-й день

Тут може бути Ваша реклама

 Визуальный фильтр HTML таблицы с помощью JS, Код внутри, нужна помощь в оптимизации

mzk
Mar 27 2020, 8:26
  
Пост #1



Репутация:   83  
Cтаршой
**

Группа: Пользователи
Сообщений: 665
С нами с: 27-February 08


Привет smile.png
В общем, есть таблица с множеством колонок строк. Строки нужно фильтровать по статусу для визуализации.
Я нашел следующее решение, которое отлично работает, но... эти фильтры не зависимы друг от друга.
То есть, если я выберу фильтр FilterLogistics() он фильтрует по 8-й колонке, а после него выберу FilterStatus(), то все отфильтрованное с помощью FilterLogistics() сбросится и применится только FilterStatus()

Не могу понять, как их зацепить вместе?

» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «

Сам хедер в таблице:
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
 
Reply to this topicStart new topic
Ответов(1 - 3)
phpkiev
Mar 27 2020, 10:44
  
Пост #2



Репутация:   86  
Cтаршой
**

Группа: Пользователи
Сообщений: 708
С нами с: 24-November 07


О Боги.. Вы серъёзно? Рисуете простыню HTML через echo? А зачем? Даже если вам чужд MVC подход, вы можете этот хтмл тупо встроить как есть, а чтоб не загромождать рнр код - то подключить его через include() - это ж гораздо удобней и проще саппортить будет.

А по основному вопросу - ну так это ж очевидно. Если оставить за кадром тот факт, что фильтрация таблицы на клиенте средствами JS выглядит мягко говоря странным решением - то посмотрите, что вы делаете.

У вас два одинаковых метода, которые делают одно и то-же, но на разных колонках. А именно - при вызове каждый этот метод проверяет условие в строке таблицы, и при выполнении оного присваивает свойству display значение "", а если условие не выполняется, то прячет строчку через display = "none". Соотв. при этом если к таблице уже был применён фильтр ранее на другую колонку - он будет перезатёрт.

Я вижу несколько вариантов решения этой задачи на JS, но это будут костыли, т.к. при достаточно большом наборе данных вы очень просто и быстро забъёте процессор клиентской машины. Такие задачи обычно решают иначе - вебформа собирает значения фильтров и отправляет их на бакенд, а уже там проводится фильтрация и сортировка и на клиент присылается уже готовый к отображению набор данных. Это можно сделать через AJAX запрос, чтоб не перегружать страничку.
User is online!Profile CardPM
Go to the top of the page
+Quote Post
mzk
Mar 27 2020, 14:01
  
Пост #3



Репутация:   83  
Cтаршой
**

Группа: Пользователи
Сообщений: 665
С нами с: 27-February 08


(phpkiev @ Mar 27 2020, 10:44) Перейти к цитате

О Боги.. Вы серъёзно? Рисуете простыню HTML через echo? А зачем? Даже если вам чужд MVC подход, вы можете этот хтмл тупо встроить как есть, а чтоб не загромождать рнр код

Как умею, сори rgg.png
Насколько мне известно, то в MVC подходе точно так же присутствует вывод HTML элементов с помощью PHP. Нет? smile.png
(phpkiev @ Mar 27 2020, 10:44) Перейти к цитате

Я вижу несколько вариантов решения этой задачи на JS, но это будут костыли, т.к. при достаточно большом наборе данных вы очень просто и быстро забъёте процессор клиентской машины. Такие задачи обычно решают иначе - вебформа собирает значения фильтров и отправляет их на бакенд, а уже там проводится фильтрация и сортировка и на клиент присылается уже готовый к отображению набор данных. Это можно сделать через AJAX запрос, чтоб не перегружать страничку.

Сама таблица не будет настолько большой, чтобы забить память клиентской машины
Идея в том, чтобы быстро показать статусы и уйти "исправлять" ситуацию
На текущем этапе оставился на этом:
CODE Format

if (td.innerHTML.toUpperCase().indexOf(filter) > -1  && tr[i].style.display !== "none")

Таким образом фильтруем то, что уже отфильтровано первым разом.
Момент в том, что если выбрать уже другие фильтры, то ничего не сработает. Вариант решения сейчас - выбор "Всі" на любом столбце ресетит таблицу путем tr[i].style.display = ""

Прошу камнями не бросать, правильные решения приходят с опытом smile.png

Сообщение отредактировал mzk - Mar 27 2020, 14:02
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
phpkiev
Mar 27 2020, 18:34
  
Пост #4



Репутация:   86  
Cтаршой
**

Группа: Пользователи
Сообщений: 708
С нами с: 24-November 07


Так работать не будет. Надо написать всего одну функцию и в ней проверять все условия одновременно. В противном случае задача становится слишком сложной, т.к. придётся для каждой строки хранить её состояние после каждого фильтра.
User is online!Profile CardPM
Go to the top of the page
+Quote Post

Reply to this topicStart new topic

 



- Упрощённая версия
Сейчас: 12th July 2020 - 12:35
Сайт не предоставляет электронные версии произведений, а занимается лишь коллекционированием и каталогизацией ссылок, присылаемых и публикуемых на форуме нашими читателями. Если вы являетесь правообладателем какого-либо представленного материала и не желаете чтобы ссылка на него находилась в нашем каталоге, свяжитесь с нами и мы удалим её. Файлы для обмена предоставлены пользователями сайта.