Ajax实现分页查询

由于查询返回的数据量很大，超过10w条数据，因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法，自己编写分页显示模块。
    首先在页面上添加几个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 += "首页 ";
   
    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;