我已设法使用分页进行过滤,但无法使用分页进行排序。
有人知道吗?
我有几个问题:
.真的可以分页排序吗?
.Isotope 正在使用相同的功能?
我正在分享用于同位素过滤和分页的 JavaScript 部分。
$('.grid').isotope({
<?php echo $grid1; ?>
getSortData: {
title: ".wa_title",
popularity: ".wa_sales parseInt",
price: function(et_pb_post) {
var price= $(et_pb_post).find(".wa_price").text();
return parseFloat( price.replace( /[\(\)]/g, "") );
},
des_price: ".des_price parseInt",
des_date: ".des_date parseInt",
asc_date: ".asc_date parseInt",
},
sortAscending: {
popularity: false,
des_price: false,
asc_date: false,
},
<?php echo $transition; ?>
})
var itemSelector = ".grid-item4";
var $checkboxes = $('.wa-isotope-button-filter');
var $sort_checkboxes = $('.wa-isotope-button-sort');
var $container = $('.grid').isotope({ itemSelector: itemSelector });
//Ascending order
var responsiveIsotope = [ [480, 4] , [720, 6] ];
var itemsPerPageDefault = <?php echo $post_count; ?>;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var currentSort = 'original-order';
var filterAttribute = 'data-filter';
var SortAttribute = 'data-sort-by';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'wa-pagination-wrapper';
// 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, f) {
currentPage = n;
var selector = itemSelector;
if(f) filter = f;
else filter = '*';
var exclusives = [];
filterValue = filter;
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.'+wordPage);
console.log(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(filter) {
var SettingsPagesOnItems = function(){
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
if(filter == undefined || filter == '*') {
var item = 0;
} else {
var item = 1;
}
var page = 1;
var selector = itemSelector;
var exclusives = [];
filterValue = filter;
console.log(filterValue);
// find each child element with current filter values
$container.children(filterValue).each(function(){
console.log($(this));
// 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);
var filter = '*';
$checkboxes.each(function (i, elem) {
if ($(this).hasClass('wa_checked')) {
filter = $(this).attr(filterAttribute);
}
});
$isotopePager.html('');
if(currentNumberPages > 1){
for( var i = 0; i < currentNumberPages; i++ ) {
var $pager = $('<a href="javascript:void(0);" class="page-numbers" data-filter='+filter+' '+pageAttribute+'="'+(i+1)+'"></a>');
$pager.html(i+1);
$pager.click(function(){
var page = $(this).eq(0).attr(pageAttribute);
var f = $(this).eq(0).attr(filterAttribute);;
goToPage(page, f);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.on( "click", function() {
$checkboxes.each(function (i, elem) {
if ($(this).hasClass('wa_checked')) {
$(this).removeClass('wa_checked');
}
});
$(this).addClass('wa_checked');
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination(filter);
goToPage(1, filter);
});