Ajax实现分页查询

您现在的位置：动力中国 >> 网络编程 >> Ajax教程 >> 文章正文

Ajax实现分页查询

http://www.domcn.org 文章来源：本站原创点击数：

关键字: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表示切换到最后一组。用户通过单击页面上的 ... 符号来切换分组。

    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;
                }