📄 ajax实现分页查询 中国天易网.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0050)http://www.tee5.com/News/1/7/2007/05/News_150.html -->
<HTML><HEAD><TITLE>Ajax实现分页查询 >> 中国天易网</TITLE>
<META http-equiv=content-type content="text/html; charset=gb2312">
<META http-equiv=Content-Language content=zh-CN>
<META content="Ajax实现分页查询 - 中国天易网" name=Description>
<META content=Ajax实现分页查询 name=keywords><LINK
href="Ajax实现分页查询 中国天易网.files/style.css" type=text/css rel=stylesheet>
<SCRIPT src="Ajax实现分页查询 中国天易网.files/webmain.js" type=text/javascript></SCRIPT>
<META content="MSHTML 6.00.2900.3314" name=GENERATOR></HEAD>
<BODY><!-- 头部 Start -->
<DIV id=StyleHead>
<DIV id=StyleLogo><IMG src="Ajax实现分页查询 中国天易网.files/logo.jpg" border=0></DIV>
<DIV id=StyleMasthead>
<DIV id=StyleNavbg><IMG src="Ajax实现分页查询 中国天易网.files/tee5_pic_01.jpg"
border=0></DIV>
<DIV id=StyleChannelNav>
<DIV class=StyleChannel><SPAN id=ChannelUrl><A title=天易网首页
href="http://www.tee5.com/">首 页</A></SPAN>
<SCRIPT src="Ajax实现分页查询 中国天易网.files/channel.js"></SCRIPT>
</DIV></DIV>
<DIV id=StyleMastLinks>
<DIV class=StyleMastLinks><A
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.tee5.com');"
href="http://www.tee5.com/News/1/7/2007/05/News_150.html#">设为主页</A></DIV>
<DIV class=StyleMastLinks><A
href="javascript:window.external.addFavorite('http://www.tee5.com','中国天易网')">加入收藏</A></DIV></DIV>
<DIV id=Stylebanner>
<DIV class=StyleNavBg></DIV>
<DIV class=Styleads>
<DIV class=StylebannerPic>
<SCRIPT src="Ajax实现分页查询 中国天易网.files/banner.js"></SCRIPT>
</DIV>
<DIV class=StyleheadLinks><A href="http://www.tee5.com/About/Function.html"><IMG
src="Ajax实现分页查询 中国天易网.files/tee5_top_01.gif" border=0><BR>功能介绍</A></DIV>
<DIV class=StyleheadLinks><A href="http://www.tee5.com/About/Price.html"><IMG
src="Ajax实现分页查询 中国天易网.files/tee5_top_02.gif" border=0><BR>产品价格</A></DIV>
<DIV class=StyleheadLinks><A href="http://www.tee5.com/About/Pay.html"><IMG
src="Ajax实现分页查询 中国天易网.files/tee5_top_03.gif" border=0><BR>汇款方式</A></DIV>
<DIV class=StyleheadLinks><A
href="http://www.tee5.com/About/Contactus.html"><IMG
src="Ajax实现分页查询 中国天易网.files/tee5_top_04.gif"
border=0><BR>联系方式</A></DIV></DIV></DIV></DIV></DIV><!-- 头部 End --><!-- 内容 Start -->
<DIV id=StyleBody>
<DIV id=StyleBodyleft><!-- 会员登陆 Start -->
<DIV class=StyleBodyColumntitle id=StyleBodyColumnbg>会员登陆</DIV>
<DIV class=StyleBodyColumnContent>
<FORM name=loginform action=/User/UserLogin.asp?action=login method=post>
<DIV id=Gq_user>
<DIV id=Gq_userlogina>
<DIV id=Gq_username>用户名：<INPUT tabIndex=1 maxLength=20 size=10
name=UserName></DIV>
<DIV id=Gq_userpass>密 码：<INPUT tabIndex=2 type=password maxLength=20 size=10
name=Password></DIV></DIV>
<DIV id=Gq_userloginb><INPUT tabIndex=4 type=image
src="Ajax实现分页查询 中国天易网.files/user_login.gif" border=0 name=Submit></DIV></DIV>
<DIV id=Gq_chkcode>
<DIV id=Gq_usercode>验证码：<INPUT tabIndex=3 maxLength=4 size=4
name=CheckCode></DIV>
<DIV id=imgcode><IMG style="CURSOR: pointer"
onclick="this.src='/Inc/GetCode.asp'" alt=验证码,看不清楚?请点击刷新验证码
src="Ajax实现分页查询 中国天易网.files/GetCode.bmp" border=0></DIV></DIV>
<DIV id=Gq_userurl><A href="http://www.tee5.com/User/UserReg.asp">新用户注册</A> ｜ <A
style="CURSOR: help" href="http://www.tee5.com/User/Sendpass.asp"
target=_blank>忘记密码？</A></DIV></FORM></DIV><!-- 会员登陆 End -->
<DIV class=StyleBodyColumntitle id=StyleBodyColumnbg>栏目导航</DIV>
<DIV id=StyleBodyColumnContent>
<DIV id=StyleBodyClasslist>
<DIV id=StyleBodyClassmain><SPAN>· <A class=menubar
title="ASP教程 文章数：67"
href="http://www.tee5.com/News/1/2/">ASP教程</A></SPAN> <SPAN>· <A class=menubar
title="PHP教程 文章数：55"
href="http://www.tee5.com/News/1/3/">PHP教程</A></SPAN> </DIV>
<DIV id=StyleBodyClassmain><SPAN>· <A class=menubar
title="ASP.NET 文章数：42"
href="http://www.tee5.com/News/1/4/">ASP.NET</A></SPAN> <SPAN>· <A class=menubar
title="JSP教程 文章数：28"
href="http://www.tee5.com/News/1/5/">JSP教程</A></SPAN> </DIV>
<DIV id=StyleBodyClassmain><SPAN>· <A class=menubar
title="XML教程 文章数：36"
href="http://www.tee5.com/News/1/6/">XML教程</A></SPAN> <SPAN>· <A class=distinct
title="Ajax教程 文章数：26"
href="http://www.tee5.com/News/1/7/">Ajax教程</A></SPAN> </DIV>
<DIV id=StyleBodyClassmain><SPAN>· <A class=menubar title="数据库类 文章数：0"
href="http://www.tee5.com/News/1/8/">数据库类</A></SPAN> <SPAN>· <A class=menubar
title="Html教程 文章数：25"
href="http://www.tee5.com/News/1/9/">Html教程</A></SPAN> </DIV>
<DIV id=StyleBodyClassmain><SPAN>· <A class=menubar
title="CSS教程 文章数：25"
href="http://www.tee5.com/News/1/10/">CSS教程</A></SPAN> <SPAN>· <A class=menubar
title="JS 教程 文章数：29" href="http://www.tee5.com/News/1/11/">JS
教程</A></SPAN> </DIV>
<DIV id=StyleBodyClassmain><SPAN>· <A class=menubar
title="fireworks 文章数：25"
href="http://www.tee5.com/News/1/12/">fireworks</A></SPAN> <SPAN>· <A
class=menubar title="photoshop 文章数：39"
href="http://www.tee5.com/News/1/13/">photoshop</A></SPAN> </DIV>
<DIV id=StyleBodyClassmain><SPAN>· <A class=menubar
title="coreldraw 文章数：25"
href="http://www.tee5.com/News/1/14/">coreldraw</A></SPAN> <SPAN>· <A
class=menubar title="FLASH 文章数：24"
href="http://www.tee5.com/News/1/15/">FLASH</A></SPAN> </DIV>
<DIV id=StyleBodyClassmain><SPAN>· <A class=menubar
title="3DMAX 文章数：25"
href="http://www.tee5.com/News/1/16/">3DMAX</A></SPAN> <SPAN>· <A class=menubar
title="AutoCad 文章数：25"
href="http://www.tee5.com/News/1/17/">AutoCad</A></SPAN> </DIV></DIV></DIV>
<DIV class=StyleBodyColumntitle id=StyleBodyColumnbg>热门文章</DIV>
<DIV id=StyleBodyColumnContent>· <A title=如何破解路由器密码（CISCO）！
href="http://www.tee5.com/News/33/36/2007/06/News_654.html">如何破解路由器密码..</A><BR>·
<A title=QQ本地密码验证破解，快来看密码破解！
href="http://www.tee5.com/News/33/36/2007/06/News_655.html">QQ本地密码验证破解..</A><BR>·
<A title=全国各地卫星图片在线观看
href="http://www.tee5.com/News/29/38/2007/06/News_704.html">全国各地卫星图片在..</A><BR>·
<A title=网络广播：在线实时收听全国各地广播电台
href="http://www.tee5.com/News/29/38/2007/07/News_719.html">网络广播：在线实时..</A><BR>·
<A title=最新免费wap网址大全
href="http://www.tee5.com/News/29/38/2007/07/News_717.html">最新免费wap网址大全..</A><BR>·
<A title="如何解决SQL Server 2000中的连接问题"
href="http://www.tee5.com/News/1/8/19/2007/05/News_356.html">如何解决SQL
Server..</A><BR>· <A title="使用ffmpeg.exe转换flv格式的ASP函数 在asp中的调用"
href="http://www.tee5.com/News/1/2/2007/05/News_024.html">使用ffmpeg.exe转换..</A><BR>·
<A title=如何破解开机密码
href="http://www.tee5.com/News/33/36/2007/06/News_659.html">如何破解开机密码</A><BR>· <A
title=各大搜索引擎免费登录网址
href="http://www.tee5.com/News/29/38/2007/06/News_701.html">各大搜索引擎免费登..</A><BR>·
<FONT color=#ff0066>[组图]</FONT> <A title=基于ASP的收发文管理系统的设计与实现
href="http://www.tee5.com/News/1/2/2007/05/News_117.html">基于ASP的收发..</A><BR></DIV>
<DIV class=StyleBodyColumntitle id=StyleBodyColumnbg>相关文章</DIV>
<DIV id=StyleBodyColumnContent>· <A
title="微软Asp.net Ajax 1.0的AutoComplete控件的几处修正和增强"
href="http://www.tee5.com/News/1/7/2007/06/News_685.html">微软Asp.net Ajax
1..</A><BR>· <A title=使用AjaxPro开发四级无刷新联动下拉框
href="http://www.tee5.com/News/1/7/2007/06/News_684.html">使用AjaxPro开发四级..</A><BR>·
<A title=Ajax核心：XMLHTTP组件相关技术资料
href="http://www.tee5.com/News/1/7/2007/05/News_173.html">Ajax核心：XMLHTTP组..</A><BR>·
<A title=ajax与spring结合
href="http://www.tee5.com/News/1/7/2007/05/News_171.html">ajax与spring结合</A><BR>·
<A title=Ajax光环背后的隐患
href="http://www.tee5.com/News/1/7/2007/05/News_170.html">Ajax光环背后的隐患..</A><BR>·
<A title="结合MS AJAX将js文件编译到动态链接库"
href="http://www.tee5.com/News/1/7/2007/05/News_169.html">结合MS
AJAX将js文件..</A><BR>· <A title=关于在AJAX中GET回的ResponseText中文乱码的最简解决办法
href="http://www.tee5.com/News/1/7/2007/05/News_168.html">关于在AJAX中GET回的..</A><BR>·
<A title=AJAX在Post中文的时候解决乱码的方法
href="http://www.tee5.com/News/1/7/2007/05/News_167.html">AJAX在Post中文的时..</A><BR>·
<A title=Ajax优于JSF的原因
href="http://www.tee5.com/News/1/7/2007/05/News_166.html">Ajax优于JSF的原因</A><BR>·
<A title=基于css样式绑定的样式驱动式AJAX程序开发（.net实现）
href="http://www.tee5.com/News/1/7/2007/05/News_165.html">基于css样式绑定的样..</A><BR></DIV></DIV>
<DIV id=StyleBodyMain>天易网技术群①：35688042 <FONT
color=#ffff00>[未满]</FONT> 技术交流群②：35688043
技术交流群③：35688017 商业客户专用群[<FONT color=#ffff00>非客户误加</FONT>]；9156130</DIV>
<DIV id=StyleBodyright>
<DIV id=StyleBodypost>
<DIV id=StyleBodyLocation>您当前的位置：<A href="http://www.tee5.com/">中国天易网</A> ->
<A href="http://www.tee5.com/News/">文章中心</A> -> <A
href="http://www.tee5.com/News/1/">教程中心</A> -> <A
href="http://www.tee5.com/News/1/7/">Ajax教程</A> -> Ajax实现分页查询</DIV></DIV><!-- 文章内容 Start -->
<DIV id=Gq_artName>Ajax实现分页查询</DIV>
<DIV id=Gq_artCome>作者：不详 来源：天易网整理 发布时间：2007-5-20
0:25:45 发布人：gueiqi</DIV>
<DIV id=Gq_artContent>
<P>由于查询返回的数据量很大，超过10w条数据，因此需要对页面查询功能进行优化。放弃原有<A class=wordstyle
href="http://www.tee5.com/"
target=_blank>程序</A>中使用DataGrid的做法，自己编写分页显示模块。<BR>
首先在页面上添加几个DIV:<BR> <BR> <div
id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%;
overflow-y:auto;">用于显示查询回的数据</div><BR> <div
id="div_trackpages" style=" height:15px; width:99%; font-size:8pt;
word-break:break-all; word-wrap: break-word;">用于显示分页的页码</div><br
/><BR> <div id="div_trackpagetab" style=" height:15px;
width:99%; font-size:8pt;
text-align:center;">用于显示前一页、后一页、...、首页、尾页等控制按钮</div><BR>
<div id="div_trackpage_status" style=" height:20px; width:99%; font-size:8pt;
text-align:center;">用于显示当前页的页码</div></P>
<P> 实现客户端分页函数：<BR> var
CurPage=0;
//当前页<BR> var
TotalPage=0;
//总页数<BR> var
PageTab=7;
//每组显示页数<BR> var
CurTab=0;
//当前分组<BR> <BR> 我的<A class=wordstyle
href="http://www.tee5.com/"
target=_blank>程序</A>是设置每页显示50条数据，每组显示7页，这些可以按需求调整。</P>
<P>
TurnTab函数用于切换分组，根据传入的val来计算显示哪一组页面。val=1表示切换到下一组，val=-1表示切换到上一组，0表示切换到第一组，-2表示切换到最后一组。用户通过单击页面上的
... 符号来切换分组。</P>
<P>function TurnTab(val)<BR>{<BR> var nPage =
0;<BR> <BR> if (val == 1)
{<BR>
CurTab++;<BR> nPage = (CurTab - 1) *
PageTab + 1; <BR> }<BR> else if (val
== -1) {<BR>
CurTab--;<BR> nPage = (CurTab - 1) *
PageTab + 1;<BR> }<BR> else if (val == 0)
{<BR> CurTab =
1;<BR> nPage =
1;<BR> }<BR> else if (val == -2)
{<BR> CurTab = Math.floor(TotalPage /
PageTab) + 1;<BR> nPage = (CurTab - 1)
* PageTab + 1;<BR>
}<BR> <BR> var
carinfo = document.getElementById("div_trackpages");<BR> var
tabinfo = document.getElementById("div_trackpagetab");</P>
<P> var strInner = "";<BR>
<BR> strInner += "<a
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -