I am trying to implement isotope with pagination on my WordPress site (which obviously is a problem for most people). I've come up with a scenario which may work if I can figure a few things out.
我正在尝试在我的WordPress网站上实现同位素和分页（这对大多数人来说显然是一个问题）。我想出了一个方案，如果我能想出一些事情可能会有用。
On my page, I have this part of my isotope script -
在我的页面上，我有这部分同位素脚本 -
$('.goforward').click(function(event) {
var href = $(this).attr('href');
$('.isotope').empty();
$('.isotope').load(href +".html .isotope > *");
$( 'div.box' ).addClass( 'isotope-item' );
$container.append( $items ).isotope( 'insert', $items, true );
event.preventDefault();
});
Then I am using this pagination function which I modified from here to have the 'goforward' class --
然后我使用这个分页功能，我从这里修改了'goforward'类 -
function isotope_pagination($pages = '', $range = 2)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class='pagination'>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<a href='".get_pagenum_link($i)."' class='inactive goforward'>".$i."</a>":"<a href='".get_pagenum_link($i)."' class='inactive goforward' >".$i."</a>";
}
}
echo "</div>\n";
}
}
1st Problem - I'm having issues with the filtering/sorting. It filters fine for the first page, but doesn't sort. On the second page or any other page loaded it does not append/insert or even filter/sort when starting fresh on that page. Instead, when trying to do so it gives me this error --
第一个问题 - 我遇到过滤/排序问题。它对第一页过滤得很好，但不排序。在第二页或任何其他加载的页面上，当在该页面上重新开始时，它不会附加/插入甚至过滤/排序。相反，当试图这样做时，它给了我这个错误 -
Uncaught TypeError: Cannot read property '[object Array]' of undefined
2nd Problem - When loading the page fragments, there's a delay and the current page is still visible before the next page fragment is loaded in its place.
第二个问题 - 加载页面片段时，会出现延迟，当前页面在下一页片段加载到位之前仍然可见。
I know a lot of people have problems with isotope and pagination, usually, end up using infinite scroll even though isotope author does not recommend it.
我知道很多人都有同位素和分页问题，通常最终使用无限卷轴，即使同位素作者不推荐它。
So my theory is loading content via load() and have a callback of some sort to only display filtered items.
所以我的理论是通过load（）加载内容并进行某种回调以仅显示过滤的项目。
Any ideas on how to achieve this?
关于如何实现这一点的任何想法？
My entire isotope script ---
我的整个同位素脚本---
$(function () {
var selectChoice, updatePageState, updateFiltersFromObject,
$container = $('.isotope');
$items = $('.item');
////////////////////////////////////////////////////////////////////////////////////
/// EVENT HANDLERS
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Mark filtering element as active/inactive and trigger filters update
$('.js-filter').on( 'click', '[data-filter]', function (event) {
event.preventDefault();
selectChoice($(this), {click: true});
$container.trigger('filter-update');
});
//////////////////////////////////////////////////////
// Sort filtered (or not) elements
$('.js-sort').on('click', '[data-sort]', function (event) {
event.preventDefault();
selectChoice($(this), {click: true});
$container.trigger('filter-update');
});
//////////////////////////////////////////////////////
// Listen to filters update event and update Isotope filters based on the marked elements
$container.on('filter-update', function (event, opts) {
var filters, sorting, push;
opts = opts || {};
filters = $('.js-filter li.active a:not([data-filter="all"])').map(function () {
return $(this).data('filter');
}).toArray();
sorting = $('.js-sort li.active a').map(function () {
return $(this).data('sort');
}).toArray();
if (typeof opts.pushState == 'undefined' || opts.pushState) {
updatePageState(filters, sorting);
}
$container.isotope({
filter: filters.join(''),
sortBy: sorting
});
});
//////////////////////////////////////////////////////
// Set a handler for history state change
History.Adapter.bind(window, 'statechange', function () {
var state = History.getState();
updateFiltersFromObject(state.data);
$container.trigger('filter-update', {pushState: false});
});
////////////////////////////////////////////////////////////////////////////////////
/// HELPERS FUNCTIONS
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Build an URI to get the query string to update the page history state
updatePageState = function (filters, sorting) {
var uri = new URI('');
$.each(filters, function (idx, filter) {
var match = /^\.([^-]+)-(.*)$/.exec(filter);
if (match && match.length == 3) {
uri.addSearch(match[1], match[2]);
}
});
$.each(sorting, function (idx, sort) {
uri.addSearch('sort', sort);
});
History.pushState(uri.search(true), null, uri.search() || '?');
};
//////////////////////////////////////////////////////
// Select the clicked (or from URL) choice in the dropdown menu
selectChoice = function ($link, opts) {
var $group = $link.closest('.btn-group'),
$li = $link.closest('li'),
mediumFilter = $group.length == 0;
if (mediumFilter) {
$group = $link.closest('.js-filter');
}
if (opts.click) {
$li.toggleClass('active');
} else {
$li.addClass('active');
}
$group.find('.active').not($li).removeClass('active');
if (!mediumFilter) {
if ($group.find('li.active').length == 0) {
$group.find('li:first-child').addClass('active');
}
$group.find('.selection').html($group.find('li.active a').first().html());
}
};
//////////////////////////////////////////////////////
// Update filters by the values in the current URL
updateFiltersFromObject = function (values) {
if ($.isEmptyObject(values)) {
$('.js-filter').each(function () {
selectChoice($(this).find('li').first(), {click: false});
});
selectChoice($('.js-sort').find('li').first(), {click: false});
} else {
$.each(values, function (key, val) {
val = typeof val == 'string' ? [val] : val;
$.each(val, function (idx, v) {
var $filter = $('[data-filter=".' + key + '-' + v + '"]'),
$sort = $('[data-sort="' + v + '"]');
if ($filter.length > 0) {
selectChoice($filter, {click: false});
} else if ($sort.length > 0) {
selectChoice($sort, {click: false});
}
});
});
}
};
////////////////////////////////////////////////////////////////////////////////////
/// Initialization
////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////
// Initialize Isotope
$container.imagesLoaded( function(){
$container.isotope({
masonry: { resizesContainer: true },
itemSelector: '.item',
getSortData: {
date: function ( itemElem ) {
var date = $( itemElem ).find('.thedate').text();
return parseInt( date.replace( /[\(\)]/g, '') );
},
area: function( itemElem ) { // function
var area = $( itemElem ).find('.thearea').text();
return parseInt( area.replace( /[\(\)]/g, '') );
},
price: function( itemElem ) { // function
var price = $( itemElem ).find('.theprice').text();
return parseInt( price.replace( /[\(\)]/g, '') );
}
}
});
var total = $(".next a:last").html();
var pgCount = 1;
var numPg = total;
pgCount++;
$('.goback').click(function() {
$('.isotope').empty();
$('.isotope').load("/page/<?php echo --$paged;?>/?<?php echo $_SERVER["QUERY_STRING"]; ?>.html .isotope > *");
$container.append( $items ).isotope( 'insert', $items, true );
$( 'div.box' ).addClass( 'isotope-item' );
});
$('.goforward').click(function(event) {
var href = $(this).attr('href');
$('.isotope').empty();
$('.isotope').load(href +".html .isotope > *");
$( 'div.box' ).addClass( 'isotope-item' );
$container.append( $items ).isotope( 'insert', $items, true );
event.preventDefault();
});
});
//////////////////////////////////////////////////////
// Initialize counters
$('.stat-count').each(function () {
var $count = $(this),
filter = $count.closest('[data-filter]').data('filter');
$count.html($(filter).length);
});
//////////////////////////////////////////////////////
// Set initial filters from URL
updateFiltersFromObject(new URI().search(true));
$container.trigger('filter-update', {pushState: false});
});
});
4 个解决方案
#1
1
Have you checked the following link:
你检查了以下链接：
https://codepen.io/Igorxp5/pen/ojJLQE
https://codepen.io/Igorxp5/pen/ojJLQE
It has a working example of isotope with pagination.
它有一个同位素和分页的工作实例。
Have a look at the following block of code in the JS section in particular.
请特别注意JS部分中的以下代码块。
var $container = $('#container').isotope({
itemSelector: itemSelector,
masonry: {
columnWidth: itemSelector,
isFitWidth: true
}
});
#2
0
Check below link if usefull
如果有用，请检查以下链接
https://mixitup.kunkalabs.com/extensions/pagination/
You can also use lazy loder for pagination.
你也可以使用懒惰的加入者进行分页。
Hope this'll help you
希望这会对你有所帮助
#3
0
codepen.io/Igorxp5/pen/ojJLQE
codepen.io/Igorxp5/pen/ojJLQE
This is work fine for me just a little bit questions How to adding next / prev to pagination and how to add active class to pagination?
这对我来说工作正常只是一些问题如何将next / prev添加到分页以及如何将活动类添加到分页？
and the last thing "is missing or malformed." this text is appear after my pagination menu I don't know what it's that mean.
最后一件事“缺失或畸形”。这个文字出现在我的分页菜单之后我不知道它是什么意思。
#4
-2
<a href="http://codepen.io/Igorxp5/pen/ojJLQE"></a>I think this will help you.
我想这会对你有所帮助。
Refer this URL
请参阅此URL
#1
1
Have you checked the following link:
你检查了以下链接：
https://codepen.io/Igorxp5/pen/ojJLQE
https://codepen.io/Igorxp5/pen/ojJLQE
It has a working example of isotope with pagination.
它有一个同位素和分页的工作实例。
Have a look at the following block of code in the JS section in particular.
请特别注意JS部分中的以下代码块。
var $container = $('#container').isotope({
itemSelector: itemSelector,
masonry: {
columnWidth: itemSelector,
isFitWidth: true
}
});
#2
0
Check below link if usefull
如果有用，请检查以下链接
https://mixitup.kunkalabs.com/extensions/pagination/
You can also use lazy loder for pagination.
你也可以使用懒惰的加入者进行分页。
Hope this'll help you
希望这会对你有所帮助
#3
0
codepen.io/Igorxp5/pen/ojJLQE
codepen.io/Igorxp5/pen/ojJLQE
This is work fine for me just a little bit questions How to adding next / prev to pagination and how to add active class to pagination?
这对我来说工作正常只是一些问题如何将next / prev添加到分页以及如何将活动类添加到分页？
and the last thing "is missing or malformed." this text is appear after my pagination menu I don't know what it's that mean.
最后一件事“缺失或畸形”。这个文字出现在我的分页菜单之后我不知道它是什么意思。
#4
-2
<a href="http://codepen.io/Igorxp5/pen/ojJLQE"></a>I think this will help you.
我想这会对你有所帮助。
Refer this URL
请参阅此URL