流星js自定义分页 [英] Meteor js custom pagination

问题描述

我需要一个支持.我在YouTube教程之后写了一个分页，除了重新返回时效果很好.它只有2个按钮previous和next，单击下一个按钮时效果很好，但是上一个按钮仅向后退一次.假设我在集合中有20条记录，每次显示5条，下一个按钮可以转到第四页的末尾，但是上一个按钮不会向后退一步.请问我该怎么做才有分页经验?只要用户单击，上一个按钮就应该导航到最后一页.

分页按钮事件:

 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 );
  }
});
 

出版物:

 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;
    }
  }
});
 

订阅:

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

Blaze分页按钮:

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

模板助手:

 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');
    }
  }
}
 

解决方案

您总共有6个文档，每页2个文档，共3页.

您在previous按钮单击处理程序中的if条件阻止您进入第一页:

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

对于第二页，skip将等于2，并且在下一次单击时，此条件将是false，从而防止返回.

在第3页上时-您只能在第2页上进行操作，从而产生一种印象，即该按钮只能使用一次.

应该是这样的:

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

I kindly need a support. 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. Please what am I to do to 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');
    }
  }
}

解决方案

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 ) {
  ...
}

这篇关于流星js自定义分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！