直接看效果点这里
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页插件</title>
<link rel="stylesheet" href="page.min.css"/>
</head>
<body>
<script src="page.min.js"></script>
<script>
/**
* Created by [email protected] on 14-9-23.
*
* 分页
* @param box{[id]} 该分页放在什么容器里，默认随机创建一个id添加到body里
* @param isHeadAndTail{bool} 是否显示首页/尾页，默认true
* @param maxPage{number} 最多显示页码，默认10
* @param currPage{number} 当前页，默认1
* @param currPagePos{number} 当前页位置，默认4，必须小于页码数
* @param pageNum{number} 每页显示多少条数据，默认10
* @param countNum{number} 一共有多少条数据，默认0
*
* @event onChange(n) 每次切换页码时执行，n表示切换到某页
*
*/
var page = new Page({
‘countNum‘: 0,
‘onChange‘: function(n){
alert(‘你选择了第‘+n+‘页。‘);
}
});
var page2 = new Page({
‘countNum‘: 50,
‘onChange‘: function(n){
alert(‘你选择了第‘+n+‘页。‘);
}
});
var page3 = new Page({
‘countNum‘: 99,
‘onChange‘: function(n){
alert(‘你选择了第‘+n+‘页。‘);
}
});
var page4 = new Page({
‘countNum‘: 1001,
‘onChange‘: function(n){
alert(‘你选择了第‘+n+‘页。‘);
}
});
page4.render(101);
</script>
</body>
</html>
CSS
@charset "utf-8";
html, body { margin: 0; padding: 0; }
a,a:link,a:visited,a:hover,a:active,a:focus { text-decoration: none; }
.m_page { text-align: center; font-size: 12px; color: #666; }
.page_main a,.page_select,.page_btn { border-radius: 3px; border: 1px #ccc solid; }
.page_main a { display:inline-block; vertical-align:top; padding: 5px 10px; margin: 0 3px; color: #333; background-color: #fff; }
.page_main a:hover { border-color: #ccc; }
.page_main .page_active,.page_main a:hover,.page_btn:hover { color:#fff; border-color:#125dae; background-color:#2173cd; text-decoration: none; }
.page_main .page_active { cursor: default; }
.page_main .page_prev { padding-left: 20px; }
.page_main .page_next { padding-right: 20px; }
.page_prev,.page_next { position: relative; }
.page_prev i,.page_next i { position: absolute; top: 8px; border-style: solid; border-width: 4px; font-size: 0; height: 0; line-height: 0; width: 0; }
.page_prev i { left: 5px; border-color: #fff #666 #fff #fff;}
.page_next i { right: 5px; border-color: #fff #fff #fff #666;}
.page_prev:hover i { border-color: #2173cd #fff #2173cd #2173cd;}
.page_next:hover i { border-color: #2173cd #2173cd #2173cd #fff;}
.page_info { padding: 5px 0; color: #999; line-height: 24px; }
.page_select { width: 24px; height: 22px; line-height: 22px; padding: 0 5px; color: #666; margin: 0 3px; text-align: center; }
.page_btn { width: 50px; height: 24px; background: none; cursor: pointer; }
/**
* Created by [email protected] on 14-9-23.
*
* 分页
* @param box{[id]} 该分页放在什么容器里，默认随机创建一个id添加到body里
* @param isHeadAndTail{bool} 是否显示首页/尾页，默认true
* @param maxPage{number} 最多显示页码，默认10
* @param currPage{number} 当前页，默认1
* @param currPagePos{number} 当前页位置，默认4，必须小于页码数
* @param pageNum{number} 每页显示多少条数据，默认10
* @param countNum{number} 一共有多少条数据，默认0
*
* @event onChange(n) 每次切换页码时执行，n表示切换到某页
*
*/
var PageTools = {
create: function() {
return function() {
this.init.apply(this, arguments);
}
},
extend: function (d, s){
for(var i in s){
d[i] = s[i];
}
return d;
},
bindEvent: function(o, ev, fn){
window.addEventListener ? o.addEventListener(ev, fn, false) : o.attachEvent(‘on‘+ev, fn);
},
getByClass: function (classname, parent, nodename) {
var parent = parent || document, nodename = nodename || "*";
if(parent.getElementsByClassName){
return parent.getElementsByClassName(classname);
}else{
var l = parent.getElementsByTagName(nodename);
return function () {
var res = [];
for (var i = 0, j = l.length; i < j; i++) {
if (l[i].className){
var name = " " + l[i].className + " ";
if (name.indexOf(" " + classname + " ") != -1) {
res.push(l[i]);
}
}
}
return res;
} ();
}
},
getById: function(id){
return document.getElementById(id);
}
};
var Page = PageTools.create();
Page.prototype = {
init: function(opts){
this.opts = PageTools.extend({
‘isHeadAndTail‘: true,
‘box‘: ‘page‘+Math.floor(Math.random() * new Date().getTime()),
‘currPage‘: 1,
‘currPagePos‘: 4,
‘maxPage‘: 10,
‘pageNum‘: 10,
‘countNum‘: 0,
‘countPage‘: 0,
‘onChange‘: function(n){}
}, opts || {});
this.bState = true;
this.render(this.opts.currPage || 1);
},
render: function(currPage){
//没有数据的直接返回
if(this.opts.countNum < 1){ return false; }
var countPage = this.opts.countPage = Math.ceil(this.opts.countNum/this.opts.pageNum), maxPage = this.opts.maxPage - 1, startPageNum = 0, endPageNum = 0;
if(currPage < 1 || typeof currPage === ‘undefined‘){
currPage = 1;
}else if(currPage > countPage){
currPage = countPage;
}
var htmltpl = ‘<div class="m_page"><div class="page_main">‘, This = this;
if(this.opts.isHeadAndTail && currPage != 1){
htmltpl += ‘<a class="page_first" href="javascript:;">首页</a>‘;
}
htmltpl += ‘<a class="page_prev" href="javascript:;"><i></i>上一页</a>‘;
if(currPage <= this.opts.currPagePos){
startPageNum = 1;
}else if(currPage > (countPage - maxPage)){
startPageNum = countPage - maxPage < 1 ? 1 : countPage - maxPage;
}else{
startPageNum = currPage - this.opts.currPagePos;
}
if(startPageNum + maxPage >= countPage){
endPageNum = countPage;
}else{
endPageNum = startPageNum + maxPage;
}
for(var i = startPageNum; i <= endPageNum; i++){
if(i === currPage){
htmltpl += ‘<a class="page_active" href="javascript:;">‘+i+‘</a>‘;
}else{
htmltpl += ‘<a class="page_num" href="javascript:;">‘+i+‘</a>‘;
}
}
htmltpl += ‘<a href="javascript:;" class="page_next">下一页<i></i></a>‘;
if(this.opts.isHeadAndTail && currPage != countPage){
htmltpl += ‘<a href="javascript:;" class="page_last">尾页</a>‘;
}
htmltpl += ‘</div><div class="page_info">共<span class="page_count_record">‘+this.opts.countNum+‘</span>条记录，共<span class="page_count_pagination">‘+countPage+‘</span>页，当前显示第<span class="page_range">‘+((currPage-1)*this.opts.pageNum + 1) +‘-‘+(this.opts.countNum < this.opts.pageNum ? this.opts.countNum : currPage*this.opts.pageNum > this.opts.countNum ? this.opts.countNum : currPage*this.opts.pageNum)+‘</span>条，到<input type="text" class="page_select" value="">页，<button class="page_btn">确定</button></div></div>‘;
this.opts.currPage = currPage;
var oBox = document.getElementById(this.opts.box);
if(oBox){
oBox.innerHTML = htmltpl;
}else{
oBox = document.createElement(‘div‘);
oBox.id = this.opts.box;
oBox.innerHTML = htmltpl;
document.getElementsByTagName(‘body‘)[0].appendChild(oBox);
}
if(this.bState){
// TODO:不添加开关会执行多次
this.bState = false;
PageTools.bindEvent(oBox, ‘click‘, function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
This.events(target);
});
}
},
events: function(target){
switch (target.className){
case ‘page_num‘:
this.goPage(parseInt(target.innerHTML, 10));
break;
case ‘page_first‘:
this.firstPage();
break;
case ‘page_prev‘:
this.prevPage();
break;
case ‘page_next‘:
this.nextPage();
break;
case ‘page_last‘:
this.lastPage();
break;
case ‘page_btn‘:
var n = parseInt(target.previousElementSibling ? target.previousElementSibling.value : PageTools.getByClass(‘page_select‘, PageTools.getById(this.opts.box))[0].value, 10);
if(isNaN(n) || n == 0){
n = 1;
}else if(n > this.opts.countPage){
n = this.opts.countPage;
}
this.goPage(n);
break;
}
},
firstPage: function(){
this.render(1);
this.opts.onChange(1);
},
prevPage: function(){
var n = this.opts.currPage > 1 ? this.opts.currPage - 1 : 1;
this.render(n);
this.opts.onChange(n);
},
lastPage: function(){
var n = this.opts.countPage;
this.render(n);
this.opts.onChange(n);
},
nextPage: function(){
var n = this.opts.currPage < this.opts.countPage ? this.opts.currPage + 1 : this.opts.countPage;
this.render(n);
this.opts.onChange(n);
},
goPage: function(n){
this.render(n);
this.opts.onChange(n);
}
};
时间： 2024-11-08 06:34:52