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

admin管理员组

文章数量:1342656

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.

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.

• javascript
• angularjs
• twitter-bootstrap
• angular-ui-bootstrap
• angular-ui

Share Improve this question Follow asked Jul 21, 2016 at 3:29 albertalbert 45922 gold badges88 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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./michaelbromley/angularUtils/tree/master/src/directives/pagination#working-with-asynchronous-data

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.

本文标签： javascriptHow to implement server side pagination in angularjs using angularui bootstrapStack Overflow