Skip to content

Commit 1c7a266

Browse files
author
zhangbo
committed
demo完成
1 parent fddfa0b commit 1c7a266

File tree

5 files changed

+137
-22
lines changed

5 files changed

+137
-22
lines changed

‎demo/demo.html

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,51 @@
1010
<link rel="stylesheet" href="pagination.css">
1111
</head>
1212
<body onload="" ng-app="demo" ng-controller="demoCtro" class="row text-center">
13-
<h1 id="" class="text-center">
13+
<h1 id="" class="text-center" style="margin: 100px;">
1414
{{title}}
1515
</h1>
16+
<form class="form-horizontal" style="overflow:hidden; padding : 0 400px;">
17+
<div class="form-group " >
18+
<label class="col-sm-3 control-label">总条数</label>
19+
<div class="col-sm-9">
20+
<input type="text" class="form-control" ng-model="conf.total">
21+
</div>
22+
</div>
23+
24+
<div class="form-group" >
25+
<label class="col-sm-3 control-label">当前页</label>
26+
<div class="col-sm-9">
27+
<input type="text" class="form-control" ng-model="conf.currentPage">
28+
</div>
29+
</div>
30+
</form>
1631
<div ui-pagination conf="conf"></div>
1732
</body>
1833
</html>
1934
<script type="text/javascript" charset="utf-8">
35+
2036
var app = angular.module('demo' , ['pagination']);
21-
app.controller('demoCtro' , function($scope , pagination){
22-
console.log(pagination)
37+
38+
app.controller('demoCtro' , function($scope){
39+
2340
$scope.title = 'pagination-directive';
41+
2442
$scope.conf = {
25-
total : 100,
26-
currentPage : 1
43+
total : 1190,
44+
currentPage : 1,
45+
itemPageLimit : 1,
46+
47+
// 是否显示一页选择多少条
48+
isSelectPage : false,
49+
50+
// 是否显示快速跳转
51+
isLinkPage : false
2752
}
53+
54+
$scope.$watch('conf.currentPage + conf.itemPageLimit' , function(news){
55+
56+
// 把你的http请求放到这里
57+
console.log($scope.conf.currentPage , $scope.conf.itemPageLimit)
58+
})
2859
})
2960
</script>

‎demo/pagination.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,16 @@
1010
.ui-page > * {
1111
margin-right : 10px;
1212
}
13-
.ui-page input[type="text"]{
13+
.ui-page input[type="text"] , .ui-page select{
1414
width : 34px;
1515
height : 34px;
1616
line-height : 34px;
1717
text-align : center;
1818
border : 1px solid #eee;
1919
margin : 0 4px;
20+
background-color : #fff;
21+
border-radius : 0;
22+
}
23+
.ui-page select{
24+
width : auto ;
2025
}

‎demo/pagination.html

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<div class="ui-page">
22
<ul class="pagination" ng-if="conf.total">
3-
<li>
3+
<li ng-class = "{disabled : conf.currentPage == 1}" ng-click="prevPage()">
44
<a href="#" aria-label="Previous">
55
<span aria-hidden="true">
66
&laquo
77
</span>
88
</a>
99
</li>
10-
<li ng-repeat="page in pageList">
10+
<li ng-repeat="page in pageList track by $index" ng-click="changePage(page)" ng-class="{active : conf.currentPage == page }">
1111
<a>{{page}}</a>
1212
</li>
13-
<li>
13+
<li ng-class = "{disabled : conf.currentPage == page.limit}" ng-click="nextPage()">
1414
<a href="#" aria-label="Previous">
1515
<span aria-hidden="true">
1616
&raquo
@@ -19,14 +19,17 @@
1919
</li>
2020
</ul>
2121
<div class="pageConf">
22+
<div ng-if="!conf.isSelectPage">
23+
一页<select ng-options="limit for limit in conf.pageLimit" ng-model="conf.itemPageLimit" ng-change="selectPage()"></select>条/
24+
</div>
2225
<div>
23-
共<input type="text" ng-model="conf.currentPage">页
26+
共<span>{{page.limit}}</span>页
2427
</div>
25-
<div >
28+
<div ng-if="!conf.isLinkPage">
2629
<div class="name">
27-
到<input type="text" ng-model="conf.currentPage">页
30+
到<input type="text" ng-model="conf.linkPage" ng-change="linkPage()">页
2831
</div>
29-
<button class="btn btn-success">确定</button>
32+
<button class="btn btn-success" ng-if="0">确定</button>
3033
</div>
3134
</div>
3235
</div>

‎demo/pagination.js

Lines changed: 84 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,105 @@
11
(function(){
22

33
var pagination = angular.module('pagination' , []);
4-
pagination.factory('pagination' , function(){
5-
return 'pagination';
6-
})
4+
75
pagination.directive('uiPagination', function() {
86
return {
97
restrict : 'EA',
108
templateUrl : 'pagination.html',
119
replace : true,
12-
require : '?ngModel',
1310
scope : {
1411
conf : '='
1512
},
1613
link : function(scope , ele , attrs){
17-
console.log(scope.conf)
14+
15+
var page = scope.page = {};
16+
var conf = scope.conf ;
17+
18+
// 初始化一页展示多少条 默认为10
19+
conf.pageLimit = [10 , 15 , 20 , 30 ,50];
20+
21+
if(!conf.itemPageLimit ){
22+
conf.itemPageLimit = conf.pageLimit[0];
23+
}else{
24+
// 把自定义的条目加入到pagelimit中
25+
if(conf.pageLimit.indexOf(conf.itemPageLimit)){
26+
conf.pageLimit.push(conf.itemPageLimit);
27+
conf.pageLimit = conf.pageLimit.sort(function(a ,b ){ return a - b; })
28+
};
29+
}
30+
31+
// 分页数组
1832
scope.pageList = [];
1933
scope.pageListFn = function(){
20-
for(var i=1; i<8; i++){
21-
scope.pageList.push(i);
34+
35+
// 一共多少页
36+
page.limit = Math.floor(conf.total / conf.itemPageLimit) ;
37+
38+
// 最多展示多少可见页码 默认为10
39+
page.defaultLimit = conf.defaultLimit ? conf.defaultLimit : 10 ;
40+
41+
// 三种打点方式 ， 中间打点， 左边打点， 后边打点
42+
if(page.limit < page.defaultLimit ){
43+
for(var i=1; i< page.limit ; i++){
44+
scope.pageList.push(i);
45+
}
46+
}else{
47+
if(conf.currentPage < 4){
48+
for(var i=1 ; i<5 ; i++){
49+
scope.pageList.push(i);
50+
}
51+
scope.pageList.push('...' , page.limit );
52+
}else if(conf.currentPage >= page.limit - 3){
53+
for(var i= page.limit - 4 ; i< page.limit ; i++){
54+
scope.pageList.push(i);
55+
}
56+
scope.pageList.unshift(1 , '...');
57+
}else{
58+
for(var i= conf.currentPage -2 ; i< conf.currentPage + 2 ; i++){
59+
scope.pageList.push(i);
60+
}
61+
scope.pageList.push('...' , page.limit );
62+
scope.pageList.unshift(1 , '...');
63+
}
2264
}
2365
}
2466
scope.pageListFn();
67+
68+
// 点击页码
69+
scope.changePage = function(page){
70+
if(page == '...') return ;
71+
conf.currentPage = page ;
72+
}
73+
74+
// 上一页
75+
scope.prevPage = function(){
76+
if(conf.currentPage <= 1) return ;
77+
conf.currentPage -= 1;
78+
}
79+
80+
// 下一页
81+
scope.nextPage = function(){
82+
if(conf.currentPage >= page.limit ) return ;
83+
conf.currentPage += 1;
84+
}
85+
86+
// 改变一页显示条目
87+
scope.selectPage = function(){
88+
}
89+
90+
// 跳转页
91+
scope.linkPage = function(){
92+
if(!conf.linkPage) return ;
93+
conf.linkPage = conf.linkPage.replace(/[^0-9]/ , '');
94+
if(conf.linkPage == 0 || conf.linkPage > page.limit){
95+
conf.linkPage = page.limit ;
96+
}
97+
conf.currentPage = conf.linkPage ;
98+
}
99+
100+
25101
}
26102
}
27-
});
103+
});
28104

29105
})()

‎gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ var connect = require('gulp-connect');
33

44
gulp.task('connect' , function(){
55
connect.server({
6-
port : 3000,
6+
port : 3001,
77
livereload : true
88
});
99
})

0 commit comments

Comments
 (0)