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

问题描述

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

解决方案

DirPaginate 可以满足这个问题的要求

请参阅此 Plunker 以获取演示.

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

JSON 响应的格式

<代码>{计数:1400，项目: [{//项目 1... },{//项目 2... },{//第 3 项... },...{//第 25 项... }]}

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

角度控制器的格式

.controller('UsersController', function($scope, $http) {$scope.users = [];$scope.totalUsers = 0;$scope.usersPerPage = 25;//这应该与您的 API 在一页上放置的结果相匹配getResultsPage(1);$scope.pagination = {当前:1};$scope.pageChanged = function(newPage) {getResultsPage(newPage);};函数 getResultsPage(pageNumber) {//这只是一个例子，实际上这个东西应该在一个服务中$http.get('path/to/api/users?page=' + pageNumber).then(函数(结果){$scope.users = result.data.Items;$scope.totalUsers = result.data.Count});}})

最后，这是一个如何将其集成到 html 中的示例

HTML

<表格><tr dir-paginate="user in users | itemsPerPage: usersPerPage" total-items="totalUsers" current-page="pagination.current"><td>{{user.name }}</td><td>{{ user.email }}</td></tr><dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>

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

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

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

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