react - Meteor js paginación personalizada
meteor react (1)
Tiene 6 documentos en total con 2 documentos por página, 3 páginas en total.
Su condición if
en el controlador de clic de botón previous
impide ir a la primera página:
if (Session.get(''skip'') > 2 /* testing */ ) {
...
}
Para la segunda página, el skip
será igual a 2
y en el siguiente clic, esta condición será false
, lo que impedirá que regrese.
Cuando está en la 3ª página, puede continuar solo 2º, creando una impresión de que el botón solo funciona una vez.
Debería ser así:
if (Session.get(''skip'') > 0 ) {
...
}
Amablemente necesito un apoyo. He escrito una paginación siguiendo un tutorial de YouTube, que funciona bien, con la excepción de cuando retrocedemos. Tiene solo 2 botones, previous
y next
, cuando se hace clic en el siguiente botón funciona bien, pero el botón anterior solo retrocede una vez. Digamos que tengo 20 registros en las colecciones paginadas para mostrar 5 a la vez, el siguiente botón podría ir al final de la cuarta página pero el botón anterior no pasaría un paso atrás. ¿Qué debo hacer para tener experiencia en paginación? El botón anterior se supone que debe navegar a la última página siempre que el usuario haga clic.
Eventos para los botones de paginación :
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 );
}
});
Publicación :
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;
}
}
});
Suscripción :
Session.setDefault(''skip'', 0);
Tracker.autorun(function () {
Meteor.subscribe(''userSchools'', Session.get(''skip''));
});
Botones de paginación Blaze :
<ul class="pager">
<li class="previous"><a href="#">Previous</a> </li>
<li class="next"><a href="#">Next</a> </li>
</ul>
Ayudante de plantillas :
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'');
}
}
}