zoukankan      html  css  js  c++  java
  • asp+ajax实现分页效果

    建一个文件list.htm

    <html>
    <head>
    <title>新闻列表简化型</title>
    <script language="javascript">
    <!--
    //ajax 控件也可以做成单独文件方便到其它地方调用
    function Ajax()
    {
    var xhrObj=null;
    if(window.XMLHttpRequest)
    {
    xhrObj=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
    try{
    xhrObj=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e1)
    {
    try{
    xhrObj=new ActiveXObject("MSXML2.XMLHTTP");
    }
    catch(e2){
    try{
    xhrObj=new ActiveXObject("MSXML3.XMLHTTP");
    }
    catch(e3){
    alert("创建Ajax失败:"+e3)
    }
    }
    }
    }
    else
    {
    alert("未能识别的浏览器");
    }
    return xhrObj;
    }

    function $(id)
    {
    return document.all[id];
    }

    </script>
    <script language="javascript" defer>
     var xhr=new Ajax();
     var page=0;
     var icount=0; //当前页数
     var pagecount; //总页数
     var count=0;
     var ipagecount=0;
     var ipagesize=5;; //每页显示记录数
     var pp=0;
     var ipage=0;
     var Dom=null;

     function getList(curPage)
     {
     if(ipagecount!=0)
     {
     ipage=parseInt((curPage-1)/ipagecount)+1;
     }else{
     ipage=1
     };
     page=curPage;
     if (pp!=ipage)
     {;
     Dom=null;
     pp=ipage;
     xhr.open("get","data.asp?curpage="+pp,true);
     xhr.onreadystatechange=$CallBack;
     xhr.send(null); 
     }
     else
     {
     $showList();
     }
     }
     function $CallBack()
     {
     if(xhr.readystate==1)
     {
     $("newsList").innerHTML="正在连结服务器";
     }
     else if(xhr.readystate==2 || xhr.readystate==3)
     {
     $("newsList").innerHTML="正在读取数据";
     }
     else if(xhr.readystate==4)
     {
     if (xhr.status==200)
     {
    Dom=xhr.responseXML;
    $showList();
     }
     }
     }
     

     function $showList()
     {
     var html="";
     var items=Dom.selectNodes("//item");
     icount=Dom.selectNodes("//item").length; //数量
     count=Dom.selectSingleNode("//data").getAttribute("count"); //总数量
     ipagecount=parseInt((icount-1)/ipagesize)+1;
     pagecount=parseInt((count-1)/ipagesize)+1;
     startPosition=(page-1)*ipagesize;
     endPosition=(page*ipagesize)
     if(endPosition>count)endPosition=count
     for(var i=startPosition;i<endPosition;i++)
     {
     html+="<div id=/"title/"><a href=/""+items[i].selectSingleNode("htmlurl").text+"/">"+items[i].selectSingleNode("hits").text+"</a></div>";
     }
     $("newsList").innerHTML=html;

     var statushtml="<a href=/"javascript:previousPage()/">上一页</a>|<a href=/"javascript:nextPage()/">下一页</a>";
     if(pagecount<=10)
     {
     for(var i=1;i<=pagecount;i++)
     {
     if (i==page)
     {
     statushtml+="<b>"+i+"</b>&nbsp;"
     }
    else
    {
     statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
    }
     }
     }
     else if(page+10<pagecount && pagecount>10)
     {
     if(page%10==0)
     {
     for(var i=page-9;i<=page+1;i++)
    {
     if (i==page)
     {
     statushtml+="<b>"+i+"</b>&nbsp;"
     }
     else
     {
     statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
     }
    }
     }
     else if(page % 10 ==1 && page!=1)
     {
     for(var i=page-1;i<=page+10;i++)
    {
     if (i==page)
     {
     statushtml+="<b>"+i+"</b>&nbsp;"
     }
     else
     {
     statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
     }
    }
     }
     else if(page<=11)
     {
     for(var i=1;i<=11;i++)
     {
     if (i==page)
     {
     statushtml+="<b>"+i+"</b>&nbsp;"
     }
     else
     {
     statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
     }
     }
     }
     else
     {
     for(var i=(page-(page % 10));i<=page+(10-(page % 10))+1;i++)
    {
     if (i==page)
     {
     statushtml+="<b>"+i+"</b>&nbsp;"
     }
     else
     {
     statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
     }
    }
     }
     }
     else if(page+10>=pagecount && pagecount>10)
     {
     if(page%10==0)
     {
     for(var i=page-9;i<=page+1;i++)
    {
     if (i==page)
     {
     statushtml+="<b>"+i+"</b>&nbsp;"
     }
     else
     {
     statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
     }
    }
     }
     else if(page % 10 ==1 && page!=1)
     {
     for(var i=page-1;i<=page+9;i++)
    {
     if (i==page)
     {
     statushtml+="<b>"+i+"</b>&nbsp;"
     }
     else
     {
     statushtml+="<a href=/"javascript:turnPage("+i+")/">"+i+"</a>&nbsp;"
     }
    }
     }
     }
     document.getElementById("pagestatus").innerHTML=statushtml;
     
     }
     
     function previousPage()
     {
     if (page>1)
     {
     getList(page-1);
     }
     else
     {
     alert("已经是第一页了");
     }
     
     }

     function nextPage()
     {
     if(page<ipagecount)
     {
     getList(page+1);
     }
     else
     {
     alert("已经到最后一页了");
     }
     }

     function turnPage(p)
     {
     getList(p);
     }

     getList(1);
    </script>
    </head>
    <body>
     <div id="newsList"></div>
     <div id="pagestatus"></div>
    </body>
    </html>

    建一个文件data.asp
    注:这里我用的是ACCESS数据库,库名叫data.mdb,当然这个自己可以定义,库中表名为info字段分别是id(自动编号)、a、b、c、d(日期类型)

    <%@ Language="VBSCRIPT" codepage="936" %>
    <%
    response.cachecontrol="no-cache"
    response.addHeader "pragma","no-cache"
    response.expires=-1
    response.expiresAbsolute=now-1
    response.contentType="text/xml"
    'SQL数据库 Set conn=server.CreateObject("adodb.connection")
    'sconn="driver={sql server};server=(local);uid=**;pwd=**;database=***"
    'conn.open sconn
    set conn=server.CreateObject("adodb.connection")
     file=server.mappath("data.mdb")
     conn.Open "driver={microsoft access driver (*.mdb)};"&"dbq="&file%>
    <?xml version="1.0" encoding="gb2312" ?>
    <%
    dim iPagesize,rs,sSQL,iCurPage,ipresize,icount,ipagecount

    icurpage=trim(request.QueryString("curpage"))

    iPagesize=500 '页大小
    set rs=server.createObject("adodb.recordset")
    'rs.open "select count(id) from ca_news where status=1",conn,1,1
    rs.open "select count(id) from info",conn,1,1
    icount=rs(0) '总记录数
    rs.close

    ipagecount=int((icount-1)/iPagesize)+1 '总页数
    if icurpage="" then
     icurpage=1
    else
     icurpage=cint(icurpage)
    end if
    if icurpage<1 then
     icurpage=1
    end if

    if icurPage>ipagecount then icurpage=ipagecount
    ipreSize=(iCurPage-1)*ipagesize
    if ipresize=0 then
     sSQL="select * from info order by id desc"
    else
     ' sSQL="select top "&ipagesize&" id,title,postdate,hits,htmlurl from news where status=1 and id not in (select top "&ipresize&" id from news where status=1 order by id asc) order by id asc"
     sSQL="select top "&ipagesize&" * from info id not in (select top "&ipresize&" id from info order by id desc) order by id desc"
    end if
    rs.open sSQL,conn,1,1

    %>
    <data count="<%=icount%>" pagesize="<%=ipagesize %>" pagecount="<%=ipagecount%>">
    <%
     while not rs.eof
    %>
     <item id="<%=rs("id")%>">
     <title>&lt;![CDATA[<%=rs("a")%>]]&gt;</title>
    <htmlurl>&lt;![CDATA[<%=rs("b")%>]]&gt;</htmlurl>
     <postdate><%=DateValue(rs("d")) %></postdate>
     <hits><%=trim(rs("c")) %></hits>
     </item>
    <%
     rs.movenext
     wend
    %>
    </data>
    <%
     rs.close
     set rs=nothing
     conn.close
     set conn=nothing
    %>
  • 相关阅读:
    2019-2020-1 20175313 20175328 20175329 实验五 通讯协议设计
    2019-2020-1 20175313 《信息安全系统设计基础》第十周学习总结
    2019-2020-1 20175313 20175328 20175329 实验四 外设驱动程序设计
    2019-2020-1 20175313 《信息安全系统设计基础》第九周学习总结
    2019-2020-1 20175313 20175328 20175329 实验三 并发程序
    2019-2020-1 20175313 20175328 20175329 实验二 固件程序设计
    2019-2020-1 20175313 《信息安全系统设计基础》第七周学习总结
    2019-2020-1 20175313 20175328 20175329 实验一 开发环境的熟悉
    protobuf---messge嵌套get set
    proto变量风格
  • 原文地址:https://www.cnblogs.com/zerogo/p/2209254.html
Copyright © 2011-2022 走看看