How to use a normal pagination with jQuery Isotope? - joomla

Question

I've implemented Isotope this way http://jsfiddle.net/circlecube/LNRzZ/ to my Joomla website. Sorting and filtering work perfeclty but only in the current page.
I would like to sort/filter all items but display only 20 items per page. I wish to keep a numeric navigation, like this http://tutorials.vinnysingh.co/quicksand/.
Can Isotope handle this or should I use another plugin? Any help is greatly appreciated. Thanks in advance.
Here is my full code:
jQuery( document ).ready( function ($) {
// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
getSortData : {
author : function ( $elem ) {
return $elem.find('.author').text();
},
city : function ( $elem ) {
return $elem.find('.city').text();
},
country : function ( $elem ) {
return $elem.find('.country').text();
},
price : function( $elem ) {
return parseFloat( $elem.find('.price').text().replace( /[\(\)]/g, '') );
},
rating : function ( $elem ) {
return parseInt( $elem.find('.rating').text(), 10 );
},
review : function ( $elem ) {
return parseInt( $elem.find('.review').text(), 10 );
},
perfDate: function (element) {
// parse out the performance date from the css classes
var classList = element.attr('class').split(/\s+/);
var dateClassPrefix = 'date-';
var date;
$.each(classList, function(index, cssClassName){
if (cssClassName.substring(0, dateClassPrefix.length) === dateClassPrefix) {
// Should be a date in format 'yyyy-MM-dd'
var dateString = cssClassName.substring(dateClassPrefix.length);
date = SF.parseDate('dd/mm/yyyy').getTime();
}
});
return date;
}
}
});
$('#sort-by a').click(function(){
// get href attribute, minus the '#'
var sortName = $(this).attr('href').slice(1);
$('#container').isotope({ sortBy : sortName });
return false;
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
if ($this.hasClass('lock')){
//return false;
}
else if ($this.hasClass('asc')){
$this.removeClass('asc').addClass('desc');
}
else if ($this.hasClass('desc')){
$this.removeClass('desc').addClass('asc');
}
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ($this.hasClass('asc') || $this.hasClass('desc'))
options[ 'sortAscending' ] = $this.hasClass('asc');
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
});

Answer 1

Isotope doesn't do pagination. You'll need to implement the pagination in Joomla.