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.

Cabriolet

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

Gat

Thank you for answer, but count service return correct number of all periods and that isn't 10 or less which could cause hidden buttons. Problem is with jquery promise object and way of handling it by me. Recently I done this by manully pagination and default templating in angular. Your suggestion with returning of all periods and get length from returned array isn't very efficient solution. Lazy mode is better for me. – Cabriolet

@Cabriolet Take a better look at diablo's answer above. He is not suggesting getting all results from the server and using the Array length property. Instead he suggests returning a json Object with two properties. The results prop will hold the Array (page) and the total (no length) will hold the server count(). You just need to just your server side login if possible. – Ouidaouija

@clarethis I agree. Diablo answer was incorrectly interpreted by me. – Cabriolet

Answer 2

Did you try to use #ngTasty server side pagination?

It's way easier.

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

Aquifer

Answer 3

look the downside url, hope this can help you:

var Api = $resource('/data');
    this.tableParams = new NgTableParams({
      page: 1, // show first page
      count: 10 // count per page
    }, {
      filterDelay: 300,
      getData: function(params) {
        // ajax request to api
        return Api.get(params.url()).$promise.then(function(data) {
          alert("1111");
          params.total(90);
          return data.results;
        });
      }
    });
  }

Corwun