Meteor Pagination

This enables simple pagination in your Meteor app. There are two key parts:

1. Limiting cursor results to only what should be displayed on the current page.
2. Displaying page links at the bottom, the format of which can be modified using styles.

Basics

Displaying only the current page's cursor results is easy. In the client, use Pagination.collection(). This will enable you to insert just those results into each page, and it automatically changes when the page changes.

1Pagination.collection(cursor, options);

It's important to note that cursor is actually the returned values of Meteor.Collection.find(). So if you have a collection named People, you might use Pagination.collection() like this:

1Pagination.collection(People.find({}).fetch(), options);

To display page links on the page (typically at the bottom), use Pagination.links() in the client like so:

1Pagination.links(prependRoute, cursorCount, options);

Pagination.create() returns something like this:

1<div class="pagination">
2    <a href="/browse/1">Prev</a> 2 of 4 <a href="/browse/3">Next</a>
3</div>

It's smart enough to know when not to include Previous and Next links, to append a trailing slash to the prepended route when necessary, and to determine the total number of pages.

Options

It's recommended that you set options before or with your first call to either Pagination.collection() or Pagination.links(), as changing them after calling one or the other will have undesired effects. Once set on either, the options will apply to both.

currentPage

Set the current page by using {currentPage: 1} as your options to Pagination.collection() or Pagination.links(). This will determine which results are displayed as well as influence the links at the bottom of the page.

Optionally, it can be set directly like this:

Pagination.currentPage(1);
Pagination.collection(cursor);

The currentPage option defaults to 1.

perPage

Set the number of results you want to display per page. This will impact both Pagination.collection() and Pagination.links().

Pagination.perPage(10);

The perPage option defaults to 10.

Style

There are two styles built in, which you can set using Pagination.style() like so:

Pagination.style('bootstrap');

1. 'one-of-x' (default)

```html
<div class="pagination"><a href="/browse/1">Prev</a> 2 of 4 <a href="/browse/3">Next</a></div>
```

2. 'bootstrap', to work with Bootstrap pagination

```html
<div class="pagination">
  <ul>
    <li><a href="/browse/1">«</a></li>
    <li><a href="/browse/1">1</a></li>
    <li><a href="/browse/2" class="active">2</a></li>
    <li><a href="/browse/3">3</a></li>
    <li><a href="/browse/4">4</a></li>
    <li><a href="/browse/3">»</a></li>
  </ul>
</div>
``` 

Demonstration

I'll be hooking this up to router-with-notifications to keep track of the current page, but it should work similarly with any other router.

1if (Meteor.isClient) {
2  Meteor.Router.add({
3    '/browse/:page': function (page) {
4      // We want to get the current page to pass it into Pagination
5      Session.set('page', page);
6      return 'browse';
7    }
8  });
9
10  Template.browse.results = function () {
11    return Pagination.collection(People.find({}).fetch());
12  }
13
14  Template.browse.pagination = function () {
15    // Pagination.links(prependRoute, cursorCount, options);
16    return Pagination.links('/browse', People.find({}).count(), {currentPage: Session.get('page'), perPage: 8});
17  }
18}

In the template:

<template name="browse">
  {{#each results}}
    {{> person}}
  {{/each}}

  {{{pagination}}}
</template>

Note that pagination is surrounded by three '{{{' brackets. This inserts the page numbers into the page as HTML, rather than as text.

If all goes well, you should see something like this on the page:

1<div class="pagination"><a href="/browse/1">Prev</a> 2 of 4 <a href="/browse/3">Next</a></div>

If you're on the first page, there's no Previous button. If you're on the last page, there's no next button. If there's only one page, there are no buttons.

API

collection

1Pagination.collection(cursor, options)

Cursor is the result of running Meteor.Collection.find().

links

1Pagination.links(prependRoute, cursorCount, options)

This generates the page numbers and previous/next buttons.

prependRoute: string. cursorCount, currentPage, and perPage: integers.

totalPages

1Pagination.totalPages(cursorCount, perPage)

Calculates the total number of pages required for your cursor given how many you want to display on each page. Use this to build out custom solutions, piggybacking on this package's calculations.

cursorCount and perPage are integers.

style

1Pagination.style(); // Get style
2Pagination.style('bootstrap'); // Set style

Use this to change the style of the outputted HTML from Pagination.links() or to check the current style. Pass in no parameter to return the current style.

For example, Pagination.style('bootstrap') would change the style. Pagination.style() will return the current style.

style: string, either 'one-of-x' or 'bootstrap'. Defaults to 'one-of-x'.

currentPage

1Pagination.currentPage(); // Get currentPage
2Pagination.currentPage(5); // Set currentPage

perPage

1Pagination.perPage(); // Get perPage
2Pagination.perPage(15); // Set perPage

To be done

• Reactivity
• Enable infinite scrolling