@struhovv

Как сделать множественный фильтр в jquery?

Подскажите, как реализовать множественный фильтр?

5cf610566cb26749269908.png

На каждом складе есть товары, разбитые по категориям. Сначала выводится полный список, при нажатии на фильтры справа остаются товары выбранных категорий.

Как в поле "всего товаров" передать общее количество всех товаров на складе?

Как лучше структурировать данные и где их хранить, если сделать большую базу на несколько складов и 1000 товаров? Что посоветуете? JSON, XML?



Спасибо!
  • Вопрос задан
  • 258 просмотров
Решения вопроса 1
@CrazyEnimal
Кратко не получится.
Я бы делал так.
Делаем АПИ, предположим на PHP, и при обращении по AJAX к этому апи с определенными POST или GET запросами я бы отдавал из него JSON который уже разбирал бы в JS на предмет замены информации на экране.
Таким образом можно без перезагрузки всей страницы а только части с выдачей организовать отображение склада.

---------------------------getJSON.php------------------------
<?php
   $result = new StdClass(); 
   if($_POST['filterName']){
        
        $result->success = true;
        $result->message = "SOME DATA";

    } else {
        $result->error = true;
        $result->errorMessage = "Не свезло";
    }

    $json = json_encode($json);
    echo $json;
?>
---------------------------getJSON.php------------------------

---------------------------index.html--------------------------
<body>
    <form id="formID">
        <select name="filterName">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <select name="filterName2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </form>
    <div id="placeReplace">
        some html
    </div>
</body>
<script>
$("select.someSelect").on("change",function(){
    sendFormGetJSON();
    return false;
});

function sendFormGetJSON() {
	var f = $('#formID').serializeObject();
	$.ajax({
		url: "getJSON.php",
		type: "POST",
		dataType: "json",
		data: {
			"filterName":f.filterName,
			"filterName2":f.filterName2,
		},
		success: function(data){
			setTimeout(function(){
				if (data.success == true){
					$("#placeReplace").html(data.successMessage);
				}else{
					alert(data.errorMessage);
				}
			}, 1000);
		},
		error: function(){
			alert("Произошла ошибка, повторите попытку позже");
		}
	});

}

$.fn.serializeObject = function(){
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
</script>
---------------------------index.html--------------------------
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы