ember.js - examples - simple pagination javascript example
Ember pagination full example (4)
Me preguntaba si hay un ejemplo completo que podría demostrar cómo podemos usar la paginación con ember.js
Tengo una tabla que tiene muchas filas, por lo que quiero usar la paginación para ayudar al usuario con el análisis de datos.
Ya he visto el Ember.PaginationSupport.js pero no puedo encontrar una manera de trabajar con esto en una vista html.
Después de algunas mejoras y la ayuda de mi amigo Edgar, se nos ocurrió una solución muy simple que podías consultar en GitHub
básicamente extendimos Ember.ArrayProxy para lograr la paginación y también agregamos acciones para administrar las páginas previas y siguientes.
Gracias a @Toran Billups por su solución y algo @Jeremy Brown
Es posible que desee comprobar este módulo npm para una implementación de paginación simple en Ember: Ember CLI Paginación simple
He tenido un gran éxito con https://github.com/notmessenger/emberjs-pageable pero ahora Ember tiene algo incorporado de forma nativa en ArrayController llamado arrangedContent que hace esto. También puede especificar órdenes de clasificación predeterminadas en campos específicos en sus modelos. Ember.js y arrangedContent hablan un poco sobre esto.
El ejemplo actualizado a continuación funciona con ember.js RC1 - 14/03/2013
Primero necesita agregar una paginación como Mixin ya que aún no existe en el núcleo de la brasa
var get = Ember.get, set = Ember.set;
Ember.PaginationMixin = Ember.Mixin.create({
pages: function() {
var availablePages = this.get(''availablePages''),
pages = [],
page;
for (i = 0; i < availablePages; i++) {
page = i + 1;
pages.push({ page_id: page.toString() });
}
return pages;
}.property(''availablePages''),
currentPage: function() {
return parseInt(this.get(''selectedPage''), 10) || 1;
}.property(''selectedPage''),
nextPage: function() {
var nextPage = this.get(''currentPage'') + 1;
var availablePages = this.get(''availablePages'');
if (nextPage <= availablePages) {
return Ember.Object.create({id: nextPage});
}else{
return Ember.Object.create({id: this.get(''currentPage'')});
}
}.property(''currentPage'', ''availablePages''),
prevPage: function() {
var prevPage = this.get(''currentPage'') - 1;
if (prevPage > 0) {
return Ember.Object.create({id: prevPage});
}else{
return Ember.Object.create({id: this.get(''currentPage'')});
}
}.property(''currentPage''),
availablePages: function() {
return Math.ceil((this.get(''content.length'') / this.get(''itemsPerPage'')) || 1);
}.property(''content.length''),
paginatedContent: function() {
var selectedPage = this.get(''selectedPage'') || 1;
var upperBound = (selectedPage * this.get(''itemsPerPage''));
var lowerBound = (selectedPage * this.get(''itemsPerPage'')) - this.get(''itemsPerPage'');
var models = this.get(''content'');
return models.slice(lowerBound, upperBound);
}.property(''selectedPage'', ''content.@each'')
});
A continuación, debe utilizar el mixin anterior en su ArrayController como tal
PersonApp.PersonController = Ember.ArrayController.extend(Ember.PaginationMixin, {
itemsPerPage: 2
});
A continuación, puede agregar una vista de ayuda simple para mostrar los números de página como etiquetas li
PersonApp.PaginationView = Ember.View.extend({
templateName: ''pagination'',
tagName: ''li'',
page: function() {
return Ember.Object.create({id: this.get(''content.page_id'')});
}.property()
});
Sus rutas pueden ser similares a esto (página anidada debajo del padre)
PersonApp.Router.map(function(match) {
this.resource("person", { path: "/" }, function() {
this.route("page", { path: "/page/:page_id" });
});
});
PersonApp.PersonPageRoute = Ember.Route.extend({
model: function(params) {
return Ember.Object.create({id: params.page_id});
},
setupController: function(controller, model) {
this.controllerFor(''person'').set(''selectedPage'', model.get(''id''));
}
});
PersonApp.PersonRoute = Ember.Route.extend({
model: function(params) {
this.controllerFor(''person'').set(''selectedPage'', 1);
return PersonApp.Person.find();
}
});
Y, por último, debe agregar algunos html para mostrarlo
<script type="text/x-handlebars" data-template-name="application">
<div id="main">
{{ outlet }}
</div>
</script>
<script type="text/x-handlebars" data-template-name="person">
<table width="250px">
<thead>
<th>id</th>
<th>username</th>
</thead>
<tbody>
{{#each person in controller.paginatedContent}}
<tr>
<td>{{person.id}}</td>
<td>{{view Ember.TextField valueBinding="person.username"}}</td>
</tr>
{{/each}}
</tbody>
</table>
<div name="prev">{{#linkTo ''person.page'' prevPage target="controller"}}Prev{{/linkTo}}</div>
<ul class="pagination gui-text">
{{#each pages}}
{{view PersonApp.PaginationView contentBinding="this"}}
{{/each}}
</ul>
<div name="next">{{#linkTo ''person.page'' nextPage target="controller"}}Next{{/linkTo}}</div>
</script>
<script type="text/x-handlebars" data-template-name="pagination">
{{#with view}}
{{#linkTo ''person.page'' page}}
{{content.page_id}}
{{/linkTo}}
{{/with}}
</script>
Aquí hay un proyecto de trabajo completo con esto en acción si quieres verlo funcionar