如何使用angular-ui bootstrap在angularjs中实现服务器端分页。 [英] How to implement server side pagination in angularjs using angular-ui bootstrap.?

问题描述

请使用angular js和angular-ui bootstrap建议不同的方法来实现服务器端分页。我将使用ng-repeat根据angualr-ui bootsrap分页指令中选择的当前页面对表格进行分页。因为我们需要避免频繁调用服务器。我们需要一次从服务器获取50个项目。我们每页显示10个项目。由于我们需要对较大的数据集进行分页，我们需要保持ng-repeat模型始终包含50个项目，这是出于性能原因。

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.

推荐答案

DirPaginate符合此问题的要求

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

请参阅此 Plunker 进行演示。

使用服务器端分页时，你会必须以这种格式获得JSON响应。

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

您的JSON响应格式

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

您需要注意的唯一事情是您获得数据库中项目的总数，因为您将需要这个把它传递给你r指令。

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.

角度控制器的格式

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

最后这是一个例子你会把它整合到你的HTML中

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

这篇关于如何使用angular-ui bootstrap在angularjs中实现服务器端分页。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！