Best pattern for pagination for Meteor

Question

Pattern for pagination is currently on a after 1.0 roadmap for Meteor. Are there any examples or suggestions how to do it now? So how to nicely do an infinite scroll by subscribing to new and new elements as user is scrolling to the bottom?

Tenantry

Answer 1

There is a package on atmosphere.meteor.com for pagination that should get you started

• https://github.com/egtann/meteor-pagination (Pagination)
• https://github.com/tmeasday/meteor-paginated-subscription (Pagination with publish)

The second one actually sends down one page of data at a go instead of all the data at once so if you have loads of data it might help with that. With the infinite scroll you would have to attach a manual scroll listener and put in the new data by increasing the size of a page as you scroll down (not specifically moving to page 2).

I'm a bit unsure on what pattern to use specifically because using page size might be a bit troublesome unless you're able to get it to work right with reactivity which should be possible if you're able to seperate your {{#each}} block helpers so that its for each scroll down, perhaps using Meteor.render so that the entire set of data already available isn't re-rendered.

It might also work if you put the data in div block containing a scroll overflow instead of the above so that it does re-render but their position in the scroll remains the same, in effect making the re-render unnoticable.

Cupidity

Yes, I saw first package, but it is really just a way how to render buttons. It uses fetch and requires all data to be loaded anyway. – Tenantry

Thanks for the second link. Have yet to see how to implement it together with meteor-router, but this is at least a start. – Tenantry

The second might work better because it works at demo.telesc.pe, if you use a automatic scroll instead of a load more button it would work to your spec – Cupidity

Answer 2

I recommend that you try my package, Pages: https://github.com/alethes/meteor-pages

It's extremely easy to use (you can set it up with just one line of JavaScript), yet very customizable. It features: incremental subscriptions, local cache, neighbor prefetching, request throttling, easy integration, multiple paginations per page, bootstrap 2/3 styling, failure resistance, built-in iron-router support and a lot of settings that can be modified on the fly, without reloading the page.

Trichromatic

Do your package cache output on the server side as well? So if I have a long dataset which takes time to compute, I would not want it to be computed again and again from scratch when somebody requests next page? – Tenantry

There's no built-in server-side cache because the package is currently suited only for data from Meteor's collections where MongoDB itself handles caching frequently requested data (docs.mongodb.org/manual/faq/fundamentals/…). – Trichromatic

the project seem to have been abandoned. github.com/alethes/meteor-pages/issues/31 – Justinejustinian

If anyone is still supporting this package, I would like to know just what that "one line of JavaScript" is. I looked at the examples, and their implementation is not obvious to me. Also, do we have to use CoffeeScript with it? – Vertumnus

@FullStack: The one line is simply: new Meteor.Pagination("collection_name"); – Trichromatic

If you clone the Github repository, navigate to meteor-pages/examples/basic and run the "meteor" command, you should be able to see the most simple use case. The testdata.coffee file simply generates the test data. In main.coffee, the Pagination class is initiated in one line. A template named after the paginated collection (ie. "items") is defined and added to the HTML body in main.html. It consists of the pagination body ({{> pages}}) and navigation panel ({{> pagesNav}}). That's basically all that's needed to get the package working. All features are described in the README. – Trichromatic

I use this package, I like it. Looking forward to more iron:router integration! – Chere

@Alethes. Does it support flow-router? I have tried with flow-router is not working. – Klayman