Kurounin:Pagination

This package allows you to paginate the subscriptions over meteor's collections. It can be used in a Blaze template or in ReactJS.

Features

• Incremental subscriptions. Downloads only what is needed, not the entire collection at once. Suitable for large datasets.
• Instant changes propagation. Any document changes are instantly propagated, thanks to light-weight modifications of subscription mechanism.
• Local cache. Uses ccorcos:subs-cache to cache a maximum of 5 subscriptions, for 5 minutes.
• Easy integration. The package works out of the box. Page changes are triggered by a single reactive dictionary variable.
• Multiple collections per page. Each Pagination instance runs independently. You can even create multiple paginations for one collection on a single page.
• Bootstrap 3 compatible navigation template. Blaze template for a bootstrap 3 styled paginator.
• Bootstrap 3 compatible navigation react class. ReactJS class for a bootstrap 3 styled paginator.

Usage

In your collections file (e.g. lib/collections.js):

MyCollection = new Meteor.Collection('myCollectionName');

In your publications file (e.g. server/publications.js):

new Meteor.Pagination(MyCollection);

For Blaze template

In your template file (e.g. client/views/mylist.html):

<template name="myList">
	<div>
    	<ul>
          {{#each documents}}
              <li>Document #{{_id}}</li>
          {{/each}}
        </ul>
        {{> defaultBootstrapPaginator pagination=templatePagination limit=10 containerClass="text-center"}}
	</div>
</template>

kurounin:pagination-blaze package is needed for paginator

In your template javascript file (e.g. client/scripts/mylist.js):

Template.myList.created = function () {
	this.pagination = new Meteor.Pagination(MyCollection, {
        sort: {
            _id: -1
        }
    });
}

Template.myList.helpers({
    templatePagination: function () {
        return Template.instance().pagination;
    },
	documents: function () {
		return Template.instance().pagination.getPage();
	}
});

For ReactJS template

In your view file (e.g. client/views/mylist.jsx):

MyListPage = React.createClass({
    mixins: [ReactMeteorData],

    pagination: new Meteor.Pagination(MyCollection),

    getMeteorData: function() {
        return {
            documents: this.pagination.getPage(),
            ready: this.pagination.ready()
        };
    },

    renderDocument: function(document) {
        return (
        	<li>Document #{document._id}	</li>
        );
    },

    render: function() {
        return (
          <div>
              <ul>
                  {this.data.documents.map(this.renderDocument)}
              </ul>
              <DefaultBootstrapPaginator
                  pagination={this.pagination}
                  limit={10}
                  containerClass="text-center"
                  />
          </div>
        );
    }
});

kurounin:pagination-reactjs package is needed for paginator

Client Pagination available settings on init

• page: set the initial page, for example the page parameter from url (defaults to 1)
• perPage: set the number of documents to be fetched per page (defaults to 10)
• filters: filters to be applied to the subscription (defaults to {}, meaning no filters)
• fields: fields to be returned (defaults to {}, meaning all fields)
• sort: set the sorting for retrieved documents (defaults to {_id: -1})

Client Pagination available methods

• currentPage([int]): get/set the current page
• perPage([int]): get/set the number of documents per page
• filters([Object]): get/set the current filters
• fields([Object]): get/set the retrieved fields
• sort([Object]): get/set the sorting order
• totalItems(): get the total number of documents
• totalPages(): get the total number of pages
• ready(): checks if the subscription for the current page is ready
• getPage(): returns the documents for the current page

Blaze Paginator template

A Blaze template is provided to allow navigation through available pages:

{{> defaultBootstrapPaginator pagination=templatePagination limit=10 containerClass="text-center"}}

Available template parameters are:

• pagination: pagination instance
• limit: the maximum number of page links to display
• containerClass: optional container class for the paginator

ReactJS Paginator class

A ReactJS class is provided to allow navigation through available pages:

<DefaultBootstrapPaginator pagination={this.pagination} limit={10} containerClass="text-center" />

Available class properties are:

• pagination: pagination instance
• limit: maximum number of page links to display (defaults to 10)
• containerClass: optional container class for the paginator

Packages used as inspiration:

• alethes:pages for pagination instantiation
• aida:pagination for bootstrap paginator template