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