Ajax實作分頁查詢

作者：Eve Cole 更新時間：2009-07-06 16:39:26

由於查詢傳回的資料量很大，超過10w條數據，因此需要對頁面查詢功能進行最佳化。放棄原程式中使用DataGrid的做法，自己寫分頁顯示模組。
首先在頁面上新增幾個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表示切換到最後一組。使用者透過點擊頁面上的 ... 符號來切換分組。

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&&paramNames.length>0){

var params = new Array();

while(paramNames&&paramNames.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;