Angular 分页
I. 分页思想：
先将取出来的数据（数组）按照每页多少条数据分割成 数据/每页数 个小数组：
此处为每页var pages=5;条，分成 6 页，数据长度为30
JS代码:
1 /** 2 3 * Created by LovellY on 2015/4/1. 4 5 */ 6 7 myApp.controller('download',function ($scope) { 8 9 var pages=5; 10 11 $scope.curpage=0;//默认第一页下标为0 12 13 $scope.pagedItems = [ 14 15 {"id":"1","name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 16 17 {"id":"2","name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 18 19 {"id":"3","name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"}, 20 21 {"id":"4","name":"name 4","description":"description 1","field3":"field3 4","field4":"field4 4","field5 ":"field5 4"}, 22 23 {"id":"5","name":"name 5","description":"description 1","field3":"field3 5","field4":"field4 5","field5 ":"field5 5"}, 24 25 {"id":"6","name":"name 6","description":"description 1","field3":"field3 6","field4":"field4 6","field5 ":"field5 6"}, 26 27 //{"id":"7","name":"name 7","description":"description 1","field3":"field3 7","field4":"field4 7","field5 ":"field5 7"}, 28 29 //{"id":"8","name":"name 8","description":"description 1","field3":"field3 8","field4":"field4 8","field5 ":"field5 8"}, 30 31 //{"id":"9","name":"name 9","description":"description 1","field3":"field3 9","field4":"field4 9","field5 ":"field5 9"}, 32 33 //{"id":"10","name":"name 10","description":"description 1","field3":"field3 10","field4":"field4 10","field5 ":"field5 10"}, 34 35 //{"id":"11","name":"name 11","description":"description 1","field3":"field3 11","field4":"field4 11","field5 ":"field5 11"}, 36 37 //{"id":"12","name":"name 12","description":"description 1","field3":"field3 12","field4":"field4 12","field5 ":"field5 12"}, 38 39 //{"id":"13","name":"name 13","description":"description 1","field3":"field3 13","field4":"field4 13","field5 ":"field5 13"}, 40 41 //{"id":"14","name":"name 14","description":"description 1","field3":"field3 14","field4":"field4 14","field5 ":"field5 14"}, 42 43 //{"id":"15","name":"name 15","description":"description 1","field3":"field3 15","field4":"field4 15","field5 ":"field5 15"}, 44 45 //{"id":"16","name":"name 16","description":"description 1","field3":"field3 16","field4":"field4 16","field5 ":"field5 16"}, 46 47 //{"id":"17","name":"name 17","description":"description 1","field3":"field3 17","field4":"field4 17","field5 ":"field5 17"}, 48 49 //{"id":"18","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 50 51 //{"id":"19","name":"name 19","description":"description 1","field3":"field3 19","field4":"field4 19","field5 ":"field5 19"}, 52 53 //{"id":"20","name":"name 20","description":"description 1","field3":"field3 20","field4":"field4 20","field5 ":"field5 20"}, 54 55 //{"id":"21","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 56 57 //{"id":"22","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 58 59 //{"id":"23","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 60 61 //{"id":"24","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 62 63 //{"id":"25","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 64 65 //{"id":"26","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 66 67 //{"id":"27","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 68 69 //{"id":"28","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 70 71 //{"id":"29","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"}, 72 73 //{"id":"30","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"} 74 75 76 77 ]; 78 79 // var len= 80 81 $scope.itemx=[];//存放分页的 82 83 for(var i=0,len=$scope.pagedItems.length;i<len;i+=pages){ 84 85 $scope.itemx.push($scope.pagedItems.slice(i,i+pages)); 86 87 } 88 89 90 91 $scope.totalPage=Math.ceil(($scope.pagedItems).length/pages)//总页数从1开始 92 93 94 95 if($scope.curpage>0&&$scope.curpage< $scope.totalPage){ 96 97 $scope.pages = [ 98 99 $scope.curpage - 1, 100 101 $scope.curpage, 102 103 $scope.curpage + 1 104 105 ]; 106 107 }else if($scope.curpage==0&& $scope.totalPage>1){ 108 109 $scope.pages = [ 110 111 $scope.curpage, 112 113 $scope.curpage + 1] 114 115 }else if ($scope.curpage == $scope.totalPage ) { 116 117 $scope.pages = [ 118 119 $scope.curpage - 1, 120 121 $scope.curpage 122 123 ]; 124 125 } 126 127 128 129 console.log( $scope.totalPage,$scope.pages,$scope.curpage) 130 131 132 133 134 135 }) 136 137 138 139 140 141 142 143 myApp.directive('doPage', function () { 144 145 return{ 146 147 restrict : 'E', 148 149 templateUrl : 'nihao.html', 150 151 replace : true, 152 153 transclude : true, 154 155 link: function (scope,ele,attr) { 156 157 //首页 158 159 scope.prevPage= function () { 160 161 scope.curpage=0; 162 163 if(scope.totalPage>2){ 164 165 scope.pages = [ 166 167 scope.curpage , 168 169 scope.curpage + 1, 170 171 172 173 ] 174 175 } 176 177 178 179 } 180 181 //上一页 182 183 scope.prev= function () { 184 185 186 187 if(scope.curpage >1 && scope.totalPage>2){ 188 189 scope.curpage--; 190 191 scope.pages = [ 192 193 scope.curpage-1, 194 195 scope.curpage, 196 197 scope.curpage + 1 198 199 200 201 ]; 202 203 }else if(scope.curpage=0){ 204 205 //scope.curpage--; 206 207 scope.pages = [ 208 209 210 211 scope.curpage, 212 213 scope.curpage + 1 214 215 216 217 ]; 218 219 } 220 221 222 223 } 224 225 //下一页 226 227 scope.next= function () { 228 229 if(scope.curpage<scope.totalPage-2){ 230 231 scope.curpage++; 232 233 scope.pages = [ 234 235 scope.curpage - 1, 236 237 scope.curpage, 238 239 scope.curpage + 1 240 241 242 243 244 245 ]; 246 247 248 249 } 250 251 else if(scope.curpage==scope.totalPage-2){ 252 253 scope.curpage++; 254 255 scope.pages = [ 256 257 258 259 scope.curpage-1, 260 261 scope.curpage 262 263 264 265 ]; 266 267 } 268 269 270 271 } 272 273 //尾页 274 275 scope.nextPage= function () { 276 277 scope.curpage=scope.totalPage-1; 278 279 // console.log(scope.curpage) 280 281 if(scope.curpage>1){ 282 283 scope.pages = [ 284 285 scope.curpage - 1, 286 287 scope.curpage, 288 289 290 291 ];} 292 293 } 294 295 296 297 //当前页 298 299 scope.setPage= function (page,l) { 300 301 scope.curpage=page; 302 303 304 305 if(scope.curpage>0&&scope.curpage<l-1){ 306 307 scope.pages = [ 308 309 scope.curpage - 1, 310 311 scope.curpage, 312 313 scope.curpage + 1 314 315 ]; 316 317 }else if(scope.curpage==0&&l>1){ 318 319 scope.pages = [ 320 321 scope.curpage, 322 323 scope.curpage + 1] 324 325 }else if (scope.curpage == l && l > 1) { 326 327 scope.pages = [ 328 329 scope.curpage - 1, 330 331 scope.curpage 332 333 ]; 334 335 } 336 337 } 338 339 } 340 341 } 342 343 })
HTML 代码：
1 <script type="text/ng-template" id="nihao.html"> 2 <ul class="pagination" ng-if="totalPage>0"> 3 <li ng-class="{true:'active'}[curpage==0]"><a href="javascript:void(0)" 4 ng-click="prevPage()" >首页</a></li> 5 <li ng-class="{true:'disabled'}[curpage==0]"><a href="javascript:void(0);" ng-click="prev()">上一页</a></li> 6 <li ng-repeat="page in pages"><a href="javascript:void(0);" ng-click="setPage(page,totalPage)">{{ page+1 }}</a></li> 7 <li ng-class="{true:'disabled'}[curpage==totalPage-1]" ><a href="javascript:void(0);" ng-disabled="false" ng-click="next()">下一页</a> 8 </li> 9 <li ng-class="{true:'active'}[curpage==totalPage-1]"><a href="javascript:void(0)" 10 ng-click="nextPage()">末页</a></li> 11 </ul> 12 </script> 13 14 15 16 <table class="table table-striped table-condensed table-hover"> 17 <thead> 18 <tr> 19 <th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th> 20 <th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th> 21 <th class="description">Description <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th> 22 <th class="field3">Field 3 <a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th> 23 <th class="field4">Field 4 <a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th> 24 <th class="field5">Field 5 <a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th> 25 </tr> 26 </thead> 27 28 <tbody> 29 <tr ng-repeat="item in itemx[curpage] "> 30 <td>{{item.id}}</td> 31 <td>{{item.name}}</td> 32 <td>{{item.description}}</td> 33 <td>{{item.field3}}</td> 34 <td>{{item.field4}}</td> 35 <td>{{item.field5}}</td> 36 </tr> 37 </tbody> 38 <tfoot> 39 40 </tfoot> 41 </table> 42 <do-page></do-page>
