Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
 Аватар для dailydose
671 / 217 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2

Как фильтровать товары по нескольким полям?

28.05.2017, 17:08. Показов 1244. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте, подскажите как можно сделать так, чтобы фильтр был не взаимоисключающим?
Т.е. чтобы можно было комбинировать, например отфильтровать список товаров одновременно и по производителю и по цвету.

Сейсас допустим нажимаю Фильтр по сплавам: red
- выводятся 4 товара (RU#1, EN#6, UA#A, EN#C)
Затем хочу эти же товары отфильтровать еще и по производителю: EN
- должны вывестить 2 товара (EN#6, EN#C)

Каким образом этого можно добиться?

Вывожу товары так:
PHP
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="sklad_filter by_alloy">Фильтр по сплавам:<span class="sklad_alloys_list"></span></div>
<div class="sklad_filter by_manufacturer">Фильтр по производителю:<span class="sklad_manufacturers_list"></span></div>
<?
$arItems = array(
    array("NAME"=>"tovar #1", "COUNT"=>"12", "MANUFACTURER"=>"RU", "COLOR"=>"red",    "PRICE"=>"1290512"),
    array("NAME"=>"tovar #2", "COUNT"=>"15", "MANUFACTURER"=>"EN", "COLOR"=>"green",  "PRICE"=>"1354123"),
    array("NAME"=>"tovar #3", "COUNT"=>"74", "MANUFACTURER"=>"DE", "COLOR"=>"blue",   "PRICE"=>"1453214"),
    array("NAME"=>"tovar #4", "COUNT"=>"7",  "MANUFACTURER"=>"RU", "COLOR"=>"cyan",   "PRICE"=>"2395025"),
    array("NAME"=>"tovar #5", "COUNT"=>"81", "MANUFACTURER"=>"RU", "COLOR"=>"orange", "PRICE"=>"1535254"),
    array("NAME"=>"tovar #6", "COUNT"=>"12", "MANUFACTURER"=>"EN", "COLOR"=>"red",    "PRICE"=>"4636346"),
    array("NAME"=>"tovar #7", "COUNT"=>"0",  "MANUFACTURER"=>"DE", "COLOR"=>"black",  "PRICE"=>"6769705"),
    array("NAME"=>"tovar #8", "COUNT"=>"10", "MANUFACTURER"=>"UA", "COLOR"=>"green",  "PRICE"=>"3463413"),
    array("NAME"=>"tovar #9", "COUNT"=>"15", "MANUFACTURER"=>"UA", "COLOR"=>"black",  "PRICE"=>"4757567"),
    array("NAME"=>"tovar #A", "COUNT"=>"28", "MANUFACTURER"=>"UA", "COLOR"=>"red",    "PRICE"=>"2345235"),
    array("NAME"=>"tovar #B", "COUNT"=>"76", "MANUFACTURER"=>"RU", "COLOR"=>"green",  "PRICE"=>"3413412"),
    array("NAME"=>"tovar #C", "COUNT"=>"94", "MANUFACTURER"=>"EN", "COLOR"=>"red",    "PRICE"=>"7456735"),
);
?>
<table border="1" id="items">
<thead>
    <tr>
        <th>Товар</th>
        <th>Наличие, кг</th>
        <th>Производитель</th>
        <th>Цвет</th>
        <th>Цена, руб/кг</th>
    </tr>
</thead>
<tbody>
<?foreach($arItems as $arItem):?>
    <tr class="sklad_alloy" data-color="<?=$arItem["COLOR"]?>" data-manufacturer="<?=$arItem["MANUFACTURER"]?>">
        <th><?=$arItem["NAME"]?></th>
        <th><?=$arItem["COUNT"]?></th>
        <th><?=$arItem["MANUFACTURER"]?></th>
        <th><?=$arItem["COLOR"]?></th>
        <th><?=$arItem["PRICE"]?></th>
    </tr>
<?endforeach?>
</tbody>
</table>

Добавляю фильтр так:
javascript
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
BX.ready( function()
{
    var table = BX("items");
    
    // add alloys to filter
    let alloys = [];
    let tr = table.getElementsByClassName("sklad_alloy");
    for(let i =0; i < tr.length; ++i)
    {
        let alloy = tr[i].getAttribute("data-color");
        if (alloy && alloys.indexOf(alloy) === -1)
            alloys.push(alloy);
    }
    let sklad_alloys_list = document.getElementsByClassName("sklad_alloys_list")[0];
    
    for(let i = 0; i < alloys.length; ++i)
    {
        sklad_alloys_list.innerHTML += ' <a href="javascript:void(0)" class="sklad_link_filter">' + alloys[i] + '</a>';
    }
    
    // add manufacturers to filter
    let manufacturers = [];
    for(let i =0; i < tr.length; ++i)
    {
        let manufacturer = tr[i].getAttribute("data-manufacturer");
        if (manufacturer && manufacturers.indexOf(manufacturer) == -1)
            manufacturers.push(manufacturer);
    }
    let sklad_manufacturers_list = document.getElementsByClassName("sklad_manufacturers_list")[0];
    
    for(let i = 0; i < manufacturers.length; ++i)
    {
        sklad_manufacturers_list.innerHTML += ' <a href="javascript:void(0)" class="sklad_link_filter">' + manufacturers[i] + '</a>';
    }
    
    // handle click on a.sklad_link_filter
    BX.bind(BX(document.getElementsByClassName("sklad_filter")[0]), 'click', function(e)
    {
        console.log(e.target);
        if (!e || !e.target || !e.target.parentNode) return;
        if (e.target.parentNode.className.indexOf("sklad_alloys_list") != -1)
        {
            for(let i =0; i < tr.length; ++i)
            {
                let alloy = tr[i].getAttribute("data-color");
                if (alloy == e.target.innerText)
                    tr[i].style.display = "table-row";
                else
                    tr[i].style.display = "none";
            }
        }
    });
    BX.bind(BX(document.getElementsByClassName("sklad_filter")[1]), 'click', function(e)
    {
        console.log(e.target);
        if (!e || !e.target || !e.target.parentNode) return;
        if (e.target.parentNode.className.indexOf("sklad_manufacturers_list") != -1)
        {
            for(let i =0; i < tr.length; ++i)
            {
                let manufacturer = tr[i].getAttribute("data-manufacturer");
                if (manufacturer == e.target.innerText)
                    tr[i].style.display = "table-row";
                else
                    tr[i].style.display = "none";
            }
        }
    });
    
    // remove empty filters
    if (!sklad_manufacturers_list.innerHTML)
        document.getElementsByClassName("by_manufacturer")[0].style.display = "none";
    if (!sklad_alloys_list.innerHTML)
        document.getElementsByClassName("by_alloy")[0].style.display = "none";
    
    if (!sklad_manufacturers_list.innerHTML && !sklad_alloys_list.innerHTML)
        document.getElementsByClassName("remove_filter")[0].style.display = "none";
});
 
function removeFilter()
{
    var node = document.getElementsByClassName("sklad_table")[0];
    let tr = node.getElementsByClassName("sklad_alloy");
    for(let i =0; i < tr.length; ++i)
    {
        tr[i].style.display = "table-row";
    }
}
Миниатюры
Как фильтровать товары по нескольким полям?  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
28.05.2017, 17:08
Ответы с готовыми решениями:

Фильтровать по нескольким полям DataGridView
Помогите сделать фильтрацию DataGridView,почти по всем полям,чтобы когда вносил значения, а после нажатия на кнопку поиск,он выводил нужные...

Как осуществить суммирование в БД по нескольким полям?
Приветствую! Есть БД. В ней 3 поля: Номер вызывающего абонента, Номер вызываемого абонента, Продолжительность разговора. Любой абонент...

Как сделать поиск по нескольким полям?
Я уже искал различные темы, и в интернете искал. Но я не понимаю того что там пишут. Вернее поисковик не совсем правильно работает как...

1
 Аватар для dailydose
671 / 217 / 88
Регистрация: 21.07.2016
Сообщений: 1,036
Записей в блоге: 2
29.05.2017, 16:59  [ТС]
PHP
1
IncludeComponent ( "bitrix:catalog.filter")
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
29.05.2017, 16:59
Помогаю со студенческими работами здесь

Как связать две таблицы по нескольким полям?
Нужно, что бы работала связь Master-Detail. Но связать таблицы можно только сразу по двум полям, т.к. только в паре получается уникальная ...

Фильтрация по нескольким полям как в интернет магазинах
как реализовать фильтр по набору данных, например, как на сайте яндекс маркет. там фильтрация выглядит следующим образом. например, хотим...

Как отсортировать массив строк по нескольким полям
Есть структура со следующими данными: ФИО рабочего, продолжительность опоздания: -Нужно ввести данные в массив; ...

Как вносить данные в объект сразу по нескольким полям за один раз
Всем привет, допустим, хочу вносить данные в объект в консоли вот так Имя...(курсор здесь и здесь вношу) Фамилия...(потом могу ...

Поиск по сайту: не могу разобраться, как делать поиск по нескольким полям
поиск по одному полу осуществляется вот так: SELECT * from tablepart WHERE `marka` LIKE '%&quot; . $search . &quot;%' or `model` LIKE '%&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru