首页 > 代码库 > Angular+Bootstrap实现分页(带省略号)

Angular+Bootstrap实现分页(带省略号)

2024-10-04 04:22:39   229人阅读

前言

前几天用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">&laquo;</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">&raquo;</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>

 

Angular+Bootstrap实现分页(带省略号)


联系
我们