jQuery Isotope 2.1 Pagination

Question

I'm trying to paginate items using jQuery Isotope 2.1. I have a set of items which can be filtered. I'd like to be able to limit the displayed items using a range. If I want to display 10 items per page, I'd tell it show all items between 11 and 20 in the filtered set for page 2, for example.

To make matters more complex, items can be sorted as well.

Is there any way to do this?

I thought about toggling a "active" class on the filtered items, then using JS and CSS I would only show items with the "active" class that are within the current range. Not sure if that's the most efficient approach.

Thanks, Howie

Answer 1

I was able to solve the problem by prototyping the _filter method.

Firstly, I call the _sort method before attempting to filter the items since sorting will affect which items are displayed on each page.

Then I added a few parameters to the options object, such as page and items_per_page. Using these two values, I can calculate the first and last item for the intended page. Even though it's not necessary for pagination, I also added a parameter called activeClass which defaults to active and is added to all matching items. In addition I added and odd-item and an even-item class to each item so that in a list view, for example, I can alternate the row colors.

Lastly, I set a property on the this object called all_matches to the entire set of filtered items. This way I can calculate the total number of pages for my pager. Then I return only the filtered items for the current page.

On the layoutComplete event, I use the page and items_per_page values from the options object in order to calculate the first and last item and update my pager.

I happen to be using Bootstrap along with a customized version of the Bootpag pager which accepts itemsPerPage and totalItems.

You can check out the codepen here. Hope it helps.

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