angularui 分页
分页组件的使用
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>pagination+table</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script> <style> </style> <script> angular.module('myApp',['ui.bootstrap']).controller("paginationCtrl",function($scope,$log){ $scope.data=[ {index:'1',title:"标题一",content:'content 1'}, {index:'2',title:"标题一",content:'content 1'}, {index:'3',title:"标题一",content:'content 1'}, {index:'4',title:"标题一",content:'content 1'}, {index:'5',title:"标题一",content:'content 1'}, {index:'6',title:"标题一",content:'content 1'}, {index:'7',title:"标题一",content:'content 1'}, {index:'8',title:"标题一",content:'content 1'}, {index:'9',title:"标题一",content:'content 1'}, {index:'10',title:"标题一",content:'content 1'}, {index:'11',title:"标题一",content:'content 1'}, {index:'12',title:"标题一",content:'content 1'}, {index:'13',title:"标题一",content:'content 1'}, {index:'14',title:"标题一",content:'content 1'}, {index:'15',title:"标题一",content:'content 1'}, {index:'16',title:"标题一",content:'content 1'}, {index:'17',title:"标题一",content:'content 1'}, {index:'18',title:"标题一",content:'content 1'} ]; $scope.sec=[{id:1,name:"1"},{id:2,name:"2"},{id:4,name:"4"}] $scope.totalItems=$scope.data.length;//条目总数 $scope.currentPage=1;//当前页面数 $scope.pageSize=4; $scope.pageNum=Math.ceil($scope.totalItems/$scope.pageSize); $scope.allItem=[]; for(var i=0;i<$scope.totalItems;i+=$scope.pageSize){ $scope.allItem.push($scope.data.slice(i,i+$scope.pageSize)); } $scope.changsize=function(){ $scope.pageNum=Math.ceil($scope.totalItems/$scope.pageSize); $scope.currentPage=1; $scope.allItem=[]; for(var i=0;i<$scope.totalItems;i=i+$scope.pageSize){ $scope.allItem.push($scope.data.slice(i,i+$scope.pageSize)); } } $scope.page=null; $scope.changpage=function(){ if($scope.page>0&&$scope.page<=$scope.pageNum) {$scope.currentPage=$scope.page;} } }) </script> </head> <body> <div ng-controller="paginationCtrl"> <div class="table"> <table class="table table-striped"> <thead> <tr> <th>序号</th> <th>title</th> <th>内容</th> </tr> </thead> <tbody> <tr ng-repeat="item in allItem[currentPage-1]"> <td>{{item.index}}</td> <td>{{item.title}}</td> <td>{{item.content}}</td> </tr> </tbody> </table> </div> 每页显示<select id="" name="" ng-model="pageSize" ng-change="changsize()" ng-options="o.id as o.name for o in sec"> </select> <div>跳至<input type="text" ng-model="page" ng-change="changpage()"> 共{{pageNum}}页 共{{totalItems}}条数据 当前页{{currentPage}} </div> <div class="page"> <ul uib-pagination boundary-links="true" class="pagination-lg" total-items="totalItems" ng-model="currentPage" items-per-page="pageSize" previous-text="‹" next-text="›" first-text="«" last-text="»" max-size='7' boundary-link-numbers="true" > </ul> <ul uib-pager total-items="totalItems" ng-model="currentPage" items-per-page="pageSize"></ul> </div> </div> <script type="text/ng-template" id='list.html'> <ul> <li ng-repeat="item in items">{{item}}</li> </ul> <!-- max-size 显示的页面数目 总条目 totalItems total-items 当前页面 currentPage ng-model 页面尺寸 pageSize items-per-page 页面数目 pageNum --> </script> </body> </html>
