ngtable server side pagination

Question

Hello I try figure out how make server side pagination with angularjs an ngtable.

I have two web services:

localhost:8080/app/api/period Method GET return json list of entities. As parameters are passed page number, range of start period and range when it stop.

localhost:8080/app/api/period/count Method GET return count of periods. As parameters are passed range of start period and range when it stop.

    this.tableParams = new ngTableParams({
        page: 1,
        count: 10
    }, {
        counts: [10],
        total: 0,
        getData: function($defer, params) {
            $http.get('/app/api/period', {params: {
                pageNumber:params.page() - 1,
                rangeStart:rangeStart,
                rangeStop:rangeStop}})
                .success(function(data, status) {

                   params.total($http.get('/app/api/period/count', {params: {
                        rangeStart:rangeStart,
                        rangeStop:rangeStop}}));

                   $defer.resolve(data);
                });
        }
    });

Table params.total isn't updated corectly so data in table are displayed but pagination buttons aren't visible.

Could anybody explain me how to use $http.get inside of success listener of other $http.get in this case to get correctly setted params.total.

Answer 1

You don't see pagination buttons because your get() probably returns 10 for count because of your "rangeStart", "rangeStop" limit on server side and if you return 10 results out of 10 total there is nothing to paginate.

You can return 10 results per request but params.total should always be count of all results.

Anyway you don't need 2 get() calls when you can return it in one like this :D

{
    "results": [
        {
            "id": "1437",
            "task_started_at": "2014-06-09 12:25:25",
            "task_finished_at": "2014-06-09 12:25:25"
        },
        {
            "id": "1436",
            "task_started_at": "2014-06-09 12:26:31",
            "task_finished_at": "2014-06-09 12:26:31"
        }
    ],
    "total": 1027
}

And you code could look like this:

params.total(data.total);
$defer.resolve(data.results);

And also you don't need total because you will get it from seerver so remove:

total: 0;

Finaly your code with 2 get() calls could look something like this:

this.tableParams = new ngTableParams({
        page: 1,
        count: 10
    }, {
        getData: function($defer, params) {
            $http.get('/app/api/period', {params: {
                pageNumber:params.page() - 1,
                rangeStart:rangeStart,
                rangeStop:rangeStop}})
                .success(function(data, status) {

                   params.total($http.get('/app/api/period/count'));

                   $defer.resolve(data);
                });
        }
    });

where $http.get('/app/api/period/count') returns total number of records like 1234

Good luck

Answer 2

Did you try to use #ngTasty server side pagination?

It's way easier.

http://zizzamia.com/ng-tasty/directive/table-server-side