Search code examples
meteorpaginationiron-router

Setting up simple pagination for a meteor app using Iron router and Pagination.collection()?


Hi I have a simple app listing Posts and I am struggling to add a simple Pagination using the Iron Router along with Meteor Pagination: https://github.com/egtann/meteor-pagination

I have the following in my index.js:

if (Meteor.isClient) {
    Template.index.helpers({

        posts: function () {
            return Posts.find({}, {sort: {voteResult: -1}});
        },
}

And therefore to show the posts I am using {{#each posts}} in my index.html like this:

      <template name="index">
            <ul>
            {{#each posts}}
                <li>
                   {{text}}
                </li>
            {{/each}}       
            </ul>
<!-- pagination BOOTSTRAP CSS -->
    <!--    <div class="text-center">
            <ul class="pagination_bis">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="active_bis"><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
        </div> -->
        </template>

here is my route.js:

Router.configure({
    loadingTemplate: 'loading',
    notFoundTemplate: 'notFound',
    layoutTemplate: 'layout'
});

Router.route('/', function() {
    this.render('index');
});

My problem:

  • How can define my routes in routes.js (Iron Router) for simple pagination ?
  • How can I use the route in my index.js with a helper using the Meteor Pagination (link provided above) so that it returns only limited amount of Posts based on a perPage basis ?
  • How do I connect this logic to the view (index.html) ?

I have tried to follow the example of the link I provided above but I am so confused and the the version of Meteor they used is deprecated. Needless to say that I am new to Meteor and every input is truly appreciated. For your information the app events work fine and I manage to save and remove posts, there are more than 30 posts created for testing pagination. Thanks.


Solution

  • this is an amazing resource for understanding dynamic routes and how to use data with your routes in Meteor for complete beginners: http://meteortips.com/tutorial/iron-router-part-2/