angular.js分页代码的实例

Posted 2020-10-29 东方甲乙木

对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。现在在学习angular，使用angularjs 分页，基于 directive 实现，样式使用的 bootstrap，直接在 html代码中加入 标签即可调用。

对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。现在在学习angular，使用angularjs 分页，基于 directive 实现，样式使用的 bootstrap，直接在 html代码中加入 标签即可调用。

先来看下效果图

 

实例代码

 1 app.directive(\'pagePagination\', function(){
 2   return {
 3     restrict : \'E\',
 4     template : \'<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>\',
 5     replace : true,
 6     scope : {
 7       "pageId"      : "=",
 8       "pageRecord"    : "=",
 9       "pageSize"     : "=",
10       "pageUrlTemplate"  : "="
11     },
12     controller : [\'$scope\', function($scope){
13         
14       $scope.getLink = function(pageId){
15         return $scope.pageUrlTemplate.replace("{PAGE}", pageId);
16       };
17   
18       $scope.getPageList = function(){
19         var page = [];
20         var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
21         page.push({
22           name  : \'首页\',
23           style  : $scope.pageId == 1 ? "disabled" : "",
24           link  : $scope.getLink(1)
25         });
26         page.push({
27           name  : \'上一页\',
28           style  : $scope.pageId == 1 ? "disabled" : "",
29           link  : $scope.getLink(1)
30         });
31         for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
32           if( pageId >= 1 && pageId <= $scope.pageCount ){
33             page.push({
34               name  : pageId,
35               link  : $scope.getLink(pageId),
36               style  : pageId == $scope.pageId ? "active" : ""
37             });
38           }
39         }
40         page.push({
41           name  : \'下一页\',
42           style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
43           link  : $scope.getLink($scope.pageCount)
44         });
45         page.push({
46           name  : \'尾页\',
47           style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
48           link  : $scope.getLink($scope.pageCount)
49         });
50         return page;
51       };
52   
53       $scope.pageInit = function(){
54         if( !$scope.pageId || !$scope.pageRecord ){
55           setTimeout(function(){
56             $scope.$apply(function(){
57               $scope.pageInit();
58             });
59           }, 10);
60         }else{
61           if( !!$scope.pageSize ){
62             $scope._pageSize = parseInt($scope.pageSize);
63           }else{
64             $scope._pageSize = 10;
65           }
66           $scope.pageId    = parseInt($scope.pageId);
67           $scope.pageCount  = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
68           if( $scope.pageId < 1 ){
69             $scope.pageId = 1;
70           }else if( $scope.pageId > $scope.pageCount ){
71             $scope.pageId = $scope.pageCount;
72           }
73           $scope.pageLoad   = true;
74           $scope.pageList   = $scope.getPageList();
75         }
76       };
77         
78       $scope.pageLoad = false;
79       $scope.pageInit();
80     }]
81   }
82 });

调用代码：

1 <page-pagination
2   page-id="pageId"
3   page-record="recordCount"
4   page-url-template="urlTemplate">
5 </page-pagination>

以上就是angular.js分页代码的全部内容，希望对大家的学习有所帮助。