Skip to content

Commit 425b15e

Browse files
author
LuoPQ
committed
init
1 parent 88413c1 commit 425b15e

File tree

3 files changed

+207
-0
lines changed

3 files changed

+207
-0
lines changed

‎README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,50 @@
11
# jquery.pager.js
22
轻量级的jquery分页插件
3+
4+
1、简单轻量的分页插件，源码不超过5kb
5+
6+
2、支持自定义按钮文字、页码链接
7+
8+
3、支持页面改变后的回调函数
9+
10+
### 基本使用
11+
#### html
12+
```
13+
<div class="pager">
14+
</div>
15+
```
16+
17+
#### css
18+
```
19+
.pager { display: inline-block; font: 12 px/21px "宋体"; margin-top: 20px; }
20+
.pager a, .pager .flip, .pager .curPage { border: 1px solid #e3e3e3; display: inline-block; height: 22px; line-height: 22px; text-align: center; }
21+
.pager a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; width: 26px; }
22+
.pager a:hover { background: none repeat scroll 0 0 #f1f1f1; }
23+
.pager .noPage { color: #a4a4a4; }
24+
.pager .curPage { background: none repeat scroll 0 0 #49abde; color: #ffffff; width: 26px; }
25+
.pager .flip { width: 56px; }
26+
```
27+
28+
#### script
29+
```
30+
<script src="http://luopq.com/demo/lib/jquery-1.10.2.min.js"></script>
31+
<script src="../src/jquery.pager.js"></script>
32+
<script>
33+
var pager = $(".pager").pager();
34+
</script>
35+
```
36+
37+
### Demo
38+
1、<a href="http://luopq.com/demo/pager/examples/index.html" target="_blank"></a>
39+
40+
### Options
41+
|参数|类型|默认值|描述|
42+
|----|---|-----|----|
43+
|pageIndex|number|0|当前页码，0表示第一页|
44+
|pageSize|number|6|每页显示数量|
45+
|itemCount|number|50|显示项的总数量|
46+
|maxButtonCount|number|7|除去第一页和最后一页的最大按钮数量|
47+
|prevText|string|"上一页"|上一页按钮显示的文字|
48+
|nextText|string|"下一页"|下一页按钮显示的文字|
49+
|buildPageUrl|function|null|构造页码按钮链接href的方法,包含一个pageIndex参数，不传则返回"javascript:;"|
50+
|onPageChanged|function|null|页码修改后的回调函数，包含一个pageIndex方法|

‎examples/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title> </title>
5+
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
6+
<style>
7+
.pager { display: inline-block; font: 12 px/21px "宋体"; margin-top: 20px; }
8+
.pager a, .pager .flip, .pager .curPage { border: 1px solid #e3e3e3; display: inline-block; height: 22px; line-height: 22px; text-align: center; }
9+
.pager a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; width: 26px; }
10+
.pager a:hover { background: none repeat scroll 0 0 #f1f1f1; }
11+
.pager .noPage { color: #a4a4a4; }
12+
.pager .curPage { background: none repeat scroll 0 0 #49abde; color: #ffffff; width: 26px; }
13+
.pager .flip { width: 56px; }
14+
</style>
15+
</head>
16+
<body>
17+
<div>
18+
<div class="pager">
19+
20+
</div>
21+
</div>
22+
<input id="setIndex" value="设置页码为3（第4页）" type="button" />
23+
<input id="getIndex" value="获取当前页码" type="button" />
24+
<input id="setCount" value="设置项数为100" type="button" />
25+
<script src="http://luopq.com/demo/lib/jquery-1.10.2.min.js"></script>
26+
<script src="../src/jquery.pager.js"></script>
27+
<script>
28+
29+
30+
var pager = $(".pager").pager();
31+
$("#setIndex").on("click", function () {
32+
pager.setPageIndex(3);
33+
})
34+
$("#getIndex").on("click", function () {
35+
alert(pager.getPageIndex(3));
36+
})
37+
$("#setCount").on("click", function () {
38+
pager.setItemCount(100);
39+
})
40+
</script>
41+
</body>
42+
</html>

‎src/jquery.pager.js‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/**
2+
* jquery.pager.js v0.1.0
3+
* MIT License
4+
* author info pls visit: http://luopq.com
5+
* for more info pls visit: https://github.com/LuoPQ/jquery.pager.js
6+
*/
7+
; (function ($, window, document, undefined) {
8+
"use strict";
9+
var defaults = {
10+
pageIndex: 0,
11+
pageSize: 6,
12+
itemCount: 50,
13+
maxButtonCount: 7,
14+
prevText: "上一页",
15+
nextText: "下一页",
16+
buildPageUrl: null,
17+
onPageChanged: null
18+
};
19+
20+
function Pager($ele, options) {
21+
this.$ele = $ele;
22+
this.options = options = $.extend(defaults, options || {});
23+
this.init();
24+
}
25+
Pager.prototype = {
26+
constructor: Pager,
27+
init: function () {
28+
this.renderHtml();
29+
this.bindEvent();
30+
},
31+
renderHtml: function () {
32+
var options = this.options;
33+
34+
options.pageCount = Math.ceil(options.itemCount / options.pageSize);
35+
var html = [];
36+
37+
//生成上一页的按钮
38+
if (options.pageIndex > 0) {
39+
html.push('<a page="' + (options.pageIndex - 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.prevText + '</a>');
40+
} else {
41+
html.push('<span class="flip noPage">' + options.prevText + '</span>');
42+
}
43+
44+
//这里是关键
45+
//临时的起始页码中间页码，当页码数量大于显示的最大按钮数时使用
46+
var tempStartIndex = options.pageIndex - Math.floor(options.maxButtonCount / 2) + 1;
47+
48+
//计算终止页码，通过max计算一排按钮中的第一个按钮的页码，然后计算出页数量
49+
var endIndex = Math.min(options.pageCount, Math.max(0, tempStartIndex) + options.maxButtonCount) - 1;
50+
var startIndex = Math.max(0, endIndex - options.maxButtonCount + 1);
51+
52+
// 第一页
53+
if (startIndex > 0) {
54+
html.push("<a href='" + this.buildPageUrl(0) + "' page='" + 0 + "'>1</a> ");
55+
html.push("<span>...</span>");
56+
}
57+
58+
//生成页码按钮
59+
for (var i = startIndex; i <= endIndex; i++) {
60+
if (options.pageIndex == i) {
61+
html.push('<span class="curPage">' + (i + 1) + '</span>');
62+
} else {
63+
html.push('<a page="' + i + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '">' + (i + 1) + '</a>');
64+
}
65+
}
66+
67+
// 最后一页
68+
if (endIndex < options.pageCount - 1) {
69+
html.push("<span>...</span> ");
70+
html.push("<a href='" + this.buildPageUrl(options.pageCount - 1) + "' page='" + (options.pageCount - 1) + "'>" + options.pageCount + "</a> ");
71+
}
72+
73+
//生成下一页的按钮
74+
if (options.pageIndex < options.pageCount - 1) {
75+
html.push('<a page="' + (options.pageIndex + 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.nextText + '</a>');
76+
} else {
77+
html.push('<span class="flip noPage">' + options.nextText + '</span>');
78+
}
79+
80+
this.$ele.html(html.join(""));
81+
},
82+
bindEvent: function () {
83+
var that = this;
84+
that.$ele.on("click", "a", function () {
85+
that.options.pageIndex = parseInt($(this).attr("page"), 10);
86+
that.renderHtml();
87+
that.options.onPageChanged && that.options.onPageChange(that.options.pageIndex);
88+
})
89+
},
90+
buildPageUrl: function () {
91+
if ($.isFunction(this.options.buildPageUrl)) {
92+
return this.options.buildPageUrl(pageIndex);
93+
}
94+
return "javascript:;";
95+
},
96+
getPageIndex: function () {
97+
return this.options.pageIndex;
98+
},
99+
setPageIndex: function (pageIndex) {
100+
this.options.pageIndex = pageIndex;
101+
this.renderHtml();
102+
},
103+
setItemCount: function (itemCount) {
104+
this.options.pageIndex = 0;
105+
this.options.itemCount = itemCount;
106+
this.renderHtml();
107+
}
108+
};
109+
110+
111+
$.fn.pager = function (options) {
112+
options = $.extend(defaults, options || {});
113+
114+
return new Pager($(this), options);
115+
}
116+
117+
})(jQuery, window, document);

0 commit comments

Comments
 (0)