标签：first control each floor amount str 后台 char strong
前几天用Angularjs写一个后台管理界面时,需要写分页,自己懒得写于是想在网上搜索一个带省略号的插件,竟然没找到,那没办法就自己写吧
话不多说,直接上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="bootstrap.min.css"> 7 <script type="text/javascript" src="angular.js"></script> 8 </head> 9 <body ng-app="myApp" ng-controller="myController"> 10 <nav aria-label="Page navigation" class="clearfix"> 11 <ul class="pagination pagination-sm pagination1 fr" style="margin: 0"> 12 <li ng-class="{disabled:page==1}"> 13 <a href="javascript:void(0)" aria-label="Previous" ng-click="sub(page-1<1?1:page-1)" ng-disabled="page==1"> 14 <span aria-hidden="true">«</span> 15 </a> 16 </li> 17 <li ng-if="page >= pageNum && lastPage !== pageNum" ng-click="sub(1)" ng-class="{active:item==1}"> 18 <a href="javascript:void(0)">1</a> 19 </li> 20 <li ng-if="page >= pageNum && lastPage !== pageNum"> 21 <a href="javascript:void(0)">...</a> 22 </li> 23 <li ng-click="sub(item)" ng-class="{active:item==page}" ng-repeat="item in pages"> 24 <a href="javascript:void(0)">{{item}}</a> 25 </li> 26 <li ng-if="lastPage > pageNum && firstPage <= lastPage - pageNum"> 27 <a href="javascript:void(0)">...</a> 28 </li> 29 <li ng-if="lastPage > pageNum && firstPage <= lastPage - pageNum" ng-click="sub(lastPage)" ng-class="{active:item==page}"> 30 <a href="javascript:void(0)">{{lastPage}}</a> 31 </li> 32 <li ng-class="{disabled:page==lastPage}"> 33 <a href="javascript:void(0)" aria-label="Next" ng-click="sub(page+1>lastPage?page:page+1)"> 34 <span aria-hidden="true">»</span> 35 </a> 36 </li> 37 </ul> 38 </nav> 39 </body> 40 <script type="text/javascript"> 41 var app = angular.module(‘myApp‘, []); 42 function setPage(length, amount, num, first) {//创建保存页码数组的函数 43 //length数据总条数 44 //amount每页数据条数 45 //num保留的页码数 46 //first第一页的页码 47 var pages = []; //创建分页数组 48 var page = Math.ceil(length / amount); 49 if (page <= num) { 50 for (var i = 1; i <= page; i++) { 51 pages.push(i); 52 } 53 } 54 if (page > num) { 55 for (var i = first; i < first + num; i++) { 56 pages.push(i); 57 } 58 } 59 return pages; 60 } 61 app.controller(‘myController‘, function($scope) { 62 $scope.firstPage = 1; 63 $scope.pageNum = 5; 64 $scope.page = 1; 65 var amount = 100;//数据总条数 66 var each = 6;//每页显示的条数 67 $scope.sub = function(page) { 68 $scope.lastPage = Math.ceil(amount / each); 69 if (page >= $scope.pageNum) { 70 $scope.firstPage = page - Math.floor($scope.pageNum / 2); 71 } else { 72 $scope.firstPage = 1; 73 } 74 if ($scope.firstPage > $scope.lastPage - $scope.pageNum) { 75 $scope.firstPage = $scope.lastPage - $scope.pageNum + 1; 76 } 77 $scope.pages = setPage(amount, each, $scope.pageNum, $scope.firstPage); 78 $scope.page = page; 79 } 80 $scope.sub(1); 81 }); 82 83 </script> 84 </html>
标签：first control each floor amount str 后台 char strong
原文地址：http://www.cnblogs.com/hanyu1993/p/6979722.html
