Question

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

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

有没有办法做到这一点？

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

谢谢，豪伊

Answer 1

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

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

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

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

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

我正好使用 Bootstrap 以及 Bootpag 寻呼机的customized version接受 itemsPerPage 和 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;
};

ħ

jQuery Isotope 2.1分页

1 个答案: