Linux中国 Linux中国门户站!
设为主页 设为主页
收藏本站 收藏本站
 
当前位置 :首页 ->网站设计 ->AJAX教程 ->正文

Ajax实现分页查询

来源:Linuxdby.com 作者:Webmaster 时间:2007-06-04 点击: [收藏] [投稿]

由于查询返回的数据量很大,超过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的记录。。。

 如果您对本文有任何疑问或者建议,请到讨论区发表您的意见: >> 论坛入口 <<



上一篇:Ajax实现不刷屏的前提下实现页面定时刷新   下一篇:微软Asp.net Ajax 1.0的AutoComplete控件的几处修正和增强

文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论
更多相关文章
Power by linux-cn.com 粤ICP备05006655号