如何使用jQuery Isotope的正常分页

Question

我已经以这种方式实现了同位素，http://jsfiddle.net/circlecube/LNRzZ/到我的Joomla网站。排序和过滤工作有效，但仅在当前页面中。

我想对所有项目进行排序/过滤，但每页仅显示 20 个项目。我希望保留一个数字导航，就像这个 http://tutorials.vinnysingh.co/quicksand/。

同位素可以处理这个问题还是应该使用另一个插件？任何帮助将不胜感激。提前谢谢。

这是我的完整代码：

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

同

位素不进行分页。您需要在Joomla中实现分页。