angular.js分页代码的实例

 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>