ngtable server side pagination

问题

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.

回答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

回答2:

Did you try to use #ngTasty server side pagination?

It's way easier.

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

回答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;
        });
      }
    });
  }

来源：https://stackoverflow.com/questions/24106464/ngtable-server-side-pagination

标签

ajax

angularjs

pagination

ngtable