How to implement server side pagination in angularjs using angular-ui bootstrap.?

Question

Please suggest different methods to implement server side pagination using angular js and angular-ui bootstrap. I would be paginating a table listing using ng-repeat according to current page selected in angualr-ui bootsrap pagination directive. Since we need to avoid frequent calls to server. We need to fetch 50 items from server at a time. We are showing 10 items per page.Since we need to paginate to larger datasets we need to keep the ng-repeat model to always contain 50 items for performance reasons.

Solution 1

DirPaginate is something that'll meet the requirements of this question

Please see this Plunker for demo of this.

When using server side pagination, you'll have to get JSON response in this format.

Format of your JSON response

{
    Count: 1400,
    Items: [
        { // item 1... },
        { // item 2... },
        { // item 3... },
        ...
        { // item 25... }
    ]
}

The only thing that you need to watch is that you get total count of items in your database because you'll need this to pass it to our directive.

Format of your angular Controller

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

and finally this is an example of how you'll integrate it in your html

HTML

<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>

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

Please see Working with Asynchronous data section of this page.

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#working-with-asynchronous-data

Solution 2

I used the dir-pagination library. It's very easy to use and also light weight. The documentation is very good as well.

Here is an implementation example.

Edit: Oops just noticed, Raman Sahasi has given the same suggestion in his answer. Will keep mine, I believe the end-to-end implementation tutorial would be useful for some.