Pagination server ngtable

Question

Hello, I will try to understand how to do pagination with angularjs ngtable.

I have two web services:

localhost:8080/app/api/period The GET method returns a list of json objects. The parameters are the page number, the range of the start period and the range when stopped.

localhost:8080/app/api/period/count The GET method returns the number of periods. The parameters are passed the range of the start period and the range when it stops.

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

The params.total table params.total not updated in different ways, so the data in the table is displayed, but the pagination buttons are not displayed.

Can someone explain to me how to use $http.get inside the success listener of another $http.get in this case, to set params.total .

Answer 1

You do not see the pagination buttons, because your get () probably returns 10 for counting due to the server-side "rangeStart", "rangeStop" constraint, and if you return 10 results out of 10, then nothing needs to be broken to the pages.

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

In any case, you do not need 2 get () calls when you can return them something 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 can look like this:

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

And also you do not need the total, because you get it from seerver so remove:

 total: 0; 

The final code with two calls to get () might 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 the total number of entries, such as 1234

Good luck.

Answer 2

Have you tried using the pagination on the #ngTasty page?

It is easier.

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

Answer 3

Look down the 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; }); } }); }