准备工作
Page.js页面源码
//cP但前页码
//tP总页数
//tN总记录数
function showPages(cP,tP,tN){
//处理页码大于总页数
if(cP>=tP){
cP=tP;
}
//处理页码小于1
if(cP<1){
cP=1;
}
var pageHtml="共"+tN+"项 第"+cP+"/"+tP+"页";
if(cP==1){
pageHtml+=" 首页 上页";
}else{
pageHtml+=" <a href=\"javascript://nop/\" onclick='gotoPage(1)'>首页</a>";
pageHtml+="<a href=\"javascript://nop/\" onclick='gotoPage("+(parseInt(cP)-1)+")'> 上页 </a>";
}
if(cP>=tP){
pageHtml+=" 下页 尾页";
}else{
pageHtml+="<a href=\"javascript://nop/\" onclick='gotoPage("+(parseInt(cP)+1)+")'> 下页</a>";
pageHtml+="<a href=\"javascript://nop/\" onclick='gotoPage("+tP+")'> 尾页</a>";
}
pageHtml += " <input name=\"pageNo\" type=\"text\" id=\"pageNo\" size=\"3\" onKeyPress=\"return handleEnterOnPageNo();\"> "+
"<input name=\"goto\" type=\"button\" id=\"goto\" value=\"go\" "+
"onClick=\"forward();\">";
$("page").innerHTML = pageHtml;
}
//构造页面跳转的js函数,函数中需要判断输入的页号是否是合法的数值
function forward()
{
if(!(/^([-]){0,1}([0-9]){1,}$/.test($F("pageNo"))))
{
//输入的值不合法
alert("请输入合法的页号!");
$("pageNo").focus();
$("pageNo").select();
}
else
gotoPage($F("pageNo"));
}
//处理在跳转页面上按下回车的情况
function handleEnterOnPageNo()
{
if(event.keyCode == 13)
{
forward();
return false;
}
return true;
}
在jsp调用页面引入
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/Page.js"></script>
- 描述: 翻页效果如下
- 大小: 12.5 KB
分享到:
相关推荐
本知识点将深入探讨如何使用Ajax实现分页功能。 首先,理解Ajax的基本原理是至关重要的。Ajax的核心在于创建XMLHttpRequest对象,它负责与服务器进行通信。通过调用其open()方法指定请求类型(GET或POST)、URL和...
总结起来,Ajax实现分页查询涉及客户端JavaScript的Ajax请求、服务器端JSP的处理以及前端的数据解析和展示。通过这种方式,你可以为用户提供流畅的分页体验,同时避免了页面的全量刷新。在实际项目中,还可以结合...
在Web开发中,分页功能是一项非常常见的需求,它...总的来说,AJAX实现的分页功能使得Web应用能够更加动态和响应式,提高了用户的浏览效率,降低了服务器的压力。掌握这项技术对于任何Web开发者来说都是非常有价值的。
本教程将深入探讨ASP.NET AJAX分页的相关知识点,以及如何编写分页代码。 1. **什么是ASP.NET AJAX分页?** ASP.NET AJAX分页是一种通过使用ASP.NET AJAX库(以前称为Atlas)实现的客户端分页方法。它利用...
本教程将围绕“ajax实现分页jquery代码”这一主题,详细介绍如何使用Ajax和jQuery实现动态分页,并讨论如何调整CSS以优化样式。 首先,我们需要引入jQuery库和jQuery分页插件。在HTML文件中,添加以下链接和脚本...
本篇将深入探讨如何使用Ajax实现这一功能。 首先,我们需要理解Ajax的基本原理。Ajax允许我们在不刷新整个页面的情况下,与服务器进行后台数据交互。它通过创建XMLHttpRequest对象发送HTTP请求,并处理服务器返回的...
在这个特定的案例中,"PHP+AJAX实现分页"是一个常见的需求,它允许用户在不刷新整个页面的情况下加载更多数据,提升用户体验。下面我们将详细探讨这一主题。 首先,分页是一种组织大量数据的方法,它将数据分割成可...
本篇文章将详细介绍如何利用jQuery实现Ajax异步分页,以及其背后的原理和实践应用。 首先,让我们理解什么是Ajax。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容...
jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和XML)技术,可以实现动态、高效的分页效果。本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能...
例如,可以使用LIMIT和OFFSET关键字来实现分页。LIMIT用于指定每页的记录数,OFFSET则用于跳过前几条记录,从而获取特定页的数据。 以下是实现步骤的概述: 1. 创建JSP页面,设置HTML结构,包括表格和分页导航栏。...
本文将深入探讨如何利用Ajax实现分页功能,以及相关的核心知识点。 ### 一、Ajax基础 Ajax是一种创建动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。通过...
总结,这个项目展示了如何在Java Web环境中,利用SSM框架处理业务逻辑,Maven管理依赖,通过Ajax实现前后端交互以达到动态分页效果。每个环节都体现了现代Web开发的组件化和模块化思想,对于理解和实践Java Web开发...
### 使用SSM框架中的Ajax实现自定义分页数据 在Web开发中,为了提升用户体验、减少服务器负担,分页功能的实现变得尤为重要。而在实际应用中,Ajax技术因其能够实现局部刷新、异步加载等功能而被广泛应用于动态加载...
在网页开发中,分页是一种常见的数据展示方式...总之,使用Ajax实现分页功能能够提升用户体验,避免了传统页面跳转带来的加载延迟。通过熟练掌握Ajax通信和前端分页的实现,我们可以创建更加流畅和高效的Web应用程序。
本教程重点讨论如何利用Ajax与Java结合实现高效、动态的分页功能。 首先,理解Ajax(Asynchronous JavaScript and XML)的核心概念:异步更新页面内容,无需刷新整个页面。这极大地提高了用户体验,因为用户可以...
Ajax(Asynchronous JavaScript and XML)技术的引入,使得页面在不进行整个页面刷新的情况下实现分页,极大地提升了用户体验。本篇文章将深入探讨如何利用Ajax技术实现分页。 一、Ajax基础 Ajax的核心在于创建...
三、Ajax实现分页查询步骤 1. 创建Ajax请求:在JavaScript中,我们使用XMLHttpRequest对象(或fetch API)创建一个HTTP请求,指定请求类型(GET或POST)、URL以及可能的数据。 2. 发送请求:向服务器发送请求,同时...
- **前端框架**:如React、Vue或Angular等,它们提供了更高级的组件化方法,可以通过内置的Ajax库(如axios)和虚拟DOM轻松实现分页。 **注意事项:** 1. **SEO优化**:由于Ajax分页是异步加载的,对于搜索引擎爬虫...
使用java,jsp,mysql实现Ajax分页。可以观察到ajax按需获取数据,异步交互的过程。这个代码可以直接引用到其他需要分页的地方。booklist.jsp是前台显示页面,getbooks.jsp是后台与数据库操作页面,creathttp.js是...