<!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>
- 大小: 6.1 KB
分享到：
相关推荐
Ajax + JavaScript + MySQL 实现的Ajax分页功能
Ajax+Servlet+Java+JavaScript实现分页,这个方法相当方便，你绝对没想到！
一个处理ajax分页和html静态化页面分页的类，method 处理环境 设置为 html，问号的位置会自动替换为去向页码或method 处理环境 设置为 ajax，ajax分页跳转页面的javascript方法，ajax_func_name后面的附带参数 默认...
分页意味着你将一个很大的数据集合分开放到多个页面中。用JavaScript做的一个分页代码
一个处理ajax分页和html静态化页面分页的类，method 处理环境 设置为 html，问号的位置会自动替换为去向页码或method 处理环境 设置为 ajax，ajax分页跳转页面的javascript方法，ajax_func_name后面的附带参数 默认...
基于Jquery+Ajax+Json实现分页显示附效果图
支持HTML,apsx,jsp,php,Ajax,javascript等分页 支持模式Link:Content.aspx?pageIndex=1&pageSize=10...Content.aspx?pageIndex=10&pageSize=10 支持模式Link:2005042155_1.html,2005042155_2....
ajax js javascript 动态分页源码，mysql数据库
叶子JavaScript分页实例，JS分页代码，实现类似ajax分页的效果，无刷新实现分页功能，用JS模拟出了动态获取分页字符串进行无刷新分页的过程，里面的例子有7个，每一个都有不同的分页样式。请注意，此代码不包括后台...
本案例使用ajax技术实现分页，方案为其中一种，其他方案后面会再发，因为项目比较有针对性，所以项目规模很小，便于查看学习，使用前先修改项目中的Constant类中的相关静态变量信息（数据库连接信息）后便可部署。...
jquery的Ajax分页插件，含html演示示例(javascript数组做数据源)
jsp带省略号的分页 使用ajax javascript实现 测试需要导入相应的数据库表和修改一些基本配置（不会导入表和修改配置的人不建议下载，免得说浪费你积分）
<script language="javascript" type="text/javascript"> <!-- function createAjax() { //该函数将返回XMLHTTP对象实例 var _xmlhttp; try { _xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的创建...
jquery+Ajax实现简单分页条效果 本文实例为大家分享了jquery+Ajax实现分页条效果的具体代码，供大家参考，具体内容如下 一、如果是jsp页面的话，可以用EL表达式和JSTL标签制作一个分页条，没有什么难度。用EL...
使用AJAX实现自动分页效果，，结合Javascript脚本代码，，，
使用Servlet+Jsp+JDBC实现增删改查，前台显示界面使用JavaScript、Ajax与后台交互进行登录验证，并对查询结果实现分页、局部刷新，以及复选框(全选、反选)操作，适合Web开发的初学者
JavaScript 分页 在后台用Ajax 与服务器交换数据，不用页面跳转
非常漂亮方法的javascript ajax jquery分页插件！无刷分页不用愁！
适合于新手小白参考，这个是通过ajax来写的js页面内容算是挺全的了，servlet使用的是ajax以及json字符串数据的传递不需要jsp的跳转，具有分页的功能，以及可以通过数据库增删改查，数据库文件在db文件夹里，在MySQL...
severlet jsp 分页 ajax等技术的笔记