8

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?

Mitar
  • 5,851
  • 2
  • 44
  • 68

2 Answers2

14

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.

Alethes
  • 912
  • 7
  • 9
  • 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? – Mitar Nov 08 '13 at 22:10
  • 1
    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 (http://docs.mongodb.org/manual/faq/fundamentals/#does-mongodb-handle-caching). – Alethes Nov 09 '13 at 23:55
  • the project seem to have been abandoned. https://github.com/alethes/meteor-pages/issues/31 – ian Apr 14 '14 at 07:04
  • 3
    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? – FullStack Nov 22 '14 at 11:30
  • @FullStack: The one line is simply: new Meteor.Pagination("collection_name"); – Alethes Nov 24 '14 at 21:56
  • 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. – Alethes Nov 24 '14 at 22:13
  • 1
    I use this package, I like it. Looking forward to more iron:router integration! – corvid Mar 20 '15 at 18:52
  • @Alethes. Does it support flow-router? I have tried with flow-router is not working. – Ramesh Murugesan Dec 26 '15 at 03:19
5

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

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.

Tarang
  • 72,789
  • 35
  • 206
  • 268
  • 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. – Mitar Apr 01 '13 at 07:43
  • 1
    Thanks for the second link. Have yet to see how to implement it together with meteor-router, but this is at least a start. – Mitar Apr 01 '13 at 07:49
  • The second might work better because it works at http://demo.telesc.pe/, if you use a automatic scroll instead of a load more button it would work to your spec – Tarang Apr 01 '13 at 07:55