程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> ASP編程 >> 關於ASP編程 >> ASP實現靜態無刷新分頁效果

ASP實現靜態無刷新分頁效果

編輯:關於ASP編程

     #FormatTableID_0#

     

    <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
    %>

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved