Как сделать фильтр ползунок jquery
Для интернет магазина нужен фильтр ползунок для фильтрации цен товаров.
Примеров много в интернете , но нет реализации . Как можно сделать сортировку по javascript ,jquery ,ajax и взять элементы сортировки из базы данных.Хочу сделать сортировку без php+mysql.Только javascript ,jquery ,ajax, mysql. |
Цитата:
|
Или ты имеешь ввиду что хочешь делать
<input id="filter" type="range" min="0" max="1000" value="1000" />
<table id="products">
<tr>
<td>Product 1</td>
<td class="price">333</td>
</tr>
<tr>
<td>Product 1</td>
<td class="price">666</td>
</tr>
<tr>
<td>Product 1</td>
<td class="price">999</td>
</tr>
</table>
<script>
filter.oninput = function() {
var rows = products.rows;
for (var i = 0; i < rows.length; i++) {
var price = +rows[i].querySelector('.price').textContent;
rows[i].style.display = (price > this.value) ? 'none' : 'block';
}
};
</script>
|
Если у тебя несколько страниц с товарами или они подгружаются динамически, то не получится сделать. Если только все товары заранее не загружены куда-нибудь, но это глупо. Поэтому лучше делать сортировку на PHP.
|
Как сделать фильтр ползунок jquery
Даник спс за быстрый пример. Пример подходит и из базы добавлять товары с картинками можно , но есть 1 нюанс тогда не сработает моя корзина покупок .
у меня есть функция <div class="item border"> <a href="#" onclick="cart.addToCart(this, '1', 'IPhone 5', '20500')" class="item_img"><img src="img/shop/iphone5.png" width="50"></a> <p><b>IPhone 5</b> | Цена: 20500 руб</p> <button class="border" onclick="cart.addToCart(this, '1', 'IPhone 5', '20500')">Купить</button> </div> а функция cart.addToCart описанно ниже /*************************************** * JQuery based script * Basket on client side * Created WebInside WebStudio (c) 2014 * Use only for linked www.webinside.ru **************************************/ function WICard(obj) { this.widjetX = 0; this.widjetY = 0; this.widjetObj; this.widjetPos; this.cardID = ""; this.DATA = {}; this.IDS = []; this.objNAME = obj; this.CONFIG = {}; this.IMG = "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABp FBMVEUAAABEREBEREBEREBEREASEhEJCQgGBgYBAQEAAAAGBgU HBwYAAAAAAAADAwNEREBEREAJCQkICAcGBgYFBQUJCQgnJyVER EAICAgBAQEAAAAICAcAAAAAAAAAAAAJCQgAAAAGBgYBAQEQEA8 NDQwHBwcBAQEMDAsSEhEJCQkBAQEBAQEBAQFAQDxEREBEREADA wIAAAABAQESEhEkJCIAAAAICAgAAAAQEA9EREAAAAATExIAAAA KCgkNDQwAAAAAAAABAQETExIHBwcDAwMDAwMTExIAAAAAAAABA QEAAAAAAAAAAAAAAAAAAAAAAAADAwIAAAAGBgUBAQEWFhUAAAA AAAAHBwYBAQEVFRMDAwMHBwcUFBMWFhUBAQETExIAAAAAAAADA wMMDAsAAAAAAAASEhEAAAAUFBMAAAAJCQkrKygDAwMAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAADAwMAAAAJCQgAAAAiIiABA QEAAAAAAAAAAAAAAAAAAAAAAAAAAAABAQFEREAFBQUBAQEAAAA GBgYICAgHBwcBAQEJW8x2AAAAhXRSTlMAAQcIAjJ0kZqZnp+La ygNDxKw/v6wIwPY1A+upf4nenGWvXCg/Pubc8eSmLkcHxpW+vlhBr6hl3EDUl9pop5Q+fhe+1FPXVT8mlx fXWD9+1dbnPRRRved9ldI+Fhd+mBaVlSYWJN1V2dqwwVTA8ORv JXAknRzKii2rCjc3BUTqagrepgUbRZwswAAAAlwSFlzAAAASAA AAEgARslrPgAAAb1JREFUOMuNk2dTwkAQhpdiCZagotiwd5RYQ eyKJdii2FDsvffeG0TJnza3lzg4kBnv0zt5NpvdZ3IA/zs6vUGv00wAxrj4hESGnERTkomk5JRU1swaFZ6WnhEMieSEgl9 qsmRmWVWe/R2W8KkUjkw5uUr/vNhcEvPpLHEZGly0FYA8pb4wqMFFscioBzAU06lKSsvKKa+orK qmqYY1yB3smGvrHFx9A0mNTQ6uuQU7Oc1yB50Lc6uDc0ObXNHY TlIHfqmTJaZcmLvkpwDdPb19hAODkzjRlAuzpx93GhhEPsTjpF 6gBTg1PyxnN4d8hHKJoQUhuhU/qvKxcWVTWmAPKlsLE5RP8qoJLND5vhQ/U9PIYWZWNcWgyTnFpH+ecoCFgNKTQZM+atK/qHI3txSg73gjTC6vIF9dw0nXhSiTG8g3eaEeJ92KMrlN+I4gSp 5dkvaiTO4fAKwJ6PQQ4Og4wuQJ3fp070zZXzhJOafpAgsuQ2Gt f+4KC64tWtx2gybZW61/8g7QpPn+ITZ/fAI0yVqfX2wx+r8+gxVNkl3f3j+cnU4v3j4vSa73NwDrJ5qkt+ f3Jv5N6u3Vvt0/UGcpYbC85ecAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTMtMDUtMT hUMDY6MDM6MzEtMDU6MDALk1CfAAAAJXRFWHRkYXRlOm1vZGlm eQAyMDEzLTA1LTE4VDA2OjAzOjMxLTA1OjAwes7oIwAAAABJRU 5ErkJggg=="; this.init = function(widjetID, config) { this.CONFIG = config || {}; try { this.DATA = JSON.parse(localStorage.getItem(widjetID)); // code to try //console.log("TRY - OK"); if ($.isEmptyObject(this.DATA)) { this.DATA = {}; } } catch (e) { this.DATA = {}; //onsole.log("TRY - BED"); } try { this.IDS = JSON.parse(localStorage.getItem(widjetID + "_ids")); if ($.isEmptyObject(this.IDS)) { this.IDS = []; } } catch (e) { this.IDS = []; } //console.log(this.DATA); this.cardID = widjetID; $("body").append("<div class='bird' id='"+widjetID +"_bird'></div>"); this.widjetObj = $("#" + widjetID); this.widjetPos = this.widjetObj.position(); if ($.isEmptyObject(this.DATA)) { this.widjetObj.html("Корзина пуста"); } else { this.reCalc(); } } /************************************************** ********************************************* * example: onclick="cart.addToCart(this, '2', 'Name of comic 2', '25500') ************************************************** ********************************************/ this.addToCart = function(curObj, id, name, price) { var goodieLine = {"id" : id, "name" : name, "price": price, "num" : 1, "url" : document.location.href}; if ($.isEmptyObject(this.DATA)) { this.DATA[id] = goodieLine; this.IDS.push(id); } else for(var idkey in this.DATA) { if($.inArray(id, this.IDS) === -1) { this.DATA[id] = goodieLine; this.IDS.push(id) } else if (idkey == id) { this.DATA[idkey].num += 1; } } localStorage.setItem(this.cardID, JSON.stringify(this.DATA)); localStorage.setItem(this.cardID + "_ids", JSON.stringify(this.IDS)); this.reCalc(); this.renderBasketTable(); var bird = $("#" + this.cardID + "_bird"); var pos = $(curObj).position(); bird.offset({ top: pos.top, left: pos.left}); bird.html(price); //bird.show(); bird.animate( { 'left': this.widjetPos.left, 'top': this.widjetPos.top } , { 'duration': 500, complete: function() { bird.offset({ top: -300, left: -300}); } }); if (this.CONFIG.showAfterAdd) { } } this.reCalc = function() { var num = 0; var sum = 0; for(var idkey in this.DATA) { num += parseInt(this.DATA[idkey].num); sum += parseFloat(parseInt(this.DATA[idkey].num) * parseFloat(this.DATA[idkey].price)); } this.widjetObj.html("Товаров " + num + " на сумму " + sum); } this.clearBasket = function() { this.DATA = {}; this.IDS = []; this.widjetObj.html("Корзина пуста"); localStorage.setItem(this.cardID, "{}"); localStorage.setItem(this.cardID + "_ids", "[]"); $("#btable").html(''); } this.renderBasketTable = function() { if ($('#bcontainer').length == 0) { $("body").append(" \ <div id='blindLayer' class='blindLayer'></div> \ <div id='bcontainer' class='bcontainer'> \ <div id='bsubject'>КОРЗИНА<a id='bclose' href='#' onclick='" + this.objNAME + ".closeWindow(\"bcontainer\", 1);'><img src='data:image/jpeg;base64,"+ this.IMG + "' /></a></div> \ <td></td></tr></table> \ <div id='overflw'><table class='btable' id='btable'></table></div> \ <div id='bfooter'> <button class='bbutton' onclick=\"cart.showWinow('order', 1)\">Оформить заказ</button><span id='bsum'>...</span></div> \ </div> \ "); } else { $("#btable").html(""); } this.center( $("#bcontainer") ) var sum = 0; for(var idkey in this.DATA) { with (this.DATA[idkey]) { sum += parseFloat(price * num); var productLine = '<tr class="bitem" id="wigoodline-' + id + '"><td>'+ id +'</td><td><a href="' + url + '">'+ name +'</a></td><td class="wigoodprice">' + price + ' руб.</td><td>'+ num +'</td><td>'+ parseFloat(price * num) +'</td><td><a href="#" onclick="' + this.objNAME + '.delItem(\'' + id + '\')"><img src="data:image/jpeg;base64,'+ this.IMG + '" /></a></td></tr>'; } $("#btable").append(productLine); } $("#bsum").html(sum + " руб."); } this.center = function(obj) { obj.css({"top" : "200px"}); obj.css({"left" : Math.max(0, (($(window).width() - $(obj).outerWidth()) / 2) + $(window).scrollLeft()) + "px"}); return obj; } this.showWinow = function(win, blind) { $("#" + win).show(); if (blind) $("#blindLayer").show(); } this.closeWindow = function(win, blind) { $("#" + win).hide(); if (blind) $("#blindLayer").hide(); } this.delItem = function(id) { if (confirm("Удалить #" + id + "?")) { $("#btable").html(""); delete this.DATA[id]; this.IDS.splice( $.inArray(id, this.IDS), 1 ); this.reCalc(); this.renderBasketTable(); localStorage.setItem(this.cardID, JSON.stringify(this.DATA)); localStorage.setItem(this.cardID + "_ids", JSON.stringify(this.IDS)); } } this.sendOrder = function(domElm) { if (this.CONFIG.valudate) { var valid = this.CONFIG.valudate.validationEngine('validate'); if (!valid) return false; } var bodyHTML = ""; var arr = domElm.split(","); for (var f=0; f < arr.length; f++) { bodyHTML += this.getForm(arr[f]) + "<br><br>"; }; //return bodyHTML; $.post( "sendmail.php?subj=ZAKAZ BASKET", { "order": bodyHTML }).done(function( data ) { cart.closeWindow("bcontainer", 1) cart.closeWindow("order", 0); if (cart.CONFIG.clearAfterSend) { cart.clearBasket(); } alert("Спасибо за покупку!\nМы свяжемся с Вами в ближайшее время"); }); } this.getForm = function (formId) { var formObj = document.getElementById(formId); var copyForm = formObj.cloneNode(true); INPUTS=[].slice.call( copyForm.querySelectorAll("input,select,textarea") ); INPUTS.forEach(function(elm) { if (elm.type == 'checkbox') { var spanReplace = document.createElement("span"); spanReplace.innerHTML = (elm.checked) ? elm.value : ""; elm.parentNode.replaceChild(spanReplace, elm); } else if ((elm.type == 'text') || (elm.type == 'hidden')) { var subjP = document.createElement('b'); subjP.innerHTML = elm.placeholder; elm.parentNode.insertBefore(subjP, elm); var spanReplace = document.createElement("div"); spanReplace.innerHTML = elm.value; elm.parentNode.replaceChild(spanReplace, elm); } }); return copyForm.innerHTML; } } |
Ну какая-то портянка, дальше что? В тег кода хотя б оборачивай.
|
Как сделать фильтр ползунок jquery
Даник спс вам за все вы мне помогли,а если будут вопросы можно вам обратиться ?
|
Цитата:
|
Подскажите как сделать фильтрацию по цене от - до указанной в input(ах), нужно показать все строки в пределах цены
<table class="sort">
<tr>
<td width="168" rowspan="2">
<a
class="thumb vtop inlblk rel tdnone linkWithHash scale4 detailsLink "
href="http://olx.ua/obyavlenie/nokia-3250-noviy-black-IDhvvvO.html#1e109ae6e9" title="">
<img class="fleft" src="http://img02.olx.ua/images_slandocomua/276495120_1_261x203_nokia-3250-noviy-black-kiev.jpg" alt="Nokia 3250 (НОВИЙ) Black">
</a>
</td>
<td valign="top">
<div class="space rel">
<h3 class="x-large lheight20 margintop5">
<a href="http://olx.ua/obyavlenie/nokia-3250-noviy-black-IDhvvvO.html#1e109ae6e9" class="marginright5 link linkWithHash detailsLink">
<strong>Nokia 3250 (НОВИЙ) Black</strong>
</a>
</h3>
<p class="color-9 lheight16 margintop5">
<small class="breadcrumb x-normal">
Телефоны » Мобильные телефоны
</small>
</p>
</div>
</td>
<td width="170" class="wwnormal tright td-price" valign="top">
<div class="space rel">
<p class="price">
<strong>700 грн.</strong>
</p>
</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div class="space rel">
<p class="color-9 lheight16 marginbott5">
<small class="breadcrumb x-normal">
<span>
Киев, Оболонский </span>
</small>
</p>
<p class="color-9 lheight16 marginbott5 x-normal">
Сегодня 00:56 </p>
</div>
</td>
<td width="85" class="tright" valign="bottom">
<div class="space rel">
<div class="rel observelinkinfo inlblk zi3">
<a href="#" class="{id:258949250} observe-link inlblk lheight16 tdnone tcenter margintop5 vishid " data-statkey="ad.observed.list">
<span class="icon inlblk observe2 observed-258949250"> </span>
<span class="link x-small gray2 block lheight14">
<span> </span>
</span>
</a>
<div class="suggesttitleright small top abs zi2 br4 hidden">
<p></p>
<div class="target abs icon"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td width="168" rowspan="2">
<a
class="thumb vtop inlblk rel tdnone linkWithHash scale4 detailsLink "
href="http://olx.ua/obyavlenie/prodam-nokia-3250-IDhvrr6.html#1e109ae6e9" title="">
<img class="fleft" src="http://img02.olx.ua/images_slandocomua/276468016_1_261x203_prodam-nokia-3250-desna.jpg" alt="Продам NOKIA 3250">
</a>
</td>
<td valign="top">
<div class="space rel">
<h3 class="x-large lheight20 margintop5">
<span class="courierbadge inlblk rel">
<span class="icon mini courier2 inlblk marginbott-5"> </span>
<div class="suggesttitle top abs zi5 br3 normal hidden">
<p class="color-6 lheight18">
Продавец отправит товар с возможностью проверить и оплатить его при получении. </p>
<a class="fright margintop5" href="http://olx.ua/about-shipping/" target="_blank">Узнать больше »</a>
<div class="suggest-bound abs"></div>
<span class="icon target abs"></span>
</div>
</span>
<a href="http://olx.ua/obyavlenie/prodam-nokia-3250-IDhvrr6.html#1e109ae6e9" class="marginright5 link linkWithHash detailsLink">
<strong>Продам NOKIA 3250</strong>
</a>
</h3>
<p class="color-9 lheight16 margintop5">
<small class="breadcrumb x-normal">
Телефоны » Мобильные телефоны
</small>
</p>
</div>
</td>
<td width="170" class="wwnormal tright td-price" valign="top">
<div class="space rel">
<p class="price">
<strong>500 грн.</strong>
</p>
<span class="normal inlblk pdingtop5 lheight16 color-2">Договорная</span>
</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div class="space rel">
<p class="color-9 lheight16 marginbott5">
<small class="breadcrumb x-normal">
<span>
Десна </span>
</small>
</p>
<p class="color-9 lheight16 marginbott5 x-normal">
Вчера 22:47 </p>
</div>
</td>
<td width="85" class="tright" valign="bottom">
<div class="space rel">
<div class="rel observelinkinfo inlblk zi3">
<a href="#" class="{id:258929676} observe-link inlblk lheight16 tdnone tcenter margintop5 vishid " data-statkey="ad.observed.list">
<span class="icon inlblk observe2 observed-258929676"> </span>
<span class="link x-small gray2 block lheight14">
<span> </span>
</span>
</a>
<div class="suggesttitleright small top abs zi2 br4 hidden">
<p></p>
<div class="target abs icon"></div>
</div>
</div>
</div>
</td>
</tr>
</table>
пробовал по вашему примеру с ползунком, но ничего не выходит |
| Часовой пояс GMT +3, время: 06:26. |