注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

引用 Ajax实现分页查询   

2015-06-25 06:45:38|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自傻傻小子《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><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表示切换到最后一组。用户通过单击页面上的  ...  符号来切换分组。

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;

  评论这张
 
阅读(32)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018