如何通过 AngularJS 进行分页？

Posted 2023-03-10

【中文标题】如何通过 AngularJS 进行分页？

【英文标题】：How can i make pagination through AngularJS?

【发布时间】：2015-03-10 23:21:39

【问题描述】：

最近我创建了一个 AngularJs App 。代码如下

html：

      <div ng-app="" ng-controller="Hello">
            <ul>
                <li ng-repeat="x in greeting">
                     x.user_name 
                </li>
            </ul>
        </div>

而我的 JS 代码是：

function Hello($scope, $http) 
$http.get('http://localhost/google/cibl/dashboard/get_all_user').
    success(function(data) 
        $scope.greeting = data;
    );

它工作正常。这个 http 服务给了我 2000 行，现在我想用 AngularJs 来分页。我该怎么做？

【问题讨论】：

这里可能已经有一个答案：***.com/questions/10816073/…

【参考方案1】：

你可以这样做：

Pagination Example: http://jsfiddle.net/2ZzZB/56/

在这个问题中找到它：

Pagination on a list using ng-repeat

【参考方案2】：

在你的控制器中

    app.controller('Hello', function($scope)
        $scope.pageSize = 10;
        $scope.currentPage = 0;

        $scope.changePage = function(page)
            $scope.currentPage = page;
        
    )

在你的标记中，你应该有

    <div ng-app="" ng-controller="Hello">
        <ul>
            <li ng-repeat="x in greeting | startFrom: currentPage * pageSize | limitTo: pageSize">
                 x.user_name 
            </li>
        </ul>
    </div>

我们缺少 startFrom 过滤器，所以让我们创建它

    app.filter('startFrom', function() 
        return function(input, start) 
            start = +start; //parse to int
            return input.slice(start);
        
    );

现在剩下的就是分页面板了，我会留给你用 css 来美化它

    <ul class="pagination" >
        <li ng-repeat="page in pagination" ng-class="'active':currentPage == page"><a ng-click="changePage(page)">page + 1</a></li>
    </ul>

注意事项：

我们之所以使用 changePage() 而不是 currentPage = page 是因为 ng-repeat 可能会破坏一些变量

在您的锚 () 标记中，您可以使用 href 来标记页面，而不是 ng-click，并在控制器中查看页面引用并根据查询进行更改。这样做的好处是，当您决定为您的网站进行 SEO 时，它就会为此做好准备！

href="#!/partialname?page=page"

【讨论】：

其实我是 angularJS 的新手，我不明白如何放置这些代码。我的 JS 文件应该看起来像这样吗My JS File

我为您编写的应用程序控制器中的所有内容都可以进入您的 Hello 函数。这些是声明控制器的同义词。

@YangLi 我们可以将 dir-pagination 指令用于任何标记，如 div 或任何其他自定义指令吗？

【参考方案3】：

至少我得到了一个解决方案并且它可以正常工作：

HTML：

<div ng-controller="userController" class="jumbotron">
        <h2>User List</h2> 

        <table  class="table table-striped">
            <thead>
                <tr>
                    <th>User </th>
                    <th>Group</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="u in users | itemsPerPage : 5">
                    <td>u.user_name</td>
                    <td>u.user_type</td>

                </tr>                         
            </tbody>
        </table>                
        <dir-pagination-controls on-page-change="pageChanged(current)" template-url="<?php echo base_url(); ?>js/dirPagination.tpl.html"></dir-pagination-controls>
    </div>

和 JS ： 这里我使用 AngularJs 分页指令

function userController($scope, $http) 
    $scope.users = [];
    $scope.total = 0;
    $scope.perPage = 25; // this should match however many results your API puts on one page
    getUsers(1);

    $scope.pagination = 
        current: 1
    ;

    $scope.pageChanged = function (newPage) 
        getUsers(newPage);
    ;

    function getUsers(pageNumber) 
            // this is just an example, in reality this stuff should be in a service
            $http.get(app.baseUrl + 'dashboard/get_all_user/' + pageNumber)
                    .success(function (data) 
                        console.log(data);
                        $scope.users = data.users;
                        $scope.total = data.total;
            )
            .error(function (data) 
                console.log(data);
                alert("There was a problem. Please try again later.");
            );
        
;
var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination']);
var app = app || ;
app.baseUrl = '<?= base_url() ?>';
myApp.controller('userController', userController);