<!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 版分页类, 可用于ajax</title>
<STYLE TYPE="text/css">
/*默认页样式*/
.otherPage{color:blue}
/*当前页样式*/
.currPage{color:red}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
javascript 版分页类, 可用于ajax
2010-10-21 20:52 by ggg
*/
var ggg_pager= {
m_total : 0 , //总记录数
m_onepage : 0 , //每页显示几条记录
m_num : 5 , //显示几个页码
m_currPage : 0 , //当前是第几页
m_totalPage : 0 , //总共有几页
m_offset : 0 , //当前是第几条记录
m_currPageStyle : "currPage", //分页导行显示在哪个元素里
m_currPageStyle : "currPage", //当前页面样式名
m_otherPageStyle : "otherPage", //当前页面样式名
m_SymbolNextPage : "[>]", //下一页图标
m_SymbolPrevPage : "[<]", //上一页图标
m_SymbolNextGroup : "[>>]", //下一组图标
m_SymbolPrevGroup : "[<<]", //上一组图标
m_goCallFunction : null, //点页码时回调
/**
* 初始化参数
*
* @param int $total 总记录数
* @param int $onepage 每页显示几条记录
* @param int num 显示几个页码
* @param function callFunc 点页码时回调
* @return null
*/
iniParams : function( total, onepage, callFunc,num,pageNavDom){
this.m_total = total;
this.m_onepage = onepage;
if(typeof(num) != 'undefined')
this.m_num = num;
if(typeof(callFunc) != 'undefined')
this.m_goCallFunction = callFunc;
this.m_totalPage = Math.ceil(total / onepage);
},
/**
* 取得下一页.$char为链接的字符,默认为"[>]"
*
* @return string
*/
nextPage : function( ) {
var total_page = this.m_totalPage;
var pagecount = this.m_currPage;
var char = this.m_SymbolNextPage;
var next_page = 0;
if (pagecount < total_page)
{
next_page = pagecount + 1;
return this.pageButton(next_page,char,"下一页");
}
else
{
return '';
}
},
/**
* 取得上一页.$char为链接的字符,默认为"[<]"
*
* @return string
*/
prePage : function( ) {
var pagecount = this.m_currPage;
var char = this.m_SymbolPrevPage;
var pre_page = 0;
if (pagecount>1)
{
pre_page = pagecount - 1;
return this.pageButton(pre_page,char,"上一页");
}
else
{
return '';
}
},
/**
* 取得上一组数字条.$char为链接的字符,默认为"[<<]"
*
* @return string
*/
preGroup : function( ) {
var pagecount = this.m_currPage;
var num = this.m_num;
var mid = Math.floor(num/2);
var minpage = (pagecount - mid)<1 ? 1 : pagecount - mid;
char = this.m_SymbolPrevGroup ;
var pgpagecount = minpage > num ? minpage - mid : 1;
return this.pageButton(pgpagecount,char,"上一组页码段");
},
/**
* 取得下一组数字条.$char为链接的字符,默认为"[>>]"
*
* @return string
*/
nextGroup : function( ) {
var pagecount = this.m_currPage;
var totalpage = this.m_totalPage;
var num = this.m_num;
var mid = Math.floor(num/2);
var last = num;
var minpage = (pagecount - mid)<1 ? 1 : pagecount - mid;
var maxpage = minpage + last;
if (maxpage > totalpage)
{
maxpage = totalpage;
minpage = maxpage - last;
minpage = minpage < 1 ? 1 : minpage;
}
char = this.m_SymbolNextGroup ;
var ngpagecount = (totalpage > maxpage + last)? maxpage + mid : totalpage;
return this.pageButton(ngpagecount,char,"下一组页码段");
},
/**
* 取得第一页.$link为1是为带链接
*
* @param int $num 为个数,默认为10
* @param string $color 为当前链接的突显颜色
* @return string
*/
firstPage : function( link ) {
var linkchar = "<span class='"+this.m_otherPageStyle+"'> [1]</span>";
if (link==1)
{
return this.pageButton(1,linkchar,"第一页");
}
else
{
return 1;
}
},
/**
* 取得页码数字条
*
* @param string $color 为当前链接的突显颜色
* @param string $left 数字左边 默认为"["
* @param string $right 数字左右 默认为"]"
* @return string
*/
numBar : function( left, right) {
var num = this.m_num ;
var mid = Math.floor(num/2);
var last = num - 1;
var pagecount = this.m_currPage;
var totalpage = this.m_totalPage;
left = typeof(left) =='undefined' ? "[" : left;
right = typeof(right) =='undefined' ? "]" : right;
var minpage = (pagecount - mid)<1 ? 1 : pagecount - mid;
var maxpage = minpage + last;
if (maxpage > totalpage)
{
maxpage = totalpage;
minpage = maxpage - last;
minpage = minpage<1 ? 1 : minpage;
}
var linkchar = Array();
var class_style = null;
var chars = null;
for (var i = minpage; i<= maxpage; i++)
{
chars = left + i+ right;
//当前页
if (i == pagecount)
{
class_style = this.m_currPageStyle;
}
else
class_style = this.m_otherPageStyle;
linkchar.push(this.pageButton(i,chars,"第"+i+"页",class_style));
}
return linkchar.join('');
},
//得到页码内容
pageButton : function(num,char,title,classStyle){
classStyle = typeof(classStyle) =='undefined' ? this.m_otherPageStyle : classStyle;
return "<a class='" + classStyle + "' href=\"javascript:void(0);\" mce_href=\"javascript:void(0);\" οnclick='ggg_pager.go(" + num + ")' title=\""+title+"\">"+char+"</a>";
},
//跳到指定页面
//返回
go : function(num){
this.m_currPage = num;
//返回下页代码
var ret_str = this.getPages(num);
//回调指定函数
if(null != this.m_goCallFunction)
this.m_goCallFunction(num,ret_str);
return ret_str;
},
//得到最终的分页效果
//currPage 当前第几页
getPages : function(currPage){
if (currPage=='')
{
this.m_currPage = 1;
this.m_offset = 0;
}
else
{
this.m_currPage = currPage;
this.m_offset = (currPage - 1) * this.m_onepage;
}
var num_bar = this.numBar();
var first_page = this.firstPage(1, '');
var pre_group = this.preGroup(this.m_SymbolPrevGroup);
var next_group = this.nextGroup(this.m_SymbolNextGroup);
var next_page = this.nextPage(this.m_SymbolNextPage);
var pre_page = this.prePage(this.m_SymbolPrevPage);
var ret_str = first_page + pre_group +pre_page + num_bar +next_page +next_group;
return ret_str
}
};
//-->
</SCRIPT>
</head>
<body>
<div id="ggg_page_nav"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
//点击某页时的回调函数
function page_click(numb,pageString)
{
//这里可以用 ajax 进行取页面里的内容
alert("跳到第 "+ numb+ " 页");
//重新显示页面
document.getElementById("ggg_page_nav").innerHTML= pageString;
}
/**
* 初始化参数
*
* @param int $total 总记录数
* @param int $onepage 每页显示几条记录
* @param int num 显示几个页码
* @param function callFunc 点页码时回调
* @return object
*/
//iniParams : function( total, onepage, callFunc,num,pageNavDom){
ggg_pager.iniParams(100,5,page_click,5);
//默认当前第几页
var curr_page = 1;
document.getElementById("ggg_page_nav").innerHTML= ggg_pager.getPages(curr_page);
//-->
</SCRIPT>
</body>
</html>
1373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
