前言
前幾天用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>