修改自网络上的一个分页控件,供参考:
用法示例:
pager.js
var PAGER = {
currentPage: 1, //当前页
totalPages: 0, //总页数
pageNums: 10, //显示的页码数
pageNumArr: new Array(), //页码数组
pager: null, //显示分页的html对象
callbackFun: null, //回调函数, 入参: 当前页码
/**
* 初始化分页参数
* currentPage: 当前页码
* total: 总页数
* pageSize: 每页显示条目数
* obj: 显示分页的html对象id
* callbackFun: 分页回调函数
*/
initPager: function(currentPage, total, pageSize, pageNums, obj, callbackFun) {
if(total%pageSize==0) {
this.totalPages = total/pageSize;
} else {
this.totalPages = total/pageSize + 1;
}
this.totalPages = parseInt(this.totalPages);
this.currentPage = currentPage;
this.pageNums = pageNums;
this.pager = document.getElementById(obj);
this.callbackFun = callbackFun;
this.renderPager();
},
/**
* 执行回调函数
*/
doCallBack: function() {
if(this.callbackFun) {
this.callbackFun(this.currentPage);
}
},
/**
* 跳转到首页
*/
gotoFirstPage: function() {
this.currentPage = 1;
this.renderPager();
},
/**
* 跳转到尾页
*/
gotoLastPage: function() {
this.currentPage = this.totalPages;
this.renderPager();
},
/**
* 跳转到上一页
*/
gotoPrePage: function() {
if (this.currentPage>1) {
this.currentPage --;
this.renderPager();
}
},
/**
* 跳转到下一页
*/
gotoNextPage: function() {
//if(this.currentPage<this.pageNumArr[this.pageNumArr.length-1]) {
if(this.currentPage<this.totalPages) {
this.currentPage++;
this.renderPager();
}
},
/**
* 跳转到指定页
*/
gotoPage: function(targetPage) {
if(targetPage<1) {
targetPage = 1;
} else if(targetPage>this.totalPages) {
targetPage = this.totalPages;
}
this.currentPage = targetPage;
this.renderPager();
},
/**
* 渲染分页数据
*/
renderPager: function() {
//alert(this.currentPage);
var begin = 1;
this.pageNumArr = new Array();
var midPage = Math.floor(this.pageNums/2);
if(this.totalPages>this.pageNums) {
if (this.currentPage>midPage) {
begin = this.currentPage - midPage;
}
if (this.totalPages-this.currentPage<midPage) {
begin = this.totalPages - (this.pageNums-1);
}
}
for(var i=begin; i<=this.totalPages&&i<this.pageNums+begin; i++) {
this.pageNumArr.push(i);
}
var pageStr = "";
var preStr = "<ul><li id='prePage' οnclick='PAGER.gotoPrePage()'>上一页</li><li id='firstPage' οnclick='PAGER.gotoFirstPage()'>首页</li>";
var nextStr = "<li id='lastPage' οnclick='PAGER.gotoLastPage()'>尾页</li><li id='nextPage' οnclick='PAGER.gotoNextPage()'>下一页</li></ul>";
var cenStr = "";
for(var i=0; i<this.pageNumArr.length; i++) {
if (this.currentPage==this.pageNumArr[i]) {
cenStr += "<li class='curLi' οnclick='PAGER.gotoPage(" + this.pageNumArr[i] + ")'>" + this.pageNumArr[i] + "</li>";
} else {
cenStr += "<li οnclick='PAGER.gotoPage(" + this.pageNumArr[i] + ")'>" + this.pageNumArr[i] + "</li>";
}
}
pageStr = preStr + cenStr + nextStr;
this.pager.innerHTML = pageStr;
this.doCallBack();
}
}
用法示例:
<html>
<head>
<title></title>
<link href="pager.css" rel="stylesheet" type="text/css" />
<script src="pager.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function getData(tp) {
//alert(tp);
}
</script>
</head>
<body οnlοad="PAGER.initPager(1, 222, 5, 7, 'pager', getData)">
<form>
<div id="pager"></div>
</form>
</body>
</html>