jQuery Isotope 2.1 分页

Question

我正在尝试使用 jQuery Isotope 2.1 对项目进行分页。我有一组可以过滤的项目。我希望能够使用范围来限制显示的项目。例如，如果我想每页显示 10 个项目，我会告诉它在第 2 页的过滤集中显示 11 到 20 之间的所有项目。

为了使事情更复杂，项目也可以排序。

有什么办法吗？

我考虑过在过滤后的项目上切换一个“活动”类，然后使用 JS 和 CSS，我只会显示当前范围内具有“活动”类的项目。不确定这是否是最有效的方法。

谢谢， 豪伊

Answer 1

我能够通过制作 _filter 方法的原型来解决问题。

首先，我在尝试过滤项目之前调用 _sort 方法，因为排序会影响每个页面上显示的项目。

然后我在 options 对象中添加了一些参数，例如 page 和 items_per_page 。使用这两个值，我可以计算出预期页面的第一项和最后一项。尽管分页不是必需的，但我还添加了一个名为 activeClass 的参数，默认为 active 并添加到所有匹配的项目中。此外，我为每个项目添加了 odd-item 和一个 even-item 类，以便在列表视图中，例如，我可以交替行颜色。

最后，我在 this 对象上设置了一个名为 all_matches 的属性，用于整个过滤项集。这样我就可以计算出寻呼机的总页数。然后我只返回当前页面的过滤项。

在 layoutComplete 事件中，我使用 page 和 items_per_page 值来自 options 对象，以便计算第一项和最后一项并更新我的寻呼机。

我碰巧正在使用 Bootstrap 和一个接受 itemsPerPage 的 Bootpag 寻呼机的 customized version和 totalItems。

您可以查看代码笔here。希望对您有所帮助。

Isotope.prototype._filter = function (items)
{
    //console.log('FILTER ' + arguments.callee.caller.toString());
    var filter = this.options.filter;
    filter = filter || '*';
    var matches = [];
    var all_matches = [];
    var hiddenMatched = [];
    var visibleUnmatched = [];
    var start, end;
    //console.log('page: ' + this.options.page + ' items per page: ' + 
    this.options.items_per_page);
    start = (this.options.page - 1) * this.options.items_per_page;
    end = this.options.page * this.options.items_per_page;
    //console.log('start: ' + start + ' end: ' + end + ' page: ' + 
    this.options.page);

    // we want to set the current value of filteredItems to all items 
    before we sort
    // we must sort first becuase we need to make sure we are showing
    // the correct results for each page in the correct order
    this.filteredItems = items;
    this._sort();
    if (this.options.activeClass === undefined ||this.options.activeClass === '')
    {
      this.options.activeClass = 'active';
    }
    var test = this._getFilterTest(filter);
    // test each item
    for (var i = 0, len = items.length; i < len; i++)
    {
       //console.log('item: ' + i, $(items[i].element).find('.grid-item-title .asset-link').text(), items[i]);
       var item = items[i];
       if (item.isIgnored)
       {
          continue;
       }
       // add item to either matched or unmatched group
       var isMatched = test(item);
       // add to matches if its a match
       if (isMatched)
       {
          all_matches.push(item);
          // before we add it to the matched set, let's make sure if falls within range
          // it needs to be part of the current page set otherwise we filter it out
        if (all_matches.length > start && all_matches.length <= end)
        {
          matches.push(item);
          var odd_even = (matches.length % 2 === 0) ? 'even-item' : 'odd-item';
          $(item.element).addClass(this.options.activeClass + ' ' + odd_even);
        } else 
        {
            // we need to reset isMatched if we're not using it on the current page
            isMatched = false;
            $(item.element).removeClass(this.options.activeClass + ' odd-item even-item');
        }
      }
      // add to additional group if item needs to be hidden or revealed
      if (isMatched && item.isHidden)
      {
         // reveal these items
         hiddenMatched.push(item);
      } else if (!isMatched && !item.isHidden)
      {
         // hide these items
         visibleUnmatched.push(item);
      }
    }
    var _this = this;

    function hideReveal()
    {
       _this.reveal(hiddenMatched);
       _this.hide(visibleUnmatched);
    }
    if (this._isInstant)
    {
      this._noTransition(hideReveal);
    } else {
      hideReveal();
    }
    // set all matches as a property on 'this' since we'll need it later to build the pager
   this.all_matches = all_matches;
   return matches;
};

H