CODEWITHSUNDEEP
ajaxangularjspaginationngtable
bmlynarczyk
bmlynarczyk

Reputation: 808

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.

Upvotes: 6

Views: 9926

Answers (3)

user6207717
user6207717

Reputation: 1

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

Upvotes: 0

zizzamia
zizzamia

Reputation: 241

Did you try to use #ngTasty server side pagination?

It's way easier.

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

Upvotes: 4

Diablo
Diablo

Reputation: 3418

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

Upvotes: 8

Related Questions