pagination.js:
/**
* pagination分页插件
*/
;(function($,window,document,undefined){
//配置参数
var defaults = {
totalData:0, //数据总条数
showData:0, //每页显示的条数
pageCount:9, //总页数,默认为9
current:1, //当前第几页
prevCls:‘prev‘, //上一页class
nextCls:‘next‘, //下一页class
prevContent:‘<‘, //上一页内容
nextContent:‘>‘, //下一页内容
activeCls:‘active‘, //当前页选中状态
coping:false, //首页和尾页
homePage:‘‘, //首页节点内容
endPage:‘‘, //尾页节点内容
count:3, //当前页前后分页个数
jump:false, //跳转到指定页数
jumpIptCls:‘jump-ipt‘, //文本框内容
jumpBtnCls:‘jump-btn‘, //跳转按钮
jumpBtn:‘跳转‘, //跳转按钮文本
callback:function(){} //回调
};
var Pagination = function(element,options){
//全局变量
var opts = options,//配置
current,//当前页
$document = $(document),
$obj = $(element);//容器
/**
* 设置总页数
* @param int page 页码
* @return opts.pageCount 总页数配置
*/
this.setTotalPage = function(page){
return opts.pageCount = page;
};
/**
* 获取总页数
* @return int p 总页数
*/
this.getTotalPage = function(){
var p = opts.totalData || opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
return p;
};
//获取当前页
this.getCurrent = function(){
return current;
};
/**
* 填充数据
* @param int index 页码
*/
this.filling = function(index){
var html = ‘‘;
current = index || opts.current;//当前页码
var pageCount = this.getTotalPage();
if(current > 1){//上一页
html += ‘<a href="javascript:;" class="‘+opts.prevCls+‘">‘+opts.prevContent+‘</a>‘;
}else{
$obj.find(‘.‘+opts.prevCls) && $obj.find(‘.‘+opts.prevCls).remove();
}
if(current >= opts.count * 2 && current != 1 && pageCount != opts.count){
var home = opts.coping && opts.homePage ? opts.homePage : ‘1‘;
html += opts.coping ? ‘<a href="javascript:;" data-page="1">‘+home+‘</a><span>...</span>‘ : ‘‘;
}
var start = current - opts.count,
end = current + opts.count;
((start > 1 && current < opts.count) || current == 1) && end++;
(current > pageCount - opts.count && current >= pageCount) && start++;
for (;start <= end; start++) {
if(start <= pageCount && start >= 1){
if(start != current){
html += ‘<a href="javascript:;" data-page="‘+start+‘">‘+ start +‘</a>‘;
}else{
html += ‘<span class="‘+opts.activeCls+‘">‘+ start +‘</span>‘;
}
}
}
if(current + opts.count < pageCount && current >= 1 && pageCount > opts.count){
var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
html += opts.coping ? ‘<span>...</span><a href="javascript:;" data-page="‘+pageCount+‘">‘+end+‘</a>‘ : ‘‘;
}
if(current < pageCount){//下一页
html += ‘<a href="javascript:;" class="‘+opts.nextCls+‘">‘+opts.nextContent+‘</a>‘
}else{
$obj.find(‘.‘+opts.nextCls) && $obj.find(‘.‘+opts.nextCls).remove();
}
html += opts.jump ? ‘<input type="text" class="‘+opts.jumpIptCls+‘"><a href="javascript:;" class="‘+opts.jumpBtnCls+‘">‘+opts.jumpBtn+‘</a>‘ : ‘‘;
$obj.empty().html(html);
};
//绑定事件
this.eventBind = function(){
var self = this;
var pageCount = this.getTotalPage();//总页数
$obj.off().on(‘click‘,‘a‘,function(){
if($(this).hasClass(opts.nextCls)){
var index = parseInt($obj.find(‘.‘+opts.activeCls).text()) + 1;
}else if($(this).hasClass(opts.prevCls)){
var index = parseInt($obj.find(‘.‘+opts.activeCls).text()) - 1;
}else if($(this).hasClass(opts.jumpBtnCls)){
if($obj.find(‘.‘+opts.jumpIptCls).val() !== ‘‘){
var index = parseInt($obj.find(‘.‘+opts.jumpIptCls).val());
}else{
return;
}
}else{
var index = parseInt($(this).data(‘page‘));
}
self.filling(index);
typeof opts.callback === ‘function‘ && opts.callback(self);
});
//输入跳转的页码
$obj.on(‘input propertychange‘,‘.‘+opts.jumpIptCls,function(){
var $this = $(this);
var val = $this.val();
var reg = /[^\d]/g;
if (reg.test(val)) {
$this.val(val.replace(reg, ‘‘));
}
(parseInt(val) > pageCount) && $this.val(pageCount);
if(parseInt(val) === 0){//最小值为1
$this.val(1);
}
});
//回车跳转指定页码
$document.keydown(function(e){
var self = this;
if(e.keyCode == 13 && $obj.find(‘.‘+opts.jumpIptCls).val()){
var index = parseInt($obj.find(‘.‘+opts.jumpIptCls).val());
self.filling(index);
typeof opts.callback === ‘function‘ && opts.callback(self);
}
});
};
//初始化
this.init = function(){
this.filling(opts.current);
this.eventBind();
};
this.init();
};
$.fn.pagination = function(parameter,callback){
if(typeof parameter == ‘function‘){//重载
callback = parameter;
parameter = {};
}else{
parameter = parameter || {};
callback = callback || function(){};
}
var options = $.extend({},defaults,parameter);
return this.each(function(){
var pagination = new Pagination(this, options);
callback(pagination);
});
};
})(jQuery,window,document);
index.html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css/pagination.css"> 7 <script src="../../base/jquery.js"></script> 8 <script src="js/jquery.pagination.js"></script> 9 </head> 10 <body> 11 <div class="box"> 12 13 </div> 14 <div class="M-box"></div> 15 <script src="main.js"></script> 16 </body> 17 </html>
pagination.css
1 @charset "UTF-8";
2
3 /*.wrapper{*/
4 /*margin:0 auto;*/
5 /*width:960px;*/
6 /*height:100%;*/
7 /*}*/
8 .M-box{
9 position: relative;
10 text-align: center;
11 zoom: 1;
12 }
13 .M-box:before,.M-box:after{
14 content:"";
15 display:table;
16 }
17 .M-box:after{
18 clear:both;
19 overflow:hidden;
20 }
21 .M-box span{
22 float: left;
23 margin:0 5px;
24 width: 38px;
25 height: 38px;
26 line-height: 38px;
27 color: #bdbdbd;
28 font-size: 14px;
29 }
30 .M-box .active{
31 float: left;
32 margin:0 5px;
33 width: 38px;
34 height: 38px;
35 line-height: 38px;
36 background: #e91e63;
37 color: #fff;
38 font-size: 14px;
39 border: 1px solid #e91e63;
40 }
41 .M-box a{
42 float: left;
43 margin:0 5px;
44 width: 38px;
45 height: 38px;
46 line-height: 38px;
47 background: #fff;
48 border: 1px solid #ebebeb;
49 color: #bdbdbd;
50 font-size: 14px;
51 }
52 .M-box a:hover{
53 color:#fff;
54 background: #e91e63;
55 }
56 .M-box .next,.M-box .prev{
57 font-family: "Simsun";
58 font-size: 16px;
59 font-weight: bold;
60 }
61 .now,.count{
62 padding:0 5px;
63 color:#f00;
64 }
65
66 input{
67 float: left;
68 margin:0 5px;
69 width: 38px;
70 height: 38px;
71 line-height: 38px;
72 text-align: center;
73 background: #fff;
74 border: 1px solid #ebebeb;
75 outline: none;
76 color: #bdbdbd;
77 font-size: 14px;
78 }
package.json:
1 {
2 "items": [
3 {
4 "name": "a",
5 "age": 12
6 },
7 {
8 "name": "b",
9 "age": 13
10 },
11 {
12 "name": "c",
13 "age": 11
14 },
15 {
16 "name": "d",
17 "age": 12
18 },
19 {
20 "name": "e",
21 "age": 12
22 }
23 ]
24 }
main.js
1 /**
2 * Created by mengfanxu on 17/2/3.
3 */
4 $(function () {
5
6 var showBox = $(‘.box‘);
7
8 $.getJSON(‘data/package.json‘, function (data) {
9 console.log(data.items.length);
10 var item = data.items,length = data.items.length, pageIndex ;
11 //默认页面显示内容
12 showBox.html(‘姓名：‘+item[0][‘name‘]+‘\n‘+‘年龄：‘+item[0][‘age‘]);
13 $(".M-box").pagination({
14 pageCount: length,
15 jump: true,
16 coping: true,
17 homePage: ‘首页‘,
18 endPage: ‘末页‘,
19 preContent: ‘上页‘,
20 nextContent: ‘下页‘,
21 callback: function (index) {
22 pageIndex = index.getCurrent()-1;
23 showBox.html(‘姓名：‘+item[pageIndex][‘name‘]+‘\n‘+‘年龄：‘+item[pageIndex][‘age‘]);
24 }
25 })
26 });
27
28
29 });
喝水不忘造井之恩，插件作者：Mss: http://www.jq22.com/jquery-info5697
时间： 2024-10-09 22:27:08