daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 520 forks source link

Pagination server side with controller aliasing #608

Closed jcugmas closed 7 years ago

jcugmas commented 7 years ago

Hey everyone,

I'm facing with a recurrent issue about this plugin. I'm using the table pagination but with a server side which sends me an object with a content and some informations about the total of elements and page, etc... etc... So for example, for the first page where the default limit is 5, I receive just 5 elements and when I go to the next page I receive the 5 next elements.

I'm using angular 1.6.4 but my project is all refactored in previson to migrate to angular 2(or 4), it means I never use $scope which is banned for the next angular versions and I'm dealing with components and aliasing controllers (controllerAs).

Like in the demo of this plugin, I put a function on the attribute mdOnPaginate which called a $resource call to get my datas. So when I click on the right arrow to go to the the next page, I do receive the datas but the table turns to an empty table with no rows...

So I don't know how to solve this or what is wrong with my code you can see below. Some help is welcomed !

<table md-table md-row-select="true" multiple="true" ng-model="vm.selected" md-progress="vm.promise">

`
<md-table-pagination md-limit="vm.query.limit" md-limit-options="vm.sizes" md-page="vm.query.page" md-total="{{vm.datas.page.totalElements}}" md-page-select="true" md-boundary-links="true" md-on-paginate="vm.getDatas"

`

var vm = this;

var vm = this; vm.getDatas = function(){ vm.promise = MessageService.getPage({page:vm.query.page,limit:vm.query.limit},success).$promise; } function success(datas){ console.log(datas); vm.datas = datas; }

jcugmas commented 7 years ago

Found the solution in #415 Just have to remove in the ng-repeat directive: | limitTo: query.limit: (query.page - 1) * query.limit

Now it works like a charm !