可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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; }); } }); }
