服务器维护网站维护数据维护系统安全配置
专业定制网站企业建站一条龙、软件定制开发、系统集成
稳定虚机备案一条龙，稳定快捷通道
服务理念诚信守诺客户至上专业精神专心贯注

Ajax实现分页查询

作者：黑客防线网安Ajax教程基地来源：黑客防线网安Ajax教程基地浏览次数：0

黑客防线网安网讯：　　由于查询返回的数据量很大，超过10w条数据，因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法，自己编写分页显示模块。　　首先在页面上添加几个DIV:　　　　...

　　由于查询返回的数据量很大，超过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;