CODEWITHSUNDEEP
javascriptpaginationember.js
johncho
johncho

Reputation: 641

Ember.js and Pagination

So the issue is that, I'm trying to load quite a bit of entries from a JSON data file (about 5000 entries), into table rows, and I was wondering what would be the best way to handle pagination.

I'm aware of jPages, and other plug-ins, but as I'm fairly new to Ember.js, I wanted to know if there was an Ember way of making this work. I can kinda think of passing the total amount of the entries, manually loop a render through a set amount, but I don't think that would be very portable to other areas where I would need pagination.

Should I look into Routing?

Upvotes: 4

Views: 2605

Answers (2)

johncho
johncho

Reputation: 641

So I turned towards creating a mixin that looks a bit like this

App.PaginationHelper = Em.Mixin.create({
    pageSize: 10,
    totalLines: 20,
    rangeStart: 1,
    rangeStop: function () {
        var rangeStop = get(this, 'rangeStart') + get(this, 'pageSize') - 1;
        totalLines = get(this, 'totalLines');
        if (rangeStop < totalLines) {
            return rangeStop;
        }
        return totalLines;
    }.property(),

    currentPage: function () {
        return get(this, 'rangeStop') / get(this, 'pageSize');
    }.property(),

    totalPages: function () {
        return Math.ceil(get(this, 'totalLines') / get(this, 'pageSize'));
    }.property(),
[...]

And so on, then created a separate view for it, as this way I can reuse it, and even reuse it many times on a single page, by creating a container div with a unique id to append each instantiation of the view to append to.

So I can repeat the next lines with new variables, but reuse the template by keeping the templateName the same.

var firstCaseOfPaginationViews = Em.View.create({
    templateName: 'pagination'
    [...]
});

firstCaseOfPaginationViews.appendTo('#transaction_pagination');

And now, the mixin can now be simply included to any controller that I need pagination for. I'm hoping this is the correct way of doing things in Ember, it seems like this will be the way that I'll adopt until I refactor and revisit at a later date.

Upvotes: 4

sabithpocker
sabithpocker

Reputation: 15566

If you look into routing you can do something like (just a concept, not sure if this is the right way)

App = Ember.Application.create({
        Router : Ember.Router.extend({
            root : Ember.Route.extend({
                pages : Ember.Route.extend({
                    route : '/page/:pageNo',
                    deserialize : function (router, params) {
                    var pageNumber = params.pageNo;
                    var contentToBeShown = //slice the relevant- 
                    //part from your content according to pageNo
                    <active>Controller.connectOutlet({
                        name: 'controllername',
                        outletName: 'outletshowingpages',
                        context: //theslicedarray
                        });
                    }
                    //add serialize also
                })
            })
        })
    });
App.initialize();

More routing here : https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/router.js

Upvotes: 2

Related Questions