程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> Ajax實現分頁查詢

Ajax實現分頁查詢

編輯:關於JAVA

由於查詢返回的數據量很大,超過10w條數據,因此需要對頁面查詢功能進行優化。放棄原有程序中使用DataGrid的做法,自己編寫分頁顯示模塊。
    首先在頁面上添加幾個DIV:
   
    <div id="div_trackpoint" >用於顯示查詢回的數據</div>
    <div id="div_trackpages" >用於顯示分頁的頁碼</div><br />
    <div id="div_trackpagetab" >用於顯示前一頁、後一頁、...、首頁、尾頁等控制按鈕</div>
    <div id="div_trackpage_status" >用於顯示當前頁的頁碼</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;
   
}

    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;

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved