<!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
分享到：
相关推荐
总结来说，这个"js版分页类,ajax效果无刷新"是一个使用JavaScript和AJAX技术实现的轻量级分页解决方案，旨在提高网页加载速度和用户体验。通过学习和理解这个示例，开发者可以更好地掌握动态加载数据和页面局部更新...
本篇文章将深入探讨“php经典多样式分页类”以及如何结合Ajax实现动态分页。 首先，PHP分页类是将数据库查询结果按照一定数量的数据条目进行切片，形成多页显示的工具。它通常包含以下核心功能： 1. 计算总页数：...
Java AJAX（Asynchronous JavaScript and XML）分页与JSP（JavaServer Pages）相结合，可以提供无需刷新整个页面即可动态加载更多内容的能力，提高用户体验。本教程将深入探讨如何使用AJAX、JavaScript以及MySQL...
- 可配置性：分页类应允许设置每页记录数、URL参数名、样式等。 - 安全性：确保页码参数经过验证和过滤，防止注入攻击。 - SEO友好：对于搜索引擎爬虫，可能需要提供非Ajax版本的分页链接。 - 错误处理：处理...
jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和XML）技术，可以实现动态、高效的分页效果。本篇文章将深入探讨jQuery AJAX分页的原理与实践，通过具体的实例来展示如何实现炫酷的分页功能...
"Ajax JavaScript jsp 分页效果"是一个利用AJAX（异步JavaScript和XML）技术，JavaScript编程，以及jsp（JavaServer Pages）来实现的动态分页解决方案。下面我们将详细探讨这些知识点。 首先，**AJAX** 是一种在...
- **事件监听**：通过JavaScript监听用户的分页操作，触发Ajax请求。 **实现方式：** - **jQuery插件**：如jQuery Pagination，提供简单易用的API，快速实现分页功能。 - **纯JavaScript**：利用原生的...
2. AJAX（Asynchronous JavaScript and XML）：AJAX不是单一的技术，而是一种使用现有Web技术创建更好、更快、更互动的用户体验的方法。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页...
在网页开发中，Java AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现页面的无刷新更新，提升用户体验。本实例提供了完整的Java AJAX无刷新分页解决方案，允许用户在不重新加载整个页面的情况下浏览多页...
在Asp.net中，我们可以使用多种方式实现Ajax分页，如jQuery的Ajax功能、ASP.NET AJAX Control Toolkit中的Paging控件，或者自定义Ajax分页组件。这里我们将主要讨论使用jQuery Ajax和Asp.net MVC或Web Forms的方式。...
本文将深入解析给定的JavaScript代码片段，该片段实现了一个基于AJAX的分页功能，旨在为用户提供更流畅的数据浏览体验。 ### 核心概念：AJAX与分页 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载...
6. **Ajax应用**：Ajax常用于实现无刷新的页面更新，比如动态加载内容、实时表单验证、分页加载等。书中会介绍如何结合JavaScript和Ajax技术来实现这些功能，提高网页的响应速度和用户体验。 7. **跨域通信**：由于...
在本教程中，我们将探讨如何利用Ajax、Servlet、Java和JavaScript来实现这一功能。 首先，让我们从Java后端开始。Servlet是Java Web应用程序中的一个关键组件，用于处理HTTP请求和响应。在分页场景中，Servlet主要...
Ajax（Asynchronous JavaScript and XML）技术的引入，使得页面在不进行整个页面刷新的情况下实现分页，极大地提升了用户体验。本篇文章将深入探讨如何利用Ajax技术实现分页。 一、Ajax基础 Ajax的核心在于创建...
在Web开发中，MVC（Model-View-Controller）架构模式是一种常见的设计模式，用于分离应用程序的数据、逻辑和用户界面。Ajax（Asynchronous JavaScript and XML）技术则允许在不重新加载整个网页的情况下更新部分网页...
- `网络信息采集发布工具V7.0最新版.exe`可能是一个辅助工具，用于自动化收集和发布信息，与jQueryPager的分页功能无关，但可能在某些应用场景下与之配合使用。 总的来说，jQueryPager是一款易于集成且功能实用的...
**Ajax 分页请求详解** 在Web开发中，为了提高用户体验，我们经常需要实现页面内容的动态加载，而分页就是一种常见的数据展示方式。Ajax（Asynchronous JavaScript and XML）技术可以实现页面局部刷新，避免了整个...
Ajax分页的核心在于利用JavaScript异步与服务器进行通信，通常结合JSON或XML格式传输数据，但现代应用中JSON更常用，因为其结构与JavaScript对象更为接近，易于处理。在本案例中，`db`可能指的是数据库文件，这通常...
"tp3.2+ajax无刷新分页" 指的是使用ThinkPHP 3.2框架结合Ajax技术实现的无刷新分页功能。ThinkPHP 3.2是一个广泛使用的PHP开发框架，它提供了丰富的MVC（Model-View-Controller）架构支持，便于开发者构建Web应用。...
在Web开发中，分页功能是不可或缺的一部分，尤其是在处理大量数据时。AJAX（Asynchronous JavaScript and XML）技术与PHP的结合，可以实现无刷新分页，提高用户体验。本教程将深入讲解如何利用AJAX和PHP实现一个完整...