分页控件, 是一个使用原生的JavaScript代码编写的控件. 主要是为了在我的数据表格控件中使用, 可单独使用.. 使用时只需要给它传一个数据的总数, 还可以再传每页大小和当前页码, 然后重写onclick方法, 获取翻页事件, 可用来向服务器端发起AJAX请求, 其它的就不需要你再做了.
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JavaScript分页控件</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-size: 14px;
font-family: tahoma, arial;
background: #fff;
}
.PagerView{
color: #333;
text-align: center;
margin: 8px;
}
.PagerView span{
color: #999;
margin: 0 1px;
padding: 3px 6px;
border: 1px solid #ccc;
}
.PagerView span.on{
color: #333;
font-weight: bold;
border: 1px solid #333;
}
.PagerView a{
color: #00f;
text-decoration: none;
}
.PagerView a span{
border: 1px solid #66c;
color: #33f;
}
.PagerView a:hover span{
color: #f00;
background: #ff9;
}
</style>
<script type="text/javascript">
function PagerView(id){
var self = this;
this.id = id;
this.container = null;
this.index = 1; // 当前页码, 从1开始
this.size = 15; // 每页显示记录数
this.maxButtons = 9; // 显示的分页按钮数量
this.itemCount = 0; // 记录总数
this.pageCount = 0; // 总页数
/**
* 控件使用者重写本方法, 获取翻页事件, 可用来向服务器端发起AJAX请求.
* @param index: 被点击的页码.
*/
this.onclick = function(index){
};
/**
* 内部方法.
*/
this._onclick = function(index){
self.index = index;
self.onclick(index);
self.render();
};
/**
* 在显示之前计算各种页码变量的值.
*/
this.calculate = function(){
self.pageCount = parseInt(Math.ceil(self.itemCount / self.size));
self.index = parseInt(self.index);
if(self.index > self.pageCount){
self.index = self.pageCount;
}
};
/**
* 渲染分页控件.
*/
this.render = function(){
if(self.id != undefined){
var div = document.getElementById(self.id);
div.view = self;
self.container = div;
}
self.calculate();
var start, end;
start = Math.max(1, self.index - parseInt(self.maxButtons/2));
end = Math.min(self.pageCount, start + self.maxButtons - 1);
start = Math.max(1, end - self.maxButtons + 1);
var str = "";
str += "<div class=/"PagerView/">/n";
if(self.pageCount > 1){
if(self.index != 1){
str += '<a href="javascript://1"><span>|<</span></a>';
str += '<a href="javascript://' + (self.index-1) + '"><span><<</span></a>';
}else{
str += '<span>|<</span>';
str += '<span><<</span>';
}
}
for(var i=start; i<=end; i++){
if(i == this.index){
str += '<span class="on">' + i + "</span>";
}else{
str += '<a href="javascript://' + i + '"><span>' + i + "</span></a>";
}
}
if(self.pageCount > 1){
if(self.index != self.pageCount){
str += '<a href="javascript://' + (self.index+1) + '"><span>>></span></a>';
str += '<a href="javascript://' + self.pageCount + '"><span>>|</span></a>';
}else{
str += '<span>>></span>';
str += '<span>>|</span>';
}
}
str += ' 一共' + self.pageCount + '页, ' + self.itemCount + '条记录 ';
str += "</div><!-- /.pagerView -->/n";
self.container.innerHTML = str;
var a_list = self.container.getElementsByTagName('a');
for(var i=0; i<a_list.length; i++){
a_list[i].onclick = function(){
var index = this.getAttribute('href');
if(index != undefined && index != ''){
index = parseInt(index.replace('javascript://', ''));
self._onclick(index)
}
return false;
};
}
};
}
</script>
</head>
<body>
<h1>分页控件PagerView示例</h1>
<div id="pager" style="width: 900px; margin: 20px; padding: 4px; border: 1px solid #999;">
</div>
<div id="info" style="text-align: center; width: 900px; margin: 0 20px; padding: 4px; border: 1px solid #999;">
</div>
<div style="text-align: center; width: 900px; margin: 0 20px; padding: 4px;">
<a href="http://hi.csdn.net/Cherry520123456">http://hi.csdn.net/Cherry520123456</a>
</div>
<script type="text/javascript">
var pager = new PagerView('pager');
pager.itemCount = 301;
pager.size = 5;
pager.index = 3;
pager.onclick = function(index){
document.getElementById('info').innerHTML = '现在翻到第' + index + '页';
if(index == 12){
if(confirm('现在是12页, 要弹出一个窗口?')){
url = http://hi.csdn.net/Cherry520123456';
window.open(url);
}
}
};
pager.render();
</script>
</body>
</html>