服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 新手入门 > 基础入门 > 查看文档

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;

 

扫描关注微信公众号