Vestride / Shuffle

Categorize, sort, and filter a responsive grid of items

Home Page:https://vestride.github.io/Shuffle/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question: Load more without using ajax

Jack94son opened this issue · comments

Hi,

Thanks for the library and I been using this library almost all my projects.

Wondering, is there any way/suggestion/sample for loading more item without using ajax (locally)?
On first load its work as but when clicked on other filter then the items must be all show instead on hiding.

Below are my function:

_loadMore():
var $container = 'lists',
	$itemPerPage = $j('#' + $container).data("show-per-page"),
	$visibleItems = $j('#' + $container).find('.shuffle-item--visible'),
	$totalVisibleItems = this.shuffle.visibleItems,
	$hiddenItem = $j('#' + $container).find('.shuffle-item--visible:hidden');

if ($totalVisibleItems > $itemPerPage) {
	$visibleItems.hide();
	$visibleItems.slice(0, $itemPerPage).show();
	$j('.loadmore').show();
	document.querySelector('.loadmore').addEventListener('click', this.loadItems.bind(this));
} else {
	$visibleItems.show();
	$j('.loadmore').hide();
}

loadItems():
$hiddenItem.slice(0, $itemPerPage).fadeIn().each(function() {
	window.customshuffle = new CustomShuffle(document.getElementById($container));
});
if ($j('.shuffle-item--visible:hidden').length === 0) {
	$j('.loadmore').fadeOut("slow");
}

Appreciate for an advice/help!