前言
前几天用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>
时间： 2025-01-05 02:06:33