1. pagetion.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>分页标签</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style>
body{
font-size: 12px;
color: #333333;
}
a{
margin :2px;
}
.selected{
background-color:#FFFFCC;
padding:2px;
border:1px solid #999999;
}
</style>
</head>
<body>
<div id="paging"></div>
<script type="text/javascript">
PagingBar = function(config){
//当前分页标签产生的HTML代码渲染的目标对象
this.render;
//总记录数
this.total;
//一共显示多少页
this.page=7;
//每页记录数
this.size = 20;
//当前第几页
this.current = 1;
for(var i in config){
this[i]=config[i];
}
this.init=function(){
this.render=(typeof this.render==="string")?document.getElementById(this.render):this.render;
}
this.init();
this.createHref=function(html,index){
var href = document.createElement("A");
href.href="javascript:void(0);";
href.innerText = html;
if(this.current===index){
href.className="selected";
}
href.onclick = function(paging,ind){
return function(){
paging.current = ind;
paging.html();
//console.log(paging.current);
}
}(this,index);
return href;
};
this.html=function(){
this.render.innerHTML="";
//var str= new StringBuffer();
//计算总页数
var totalPage =this.total%this.size===0?this.total/this.size:this.total%this.size+1;
/*var text=document.createTextNode("共"+this.total+"条 每页"+this.size+"条 共"+totalPage+"页");
text.appendData(" 当前第"+this.current+"页"+((this.current-1)*this.size+1)+"-"+(this.current*this.size)+" 条 ");
this.render.appendChild(text);*/
if(this.current > 1) {
this.render.appendChild(this.createHref("首页",1));
this.render.appendChild(this.createHref("上一页",this.current-1));
}else{
text = document.createTextNode("首页 上一页");
this.render.appendChild(text);
}
//显示中间数字页 7 中 4 =8 4 7-1 6/3+1
//2 < 4
var m=(this.page%2===0?this.page/2:(this.page-1)/2+1);
//当当前页数<每页多少页/2 的时候,点击不需要改变数字
//当总记录数-当前页数>每页记录数/2时候,点击时不需要改变数字
var start;
var end;
//1,2,3,4
if((this.current<= m) || totalPage-this.current <= m) {
//当
var t=totalPage<this.page?0:totalPage-this.page;
var start =this.current<=m?0:t;
var end = start+this.page>=totalPage?totalPage:start+this.page;
}else{
var start =this.current-m;
var end = start+this.page;
}
for(var i = start + 1; i <= end; i++){
this.render.appendChild(this.createHref(i, i));
}
if(this.current < totalPage){
this.render.appendChild(this.createHref("下一页",this.current + 1));
this.render.appendChild(this.createHref("尾页",totalPage));
} else {
text = document.createTextNode("下一页 尾页");
this.render.appendChild(text);
}
}
};
var pb = new PagingBar({
total:300,
page: 7,
current: 1,
render: 'paging'
});
pb.html();
</script>
</body>
</html>