如何使用angular-ui bootstrap在angularjs中实现服务器端分页。

Question

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

Answer 1

DirPaginate是符合这个问题要求的东西

请参阅此Plunker以获取此演示。

使用服务器端分页时，您必须以此格式获取JSON响应。

您的JSON响应的格式

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

您需要注意的唯一事情是您获得数据库中项目的总数，因为您需要将其传递给我们的指令。

角度控制器的格式

.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中的示例

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>

请参阅本页的使用异步数据部分。

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

Answer 2

我使用了dir-pagination库。 它使用起来非常简单，重量也很轻。 文档也非常好。

这是一个实现示例。

编辑：哎呀刚刚注意到，拉曼萨哈在他的回答中给出了同样的建议。 保留我的，我相信端到端的实现教程对某些人来说会很有用。