I have a problem with server side pagination. I am loading paged data from server. The data loads correct, however the display of the data is strange: e.g. when I move from page 1 to page 2, I can see the data from page one on the bottom of the list for a brief moment, then it disappears. In the example there is no such behavior, and I cannot find what is wrong with my code. SO here is my Controller:
angular.module('ttUserList').controller('UserListController', userListController);
userListController.$inject = ['ngTableParams', 'UserList'];
function userListController(ngTableParams, UserList) {
var vm = this;
var USERS_PER_PAGE = 10;
vm.tableParams;
vm.getData = getData;
activate();
function activate() {
vm.tableParams = new ngTableParams({
page: 1,
count: USERS_PER_PAGE,
sorting: {
name: 'asc' //initial sorting
}
}, {
total: 0,
getData: getData
})
}
function getData($defer, params) {
UserList.getUsersPage(params.url()).then(function (users) {
params.total(users.total);
$defer.resolve(users.list);
});
}
}
Html is very simple:
<table data-ng-table="userList.tableParams" data-show-filter="true" class="bordered responsive-table hoverable">
<tbody>
<tr data-ng-repeat="user in $data">
<td data-title="'Name'" data-sortable="'name'"
filter="{ 'name,surname': 'text' }">{{user.name}} {{user.surname}}</td>
<td data-title="'Login'" data-sortable="'login'"
filter="{ 'login': 'text' }">{{user.login}}</td>
<td data-title="'Location'" data-sortable="'location'"
filter="{ 'location': 'text' }">{{user.location}}</td>
<td data-title="'Details'">
<md-button class="md-raised md-primary" data-ui-sref="users.details({id: user.id})" data-translate>DETAILS</md-button>
</td>
</tr>
</tbody>
</table>
The data that comes from the service is correct. Does anyone see any problem here?