Made a pagination on the instructions in this link Link

Page breakdown works, but first all the data is loaded, and then pagination. How to make a lazy download, so that the data is loaded from the server when changing the page?

Plot of twist

<tr dir-paginate="item in model.items | itemsPerPage: 10">{{ item }} <td>{{item.username}}</td> <td>{{item.campaign}}</td> <td>{{item.state}}</td> <td>{{item.app}}</td> ... <dir-pagination-controls boundary-links="true"> </dir-pagination-controls>

    1 answer 1

    A description of how to make asynchronous data loading is described in the documentation you provided in the question.

    Example.

     .controller('UsersController', function($scope, $http) { $scope.users = []; $scope.totalUsers = 0; $scope.usersPerPage = 25; // this should match however many results your API puts on one page getResultsPage(1); $scope.pagination = { current: 1 }; $scope.pageChanged = function(newPage) { getResultsPage(newPage); }; function getResultsPage(pageNumber) { // this is just an example, in reality this stuff should be in a service $http.get('path/to/api/users?page=' + pageNumber) .then(function(result) { $scope.users = result.data.Items; $scope.totalUsers = result.data.Count }); } }) <div ng-controller="UsersController"> <table> <tr dir-paginate="user in users | itemsPerPage: usersPerPage" total-items="totalUsers" current-page="pagination.current"> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> </table>

    HTML template.

     <dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>