Автор: mzk Mar 27 2020, 8:26
Привет
В общем, есть таблица с множеством колонок строк. Строки нужно фильтровать по статусу для визуализации.
Я нашел следующее решение, которое отлично работает, но... эти фильтры не зависимы друг от друга.
То есть, если я выберу фильтр FilterLogistics() он фильтрует по 8-й колонке, а после него выберу FilterStatus(), то все отфильтрованное с помощью FilterLogistics() сбросится и применится только FilterStatus()
Не могу понять, как их зацепить вместе?
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
CODE Format
<script>
function FilterLogistics() {
var select, filter, table, tr, td, i;
select = document.getElementById("filter_input");
filter = select.value.toUpperCase();
table = document.getElementById("orders");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[7];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<script>
function FilterStatus() {
var select, filter, table, tr, td, i;
select = document.getElementById("filter_input_status");
filter = select.value.toUpperCase();
table = document.getElementById("orders");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[6];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
Сам хедер в таблице:
» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «
CODE Format
echo "<table id=\"orders\" style='width:800px' align='left' class=\"blueTable\">";
echo "<thead>";
echo "<th>#</th>";
echo "<th>Store</th>";
echo "<th>Order</th>";
echo "<th>Logistic LDAP</th>";
echo "<th>Logistic status</th>";
echo "<th>CC LDAP</th>";
echo "<th>
<select style='background-color: rgba(100, 100, 100, 0); color: #ffffff; font-size: 14px;' name='filter_status' id='filter_input_status' onchange='FilterStatus()' style='width:18px;'>
<option style='color: #000000;' value=''>Status</option>
<option style='color: #000000;' value=''>Всі</option>
<option style='color: #000000;' value='В процесі'>В процесі</option>
<option style='color: #000000;' value='Підготовлений'>Підготовлений</option>
</select></th>";
echo "<th>
<select style='background-color: rgba(100, 100, 100, 0); color: #ffffff; font-size: 14px;' name='filter_logistics' id='filter_input' onchange='FilterLogistics()' style='width:18px;'>
<option style='color: #000000;' value=''>Pyxis status</option>
<option style='color: #000000;' value=''>Всі</option>
<option style='color: #000000;' value='Сплачений'>Сплачений</option>
<option style='color: #000000;' value='Підготовлений'>Підготовлений</option>
<option style='color: #000000;' value='Не найдійшло на касс'>Не найдійшло на касс</option>
<option style='color: #000000;' value='Анульований'>Анульований</option>
</select>
</th>";
echo "</thead>";
Автор: phpkiev Mar 27 2020, 10:44
О Боги.. Вы серъёзно? Рисуете простыню HTML через echo? А зачем? Даже если вам чужд MVC подход, вы можете этот хтмл тупо встроить как есть, а чтоб не загромождать рнр код - то подключить его через include() - это ж гораздо удобней и проще саппортить будет.
А по основному вопросу - ну так это ж очевидно. Если оставить за кадром тот факт, что фильтрация таблицы на клиенте средствами JS выглядит мягко говоря странным решением - то посмотрите, что вы делаете.
У вас два одинаковых метода, которые делают одно и то-же, но на разных колонках. А именно - при вызове каждый этот метод проверяет условие в строке таблицы, и при выполнении оного присваивает свойству display значение "", а если условие не выполняется, то прячет строчку через display = "none". Соотв. при этом если к таблице уже был применён фильтр ранее на другую колонку - он будет перезатёрт.
Я вижу несколько вариантов решения этой задачи на JS, но это будут костыли, т.к. при достаточно большом наборе данных вы очень просто и быстро забъёте процессор клиентской машины. Такие задачи обычно решают иначе - вебформа собирает значения фильтров и отправляет их на бакенд, а уже там проводится фильтрация и сортировка и на клиент присылается уже готовый к отображению набор данных. Это можно сделать через AJAX запрос, чтоб не перегружать страничку.
Автор: mzk Mar 27 2020, 14:01
(phpkiev @ Mar 27 2020, 10:44)
О Боги.. Вы серъёзно? Рисуете простыню HTML через echo? А зачем? Даже если вам чужд MVC подход, вы можете этот хтмл тупо встроить как есть, а чтоб не загромождать рнр код
Как умею, сори
Насколько мне известно, то в MVC подходе точно так же присутствует вывод HTML элементов с помощью PHP. Нет?
(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 = ""Прошу камнями не бросать, правильные решения приходят с опытом
Автор: phpkiev Mar 27 2020, 18:34
Так работать не будет. Надо написать всего одну функцию и в ней проверять все условия одновременно. В противном случае задача становится слишком сложной, т.к. придётся для каждой строки хранить её состояние после каждого фильтра.