meteorpaginationmeteor-blazemeteor-collections

Meteor js custom pagination


I have written a pagination following a YouTube tutorial, which works fine with the exception of when going backwards again. It has only 2 buttons, previous and next, when the next button is clicked it works fine but the previous button only go backwards once.

Let's say I have 20 records in the collections paginated to display 5 at a time, the next button could go to the end to the fourth page but the previous button would not go pass one step backwards. How can I have pagination experience? The previous button is suppose to navigate to the last page as long as the user clicks.

Events for the pagination buttons:

Template.myviews.events({
  'click .previous': function () {
    if (Session.get('skip') > 5 ) {
      Session.set('skip', Session.get('skip') - 5 );
    }
  },
  'click .next': function () {
    Session.set('skip', Session.get('skip') + 5 );
  }
});

Publication:

Meteor.publish('userSchools', function (skipCount) {
  check(skipCount, Number);
  user = Meteor.users.findOne({ _id: this.userId });
  if(user) {
    if(user.emails[0].verified) {
      return SchoolDb.find({userId: Meteor.userId()}, {limit: 5, skip: skipCount});
    } else {
      throw new Meteor.Error('Not authorized');
      return false;
    }
  }
});

Subscription:

Session.setDefault('skip', 0);
Tracker.autorun(function () {
  Meteor.subscribe('userSchools', Session.get('skip'));
});

Blaze pagination buttons:

<ul class="pager">
  <li class="previous"><a href="#">Previous</a> </li>
  <li class="next"><a href="#">Next</a> </li>
</ul>

Template helper:

RenderSchool: function () {
  if(Meteor.userId()) {
    if(Meteor.user().emails[0].verified) {
      return SchoolDb.find({userId: Meteor.userId()}).fetch().reverse();
    } else {
      FlowRouter.go('/');
      Bert.alert('Please verify your account to proceed', 'success', 'growl-top-right');
    }
  }
}

Solution

  • You have 6 documents total with 2 docs per page, 3 pages in total.

    Your if condition in previous button click handler prevents you from going to the first page:

    if (Session.get('skip') > 2 /* testing */ ) {
      ...
    }
    

    For 2nd page skip will equal 2 and on the next click this condition will be false, preventing from going back.

    When you're on the 3rd page — you can go on 2nd only, creating an impression that button works only once.

    It should be like this:

    if (Session.get('skip') > 0 ) {
      ...
    }