Ajax实现分页查询_Ajax编程_黑客防线网安服务器维护基地--Powered by WWW.RONGSEN.COM.CN

Ajax实现分页查询

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

本篇关键词:查询实现 CurPage
黑客防线网安网讯:  由于查询返回的数据量很大,超过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表示切换到最后一组。用户通过单击页面上的  ...  符号来切换分组。

  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;

    黑客防线网安服务器维护方案本篇连接:http://www.rongsen.com.cn/show-15497-1.html
网站维护教程更新时间:2012-04-05 00:01:56  【打印此页】  【关闭
我要申请本站N点 | 黑客防线官网 |  
专业服务器维护及网站维护手工安全搭建环境,网站安全加固服务。黑客防线网安服务器维护基地招商进行中!QQ:29769479

footer  footer  footer  footer