Dynamic pagination using ember

Question

We use EmberJs to make up our webapp. I have a pagination code that displays 5 items per each from a total of 100 items. All the thousand 100 items are taken from a single API call and will be passed to the 'model' as an array ; and the controller will slice the array based on the page no and page size.

I want to make the framework dynamic, which means I should be sending an API call to the server with page no and page size inputs, and get the specific response, for each next-page click.

My code goes here.

Router:

App.AccountPointsRoute = Ember.Route.extend({
    totalTransactions: null,
    model: function(params) {
        var page = this.controllerFor('accountPoints').get('page');
        var pointsURL= App.config.getEndpoint()+'/account/points';
        var getUserDetailsForViewUserAccount = function(){
            if(params.email){
                return Ember.$.getJSON(App.config.getEndpoint()+'/admin/userInfoByEmail?email='+params.email).then(function(data){
                    return data.payload.user.totalPoints;
                })
            }
        }
        var transactionURL = App.config.getEndpoint()+'/account/transactions?page='+page+'&pageSize=2&raceId=0&selectedDate='+ App.current_month() +'%20'+App.current_year();
        if(params.email){
             pointsURL = App.config.getEndpoint()+'/admin/points?email='+params.email;
             transactionURL = App.config.getEndpoint()+'/admin/transactions?page=1&pageSize=100&raceId=0&selectedDate='+ App.current_month() +'%20'+App.current_year()+'&email='+params.email;
        }
        var self = this;
        return Em.RSVP.hash({
            points:  Ember.$.getJSON(pointsURL).then(function(data){
                return data.payload;
            }),
            transactions: Ember.$.getJSON(transactionURL).then(function(data){
                self.set('totalTransactions', data.payload.totalRecords)
                return data.payload.logs;
            }),
            userPoints:getUserDetailsForViewUserAccount(),
        });
    },
    setupController: function(controller, models) {
        controller.set('points', models.points);
        controller.set('transactions', models.transactions);
        controller.set('userPoints',models.userPoints);
        controller.set('model', models.transactions);
        controller.set('totalRecords', this.get('totalTransactions'));
    }
});

And the Controller for this is

App.AccountPointsController = App.PaginationController.extend({
    needs:['application'],
    queryParams:['email', 'page'],
    page : 1,
    pageSize: 5,
    numPages: function () {
        var pageSize = this.get('pageSize'),
            //l = this.get('length');
            l = this.get('totalRecords');
        console.log("numPages "+ Math.ceil(l / pageSize));
        return Math.ceil(l / pageSize);
    }.property('pageSize','length'),

    paged: function() {
        var page = this.get('page');
        var transactions = this.get('model');
        var page = this.get('page') - 1,
        pageSize = this.get('pageSize'),
        start = page * pageSize,
        end = start + pageSize
        length = transactions.get('length');
        transactions = transactions.slice(start,end);
        this.set('length', length);
        return transactions;
    }.property('email', 'page', 'model', 'pageSize','pages'),

}); 

What do I need to code to make an API call inside the 'paged' method to get page-number specific response from server. I look forward to the answer.

Answer 1

You don't want to make an API call from your "paged" method because that's in the controller. Your route should take care of the API calls to retrieve data for your model.

What you want is for your links in your template to include query params specifying the desired page and pagesize. So something like:

<div class ="tableNavigation">
    {{#link-to 'accounts' (query-params page=previousPage pagesize=currentPageSize)}}Previous Page{{/link-to}}
    {{#link-to 'accounts' (query-params page=nextPage pagesize=currentPageSize)}}Next Page{{/link-to}}
    Current Page: {{page}}
    Next: {{nextPage}}
    Prev: {{previousPage}}
</div>

Then in your route include params.nextPage and params.currentPageSize in your query strings for your AJAX calls. Note that only changing query params won't usually trigger another API call, so also include in your route:

queryParams: {
        pagesize: {
            refreshModel: true
        },
        page: {
            refreshModel: true
        }
    },

Then in your controller include queryParams: ['page', 'pagesize'] and functions like this but with bounds checking:

nextPage: function() {
        return (parseInt(this.get('page')) + 1);
}.property('page'),

previousPage: function() {
        return (parseInt(this.get('page')) - 1);
}.property('page'),