首 页 网络编程
网页制作 图形图象 操作系统 冲浪宝典
软件教学 认证考试

网络安全 网络办公 行业资讯 评测对比
您当前位置:站长天空 -> 认证考试-> Macrmedia认证
ajax实现分页查询_ajax教程
作者:网友供稿 点击:0
推荐
西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!可在线rar解压,自动数据恢复设置虚拟目录等.免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金
站内搜索
文章页数:[1] 

由于查询返回的数据量很大,超过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.z6688.com/
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

文章页数:[1] 


放大字体显示 缩小字体显示 打印文章 推荐给朋友
热门文章
·C#中string与byte[]的转换帮助类-.NET教程,C#语言
·DataGrid与SQL Server 2000数据绑定-ASP教程,数据库相关
·asp服务器端的验证类-ASP教程,客户端相关
·如何以Char数组字符元素为标识,分割String字符并列示出来?-.NET教程,数据库应用
·ASP.NET GET 方式提交数据!-.NET教程,Asp.Net开发
·向记事本里写入数据、一个修改密码的判断方法-ASP教程,数据库相关
·RSA算法-.NET教程,评论及其它
·ASP.NET心得笔记-.NET教程,Asp.Net开发
·flash资格认证考试样题
·教你打造属于自己的绿色ppstream-.NET教程,评论及其它
最新文章
·windows vista中如何用闪存保护资料_windows vista
·fireworks绘制炫彩光影缠绕dna图案_fireworks教程
·google adsense 统计之我见_网赚技巧
·photoshop为宝宝照片调色_photoshop教程
·个人网站如何才能走出困境_站长心得
·个人站长十个害怕和担心的事情_站长心得
·关于优化及越度优化伤害_站长心得
·google广告的单价与点击-smart_google推广
·网编必备:搜索引擎优化的基本要素(1)_网络编辑
·alexa作弊的相关问答_alexa排名
相关主题
  • ajax实现不刷屏的前提下实现页面定时刷新_ajax教程
  • ajax实现datagrid/datalist动态tooltip _ajax教程
  • ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中_ajax教程
  • ajax实现无刷新树_ajax教程
  • ajax实现网易相册样式的修改_ajax教程
  • 西部数码虚拟主机

    友情链接
    CNNIC 西部数码
    万网 自助建站
    虚拟主机 asp空间
    域名注册 域名
    域名申请 主页空间
    论坛空间 网站空间
    国际域名 虚拟空间
    空间租用 DDOS防火墙
    成都主机托管 四川主机托管
    主机租用 服务器租用
    网站目录 自助建站
    虚拟主机 网址大全
    软件下载
    自助链接
    虚拟主机资讯 特价虚拟主机
    版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!
    关于我们:站长天空:专业提供最新的站长资讯、在线教程、虚拟主机权威评测、虚拟主机性能对比、网站制作教程,开发教程,站长工具。包括网页制作教程、冲浪宝典、编程参考、操作系统、软件教学、行业动态等。
    特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
    发表评论 打印  刷新     关闭