angularjsdjango-rest-frameworkng-admin

How to paginate with django-rest-framework and ng-admin


Sorry if it is a silly question since it is covered in the documentation, but I can't make it work (I am new to AngularJS).

I am trying to write an interface to my database using ng-admin on top of a django-rest-framework. The problem is that the default pagination in ng-admin is like _page=1&_perPage=30 while in django-rest-framework it's ?limit=30&offset=1. So when ng-admin tries to GET it, it recives a 301 response. In the documentation it says:

For instance, to use offset and limit instead of _page and _perPage across the entire application, use the following code:

myApp.config(['RestangularProvider', function(RestangularProvider) {
   RestangularProvider.addFullRequestInterceptor(function(element, operation, what, url, headers, params, httpConfig) {
       if (operation == 'getList' && what == 'entityName') {
           params.offset = (params._page - 1) * params._perPage;
           params.limit = params._perPage;
           delete params._page;
           delete params._perPage;
        }
        return { params: params };
    }); 
}]);

The problem is that I don't know exactly how to incorporate this into my code, which is:

var myApp = angular.module('myApp', ['ng-admin']);
myApp.config(['NgAdminConfigurationProvider', function (nga) {
    var admin = nga.application('My First Admin')
        .baseApiUrl('http://localhost:8000/CSP_site/'); 
    var algae = nga.entity('algae');
    algae.listView().fields([
        nga.field('name'),
        nga.field('id'),
    ]);
    admin.addEntity(algae);
    nga.configure(admin);
}]);

Any hint will be appreciated.

Thanks!


Solution

  • This should do it for you:

    var myApp = angular.module('myApp', ['ng-admin']);
    myApp.config(['NgAdminConfigurationProvider', 'RestangularProvider', function (nga, RestangularProvider) {
        var admin = nga.application('My First Admin')
            .baseApiUrl('http://localhost:8000/CSP_site/'); 
        var algae = nga.entity('algae');
        algae.listView().fields([
            nga.field('name'),
            nga.field('id'),
        ]);
        admin.addEntity(algae);
        nga.configure(admin);
    
        RestangularProvider.addFullRequestInterceptor(function(element, operation, what, url, headers, params, httpConfig) {
            if (operation == 'getList' && what == 'algae') {
                params.offset = (params._page - 1) * params._perPage;
                params.limit = params._perPage;
                delete params._page;
                delete params._perPage;
            }
            return { params: params };
        }); 
    }]);
    

    Added RestangularProvider in the second index of the array, which injects it as the second parameter in the .config function.

    The rest is copy paste except what == 'entityName', it became what == 'algae' as algae is the entity you added above.

    I hope that helps.