jQuery同位素2.1分頁

Question

我想分頁使用jQuery同位素2.1的項目。我有一套可以過濾的項目。我希望能夠使用範圍來限制顯示的項目。例如，如果我想每頁顯示10個項目，我會告訴它在第2頁的過濾設置中顯示11到20之間的所有項目。

爲了使事情更加複雜，可以對物品進行排序。

有沒有辦法做到這一點？

我曾考慮切換過濾項目上的「活動」類，然後使用JS和CSS，我只會顯示當前範圍內的「活動」類的項目。不知道這是否是最有效的方法。

感謝， 豪伊

Answer 1

我通過原型的_filter方法來解決這個問題。

首先，在嘗試過濾項目之前，我會調用_sort方法，因爲排序會影響每個頁面上顯示的項目。

然後，我增加了一些參數的選項對象，如頁和items_per_page的。使用這兩個值，我可以計算預期的頁面的第一個和最後一個項目。即使沒有必要進行分頁，我還添加了一個名爲activeClass的參數，其默認爲活動並將其添加到所有匹配的項目。此外，我在每個項目中添加了奇數項目和一個偶數項目類別，以便在列表視圖中，例如，我可以交替排列顏色。

最後，我設置一個屬性上此對象調用all_matches到整套過濾的項目。這樣我可以計算我的尋呼機的總頁數。然後我只返回當前頁面的過濾項目。

在layoutComplete事件，我用的是頁和items_per_page的值從選項對象，以計算第一和最後一個項目，並更新我的傳呼機。

我碰巧使用引導與Bootpag尋呼機，其接受itemsPerPage和TOTALITEMS的customized version沿。

您可以查看codepen 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; 
}; 

ħ