I'm having a difficult problem trying to solve an issue with my filters not displaying the correct items properly. When tap a selection it does not show the correct item properly despite having the correct class name with the element.
When I select beige on the list of choices it does filter it properly. Only when I select the next item to filter yellow it shows the previous color beige
The pagination function breaks if coupled using an OR logic
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var inclusives = [];
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each( function( i, elem ) {
// if checkbox, use value if checked
if ( elem.checked ) {
selector = '.'+elem.value + ' ';
// selector += '.'+elem.value + ' ';
inclusives.push(selector);
}
});
// smash all values back together for 'OR' filtering
filterValue = inclusives.length ? inclusives.join(', ') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.'+wordPage);
$container.isotope({ filter: filterValue });
changeFilter(filterValue);
}
If I tried using an AND logic the filter with pagination works fine
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function (i, elem) {
if (elem.checked) {
selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.'+wordPage);
changeFilter(filterValue);
}
var itemSelector = ".products-item";
var $checkboxes = $('.filter-checkbox');
var $container = $('.products-container').isotope({ itemSelector: itemSelector });
//Ascending order
var responsiveIsotope = [ [480, 3] , [720, 5] ];
var itemsPerPageDefault = 5;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAttribute = 'data-filter';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';
// update items based on current filters
function changeFilter(selector) { $container.isotope({ filter: selector }); }
//grab all checked filters and goto page on fresh isotope output
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var inclusives = [];
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each( function( i, elem ) {
// if checkbox, use value if checked
if ( elem.checked ) {
selector = '.'+elem.value + ' ';
// selector += '.'+elem.value + ' ';
inclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = inclusives.length ? inclusives.join(', ') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.'+wordPage);
$container.isotope({ filter: filterValue });
changeFilter(filterValue);
}
// determine page breaks based on window width and preset values
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for( var i = 0; i < responsiveIsotope.length; i++ ) {
if( $(window).width() <= responsiveIsotope[i][0] ) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function(){
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function (i, elem) {
if (elem.checked) {
selector += ( currentFilter != '*' ) ? '.'+elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'OR' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// find each child element with current filter values
$container.children(filterValue).each(function(){
// increment page if a new one is needed
if( item > itemsPerPage ) {
page++;
item = 1;
}
// add page number to element as a class
wordPage = page.toString();
var classes = $(this).attr('class').split(' ');
var lastClass = classes[classes.length-1];
// last class shorter than 4 will be a page number, if so, grab and replace
if(lastClass.length < 4){
$(this).removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$(this).addClass(classes);
} else {
// if there was no page number, add it
$(this).addClass(wordPage);
}
item++;
});
currentNumberPages = page;
}();
// create page number navigation
var CreatePagers = function() {
var $isotopePager = ( $('.'+pagerClass).length == 0 ) ? $('<div class="'+pagerClass+'"></div>') : $('.'+pagerClass);
$isotopePager.html('');
if(currentNumberPages > 1){
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('<a href="javascript:void(0);" class="pager" '+pageAttribute+'="'+(i+1)+'"></a>');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAttribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
// remove checks from all boxes and refilter
function clearAll(){
$checkboxes.each(function (i, elem) {
if (elem.checked) {
elem.checked = null;
}
});
currentFilter = '*';
setPagination();
goToPage(1);
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.change(function(){
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
$('#clear-filters').click(function(){clearAll()});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.centered-component {
width : 100%;
max-width : 1300px;
margin : 0 auto;
display : flex;
flex-wrap : wrap;
padding : 100px 0;
}
.centered-component .filter-sidebar {
width : 100%;
max-width : 250px;
margin-right : 24px;
}
.centered-component .content-block {
flex : 1;
}
.filter-sidebar {
display : flex;
flex-direction: column;
}
.products-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap : 24px;
}
.isotope-container > h2{
margin-bottom :48px;
}
.products-item {
position: relative !important;
top : initial !important;
left : initial !important;
}
.products-container {
height : initial !important;
}
.isotope-pager {
margin-top : 42px;
}
.isotope-container + .isotope-container {
margin-top : 64px;
}<!doctype html>
<html>
<head>
<title>Isotope</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="centered-component">
<div class="filter-sidebar">
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="beige" />
beige
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="green" />
green
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="blue" />
blue
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="orange" />
orange
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="purple" />
purple
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="pink" />
pink
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="teal" />
teal
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="yellow" />
yellow
</label>
<label class="filter-item">
<input type="checkbox" class="filter-checkbox" value="black" />
black
</label>
</div>
<div class="content-block">
<div class="isotope-container">
<h2 class="heading">Category 1</h2>
<ul class="products-container">
<li class="products-item beige">
<h2>beige</h2>
</li>
<li class="products-item green">
<h2>green</h2>
</li>
<li class="products-item blue">
<h2>blue</h2>
</li>
<li class="products-item orange">
<h2>orange</h2>
</li>
<li class="products-item purple">
<h2>purple</h2>
</li>
<li class="products-item pink">
<h2>pink</h2>
</li>
<li class="products-item teal">
<h2>teal</h2>
</li>
<li class="products-item yellow">
<h2>yellow</h2>
</li>
<li class="products-item black">
<h2>black</h2>
</li>
<li class="products-item beige">
<h2>beige</h2>
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="filter.js "></script>
</body>
</html>from Trying to integrate isotope filter with pagination using OR logic
No comments:
Post a Comment