<!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);\" onclick='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>
?