Ajax实现分页查询-xxlinux.com




┊linux社区┊ 爱心援助 ┊ Linux认证┊系列教程 ┊ 业界动态┊ 站务新闻 ┊ 公司招聘┊ 建议留言 ┊ 网址大全 ┊LPI专题┊ CISCO专题

设为首页

加入收藏

管理团队

联盟首页	入门区	安装配置	使用技巧	桌面应用	开发区	WEB开发	数据库	内核研究	SHELL	软件开发
软件下载	网络区	服务器	网络应用	网络安全	UNIX区	UNIX入门	UNIX提高	C专题	JAVA专题	嵌入应用
开发语言	PHP	JSP	ASP	ASP.NET	JAVA	C/C++/C#	PERL	JavaScript	Basic	Delphi

		您的位置：首页 > 开发语言 > JAVA >

栏目导栏

php

JSP

ASP

asp.net

JAVA

c/c++/c#

perl

JavaScript

Basic

Delphi

资料搜索

最新文章

·实例解析：Linux操作系统下Jav

·JAVA得到网卡物理地址(Windows

·Ajax实现在textbox中模糊查询显

·Ajax简单示例之改变下拉框动态

·AJAX如何与后台交互

·Ajax实现分页查询

·Ajax核心：XMLHTTP组件相关技术

·关于String和StringBuffer

·用Java得到硬盘空间

·如何优化JAVA程序设计和编码，

Ajax实现分页查询

[ 作者: 加入时间:2007-11-12 16:44:53 来自:Linux联盟收集整理 ]

	由于查询返回的数据量很大，超过10w条数据，因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法，自己编写分页显示模块。 mJHLinux联盟首先在页面上添加几个DIV: mJHLinux联盟 mJHLinux联盟 <div id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%; overflow-y:auto;">用于显示查询回的数据</div> mJHLinux联盟 <div id="div_trackpages" style=" height:15px; width:99%; font-size:8pt; word-break:break-all; word-wrap: break-word;">用于显示分页的页码</div><br /> mJHLinux联盟 <div id="div_trackpagetab" style=" height:15px; width:99%; font-size:8pt; text-align:center;">用于显示前一页、后一页、...、首页、尾页等控制按钮</div> mJHLinux联盟 <div id="div_trackpage_status" style=" height:20px; width:99%; font-size:8pt; text-align:center;">用于显示当前页的页码</div> mJHLinux联盟 mJHLinux联盟实现客户端分页函数： mJHLinux联盟 var CurPage=0; //当前页 mJHLinux联盟 var TotalPage=0; //总页数 mJHLinux联盟 var PageTab=7; //每组显示页数 mJHLinux联盟 var CurTab=0; //当前分组 mJHLinux联盟 mJHLinux联盟我的程序是设置每页显示50条数据，每组显示7页，这些可以按需求调整。 mJHLinux联盟 mJHLinux联盟 TurnTab函数用于切换分组，根据传入的val来计算显示哪一组页面。val=1表示切换到下一组，val=-1表示切换到上一组，0表示切换到第一组，-2表示切换到最后一组。用户通过单击页面上的 ... 符号来切换分组。 mJHLinux联盟 mJHLinux联盟 function TurnTab(val) mJHLinux联盟 { mJHLinux联盟 var nPage = 0; mJHLinux联盟 mJHLinux联盟 if (val == 1) { mJHLinux联盟 CurTab++; mJHLinux联盟 nPage = (CurTab - 1) * PageTab + 1; mJHLinux联盟 } mJHLinux联盟 else if (val == -1) { mJHLinux联盟 CurTab--; mJHLinux联盟 nPage = (CurTab - 1) * PageTab + 1; mJHLinux联盟 } mJHLinux联盟 else if (val == 0) { mJHLinux联盟 CurTab = 1; mJHLinux联盟 nPage = 1; mJHLinux联盟 } mJHLinux联盟 else if (val == -2) { mJHLinux联盟 CurTab = Math.floor(TotalPage / PageTab) + 1; mJHLinux联盟 nPage = (CurTab - 1) * PageTab + 1; mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 var carinfo = document.getElementById("div_trackpages"); mJHLinux联盟 var tabinfo = document.getElementById("div_trackpagetab"); mJHLinux联盟 mJHLinux联盟 var strInner = ""; mJHLinux联盟 mJHLinux联盟 strInner += "<a href=\"javascript:TurnPage(1)\">首页</a> "; mJHLinux联盟 mJHLinux联盟 strInner += "<a href=\"javascript:PreviousPage()\">前一页</a> "; mJHLinux联盟 mJHLinux联盟 strInner += "总共" + TotalPage + "页 "; mJHLinux联盟 mJHLinux联盟 strInner += "<a href=\"javascript:NextPage()\">下一页</a> "; mJHLinux联盟 mJHLinux联盟 strInner += "<a href=\"javascript:TurnPage(" + TotalPage + ")\">尾页</a> "; mJHLinux联盟 mJHLinux联盟 tabinfo.innerHTML = strInner; mJHLinux联盟 mJHLinux联盟 strInner = ""; mJHLinux联盟 mJHLinux联盟 if (CurTab > 1) strInner += "<a href=\"javascript:TurnTab(-1)\">...</a> mJHLinux联盟 mJHLinux联盟 "; mJHLinux联盟 mJHLinux联盟 for ( ; nPage<=CurTabPageTab; nPage++) { mJHLinux联盟 mJHLinux联盟 if (nPage <= TotalPage) { mJHLinux联盟 mJHLinux联盟 strInner += "<a href=\"javascript:TurnPage("+ nPage + ")\">"+nPage+"</a> " mJHLinux联盟 mJHLinux联盟 } mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 if (nPage < TotalPage) strInner += "<a href=\"javascript:TurnTab(1)\">...</a> "; mJHLinux联盟 mJHLinux联盟 carinfo.innerHTML = strInner; mJHLinux联盟 mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 TurnPage函数用于切换分页，val表示要切换到的页数，根据要显示的页数生成查询范围，如查询前50条记录，从51到100的记录，从101到150的记录。。。 mJHLinux联盟 cscCustomAnalyst是一个异步调用函数，函数实现的代码将在下面贴出。"Method","SID", "TIME1", "TIME2", "ROW1", "ROW2"都是执行查询所需的参数，Method是用来判断要执行什么查询，"ROW1", "ROW2"表示要查询的记录范围，其他的参数就根据实际需要进行调整。ShowCarTrack(val)是一个对查询结果进行处理的函数，异步调用完成后得到的结果就将在这个函数中分析处理并且显示。这部分代码按照具体实现编写，我这里就不列出。 mJHLinux联盟 mJHLinux联盟 function TurnPage(val) mJHLinux联盟 { mJHLinux联盟 if (Number(val) != CurPage) { mJHLinux联盟 mJHLinux联盟 CurPage = Number(val); mJHLinux联盟 mJHLinux联盟 var row1 = String((CurPage - 1) 50 + 1); mJHLinux联盟 var row2 = String(CurPage * 50); mJHLinux联盟 mJHLinux联盟 var trackinfo = document.getElementById("div_trackpoint"); mJHLinux联盟 trackinfo.innerHTML = "　　获取数据中，请稍等．．．"; mJHLinux联盟 mJHLinux联盟 _cscCustomAnalyst(["Method", "SID", "TIME1", "TIME2", "ROW1", "ROW2"], mJHLinux联盟 ["GetCarTrack",, "80100117", t1, t2, row1, row2], mJHLinux联盟 ShowCarTrack,onQueryError); mJHLinux联盟 mJHLinux联盟 if (CurPage == 1) TurnTab(0); mJHLinux联盟 mJHLinux联盟 if (CurPage == TotalPage) TurnTab(-2); mJHLinux联盟 mJHLinux联盟 var statusinfo = document.getElementById("div_trackpage_status"); mJHLinux联盟 mJHLinux联盟 statusinfo.innerHTML = "第" + CurPage + "页"; mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 NextPage切换下一页，调用TurnPage实现，如果下一页超出当前分组则要切换到下一分组。 mJHLinux联盟 mJHLinux联盟 function NextPage() mJHLinux联盟 { mJHLinux联盟 if (CurPage < TotalPage) { mJHLinux联盟 mJHLinux联盟 TurnPage(CurPage+1); mJHLinux联盟 mJHLinux联盟 if ((CurPage + 1) > (CurTab * PageTab)) { mJHLinux联盟 TurnTab(1); mJHLinux联盟 } mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 PreviousPage切换上一页，调用TurnPage实现，如果上一页超出当前分组则要切换到上一分组。 mJHLinux联盟 function PreviousPage() mJHLinux联盟 { mJHLinux联盟 if (CurPage > 1) { mJHLinux联盟 mJHLinux联盟 TurnPage(CurPage-1); mJHLinux联盟 mJHLinux联盟 if ((CurPage - 1) <= ((CurTab - 1) * PageTab)) { mJHLinux联盟 TurnTab(-1); mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 } mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 _cscCustomAnalyst是异步调用函数，xhr.open("post","MapQuery.ashx", true);这段话是表示将请求提交到MapQuery.ashx这个页面。所有的服务器段数据库操作都在MapQuery.ashx里面执行。 mJHLinux联盟 mJHLinux联盟 function _cscCustomAnalyst(paramNames, paramValues, onComplete, onError){ mJHLinux联盟 mJHLinux联盟 var xhr=_GetXmlHttpRequest(); mJHLinux联盟 mJHLinux联盟 xhr.open("post","MapQuery.ashx", true); mJHLinux联盟 mJHLinux联盟 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); mJHLinux联盟 mJHLinux联盟 xhr.onreadystatechange=function(){ mJHLinux联盟 mJHLinux联盟 var readyState=xhr.readyState; mJHLinux联盟 mJHLinux联盟 if (readyState==4){ mJHLinux联盟 mJHLinux联盟 var status=xhr.status; mJHLinux联盟 mJHLinux联盟 if(status==200){ mJHLinux联盟 mJHLinux联盟 var resultset = xhr.responseText; mJHLinux联盟 mJHLinux联盟 if(resultset == null){ mJHLinux联盟 onComplete(null); mJHLinux联盟 return; mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 if(onComplete){ mJHLinux联盟 onComplete(resultset); mJHLinux联盟 resultset = null; mJHLinux联盟 } mJHLinux联盟 } mJHLinux联盟 else{ mJHLinux联盟 if(onError){ mJHLinux联盟 onError(xhr.responseText); mJHLinux联盟 } mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 xhr.onreadystatechange = function(){}; mJHLinux联盟 mJHLinux联盟 xhr = null; mJHLinux联盟 } mJHLinux联盟 }; mJHLinux联盟 mJHLinux联盟 var paramString=null; mJHLinux联盟 mJHLinux联盟 if(paramNames&¶mNames.length>0){ mJHLinux联盟 mJHLinux联盟 var params = new Array(); mJHLinux联盟 mJHLinux联盟 while(paramNames&¶mNames.length>0) mJHLinux联盟 { mJHLinux联盟 params.push(paramNames.shift()+"="+_ToJSON(paramValues.shift())); mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 paramString = params.join("&"); mJHLinux联盟 mJHLinux联盟 } mJHLinux联盟 mJHLinux联盟 xhr.send(paramString); mJHLinux联盟 }; mJHLinux联盟 mJHLinux联盟最后列出一个Oracle的按数量范围查询的SQL语句：(查询前50条记录) mJHLinux联盟 SELECT * mJHLinux联盟 FROM (SELECT /+ FULL(tablename)/ fieldname, ROWNUM rn FROM tablename WHERE condition AND ROWNUM <= 50 ORDER BY field DESC) t2 where t2.rn >= 1; mJHLinux联盟 Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论

【评论】【加入收藏夹】【大中小】【打印】【关闭】

※ 相关链接

·ASP.NET AJAX 客户端生命周期事件3 (2007-11-12 16:44:09)

·ASP.NET AJAX 客户端生命周期事件2 (2007-11-12 16:41:31)

·ASP.NET AJAX 客户端生命周期事件1 (2007-11-12 16:40:37)

·利用AJAX和ASP.NET实现简单聊天室 (2007-11-12 16:39:55)

·Ajax核心：XMLHTTP组件相关技术资料 (2007-11-12 16:38:59)

·面向Java程序员的Ajax:构建动态Java程序 (2007-11-12 16:38:29)

·Ajax-JavaScript-namespace (2007-11-02 14:01:16)

·使用AJAX开发你自己的RSS在线阅读器 (2007-11-02 14:00:05)

·ajax-javascript-范围链、call对象与闭包 (2007-11-02 13:57:13)

·用Ajax 1.0制作一个按钮提交后UpdatePanel动画 (2007-10-26 13:24:53)



	© CopyRight 2006-2009 xxlinux.com.Inc All Rights Reserved
	Powered by xxlinux.com