ember.js - examples - simple pagination javascript example

Ember pagination full example

Question

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.

Answer 1

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

Answer 2

Es posible que desee comprobar este módulo npm para una implementación de paginación simple en Ember: Ember CLI Paginación simple

Answer 3

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.

Answer 4

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

https://github.com/toranb/ember-pagination-example