Ajax實現分頁查詢

由於查詢返回的資料量很大，超過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>

　　 <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>&nbsp;";
　　 strInner += "<a href="javascript:PreviousPage()">前一頁</a>&nbsp;";
　　 strInner += "總共" + TotalPage + "頁&nbsp;";
　　 strInner += "<a href="javascript:NextPage()">下一頁</a>&nbsp;";
　　 strInner += "<a href="javascript:TurnPage(" + TotalPage + ")">尾頁</a>&nbsp;";
　　 tabinfo.innerHTML = strInner;
　　 strInner = "";
　　 if (CurTab > 1) strInner += "<a href="javascript:TurnTab(-1)">...</a>&nbsp;";
　　 for ( ; nPage<=CurTab*PageTab; nPage++) {
　　　　 if (nPage <= TotalPage) {
　　　　　　 strInner += "<a href="javascript:TurnPage("+ nPage + ")">"+nPage+"</a>&nbsp;"
　　　　 }
　　 }
　　 if (nPage < TotalPage) strInner += "<a href="javascript:TurnTab(1)">...</a>&nbsp;";
　　 carinfo.innerHTML = strInner;
}