Ajax實作分頁查詢

實作客戶端分頁函數：
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 += "首頁 ";

strInner += "前一頁 ";

strInner += "總共" + TotalPage + "頁 ";

strInner += "下一頁 ";

strInner += "尾頁 ";

tabinfo.innerHTML = strInner;

strInner = "";

if (CurTab > 1) strInner += "... ";

for ( ; nPage<=CurTab*PageTab; nPage++) {

if (nPage <= TotalPage) {

strInner += ""+nPage+" "

}
}

if (nPage < TotalPage) strInner += "... ";

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;