javascript 版分页类, 可用于ajax
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 : "page_h", //分页导行显示在哪个元素里
//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 char = '<strong class="pa_d">' + this.m_SymbolNextPage + '</strong>';
var next_page = 0;
if (pagecount < total_page)
{
next_page = pagecount + 1;
return this.pageButton2(next_page,char,"下一页");
}
else
{
return '<strong class="page_down">上一页</strong>';
}
},
/**
* 取得上一页.$char为链接的字符,默认为"[<]"
*
* @return string
*/
prePage : function( ) {
var pagecount = this.m_currPage;
//var char = this.m_SymbolPrevPage;
var char = '<strong class="pa_u">' + this.m_SymbolPrevPage + '</strong>';
var pre_page = 0;
if (pagecount>1)
{
pre_page = pagecount - 1;
return this.pageButton2(pre_page,char,"上一页");
}
else
{
return '<strong class="page_up">上一页</strong>';
}
},
/**
* 取得上一组数字条.$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>";
var linkchar = "首页";
if (link==1)
{
return this.pageButton(1,linkchar,"第一页");
}
else
{
return 1;
}
},
lastPage : function( link ) {
var totalpage = this.m_totalPage;
//var linkchar = "<span class='"+this.m_otherPageStyle+"'> 1</span>";
var linkchar = "尾页";
if (link!=totalpage)
{
return this.pageButton(totalpage,linkchar,"最后一页");
}
else
{
return totalpage;
}
},
/**
* 取得页码数字条
*
* @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;
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);' onclick='ggg_pager.go("+num+")' title=\""+title+"\">"+char+"</a>";
},
//得到页码内容方式2，为控制a标签样式增加
pageButton2 : function(num,char,title,classStyle){
classStyle = typeof(classStyle) =='undefined' ? this.m_otherPageStyle : classStyle;
return "<a class='"+classStyle+"' style='padding:0;margin:0' 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 last_page = this.lastPage(this.m_totalPag, '');
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;
var ret_str = first_page + pre_page + num_bar +next_page +last_page;
return ret_str;
}
};
调用示例：
//调用分页类实现分页 begin
//点击某页时的回调函数
function page_click(numb,pageString)
{
//这里可以用 ajax 进行取页面里的内容
//numb为页数,pageString为分页导航内容
var bstr = "";
var kstr = "";
url = "/tool/xiaoshuo.php";
if (booktype!=null&&booktype!="") bstr = booktype;
if (keyword!=null&&keyword!="") kstr = keyword;
$.get(url,{booktype:bstr,keyword:kstr,pnum:numb},result,"json");
pnum = numb;
//重新显示页面
$("#page_nav").html(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(obj['totalnum'],16,page_click,10);
//默认当前第几页
var curr_page = pnum;
$("#page_nav").html(ggg_pager.getPages(curr_page));
//调用分页类实现分页 end