In this example, I have shared how to add pagination in ember js? First you need to add a pagination like mixin as one doesn’t yet exist in the ember core.
Below is the complete working example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 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); }); |
Next you need to use the mixin above in your ArrayController like so
1 2 3 | PersonApp.PersonController = Ember.ArrayController.extend(Ember.PaginationMixin, { itemsPerPage: 2 }); |
Next you can add a simple helper view to display the page numbers as li tags
1 2 3 4 5 6 7 8 | PersonApp.PaginationView = Ember.View.extend({ templateName: 'pagination', tagName: 'li', page: function() { return Ember.Object.create({id: this.get('content.page_id')}); }.property() }); |
Your routes might look something like this (nested page under the parent)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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(); } }); |
And finally, you need to add some html to display it
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <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> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
