使用 AngularJS 进行分页？答案

【问题标题】：Pagination with AngularJS?使用 AngularJS 进行分页？
【发布时间】：2026-01-13 02:10:02
【问题描述】：

我已经尝试使用 AngularJS 进行分页，但我无法实现某些东西，比如。

我可以使用“下一个”和“上一个”进行导航，但不知道如何通过单击特定的“页码' 按钮。我还想在点击“下一个”和“上一个”时将焦点添加到特定的“页码”按钮 >'

HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body ng-app='myApp'>
    Hello World
    <div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item}}
        </li>
    </ul>

     <input type="image" src="images/btn_previous.png" alt="previous" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    <button ng-click="currentPage = currentPage">
        {{currentPage+1 <= numberOfPages()-2 && currentPage+1 || numberOfPages()-2}}
    </button>
    <button ng-click="currentPage = currentPage">
        {{currentPage+2 <= numberOfPages()-1 && currentPage+2 || numberOfPages()-1}}
    </button>
    <button >
        {{currentPage+3 <= numberOfPages() && currentPage+3 || numberOfPages()}}
    </button> . . .
    <button >
        {{numberOfPages()}}
    </button>
    <input type="image" src="images/btn_next.png" alt="next" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">

</div>
</body>
</html>

Javascript：

var app=angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.currentPage = 0;
    $scope.pageSize = 5;
    $scope.data = [];
    $scope.numberOfPages=function(){
        return Math.ceil($scope.data.length/$scope.pageSize);                
    }
    for (var i=0; i<45; i++) {
        $scope.data.push("Item "+i);
    }
}

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

有人可以帮帮我吗？

【问题讨论】：

标签： angularjs pagination

【解决方案1】：

我觉得你应该试试Pagination Directive

首先你需要在你的项目中包含这个模块：

angular.module('myApp', ['angularUtils.directives.dirPagination']);

然后创建分页内容：

<ANY
dir-paginate="expression | itemsPerPage: (int|expression) [: paginationId (string literal)]"
[current-page=""]
[pagination-id=""]
[total-items=""]>
...
</ANY>

最后包括分页本身。

<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]>
</dir-pagination-controls>

这里正在工作plunker

【讨论】：

谢谢，但我需要在给定代码中解决我的问题。
请给我一个 plunker 或 fiddle。
我已经更新了give plunker plnkr.co/edit/xebTEmoTXgun7DRzflZK?p=preview 如果您有任何问题，请查看并回复我
我知道这个问题，这就是为什么我说与其实现我们自己的分页不如利用已经构建并具有构建版本的分页。
不，这些是完全开源的，这就是为什么它在 github 上公开，因此任何人都可以使用它并做出贡献。

【解决方案2】：

从这里下载dirPagination.js。 .
现在将 dirPagination.js 包含到您的页面中。
像这样在你的模块中添加 angularUtils.directives.dirPagination

var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);

4.we use dir-paginate directive for pagination  add dir-paginate in tr tag

<tr dir-paginate="event in events|orderBy:['id', 't']:true |
     itemsPerPage: 5">

5.Add below given code anywhere on your page or where ever you want


 <dir-pagination-controls
            max-size="5"
            direction-links="true"
            boundary-links="true" >
        </dir-pagination-controls>

按原样使用此代码，这将自动放置按钮

第一个，下一个，上一个，最后一个

并在点击按钮时自动聚焦在页面编号上。

【讨论】：

【解决方案3】：

1）按照上面的答案按照第一个并下载，下一步

2) 在您的视图页面中添加这些 div 部分

<div ng-controller="PagenationController"
class="other-controller">
 <div class="text-center">
  <dir-pagination-controls boundary-links="true"
  on-page-change="pageChangeHandler(newPageNumber)"
   template-url="app/views/dirPagination.html"></dir-pagination-controls>
  </div>
</div>

3) 将这些添加到您的控制器中。

 app.controller('PagenationController', PagenationController);
 function PagenationController($scope) {
  $scope.pageChangeHandler = function(num) {
      };
$scope.currentPage = 1;
$scope.pageSize;
$scope.add = true;
 $scope.pageChangeHandler = function(num) {
         };
}

【讨论】：