使用javascript xml技術實現分頁瀏覽_Xml教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:改變我們生活的這些XML應用
      XHTML 2.0 做了許多擴展,增強了作者表達內容結構和含義的能力。打破向后兼容性引起了爭議。一些評論者認為保持 (X)HTML 的名稱只修改版本號會造成混亂。   將改變我們生活的XML有關的

      基于web的技術中,分頁是一個老的不能再老的,但大家津津樂道的問題,隨著xml技術的日漸應用,把xml應用到分頁當中,也是一種可能,當然網上的教程很多,當我都是看得稀里糊涂,索性自己寫一個,與大家分享、指正。

      共有兩個文件tmh.htm & tt.xml

      源代碼如下:

      tmh.htm
      ___________________________________________________

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <link rel="stylesheet" href="../website.css" type="text/css">
      </HEAD>
      <BODY>
      <script language="javascript">
      //****************變量相關定義**************
      //* author:海仔  *
      //* Email:rautinee@21cn.com *
      //*本程序可自由傳播使用,但請務必保留此信息*
      //****************************************
      var pagenum=4; //每頁顯示幾條信息
      var page=0 ;
      var contpage ;
      var BodyText="";
      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      var mode="member";
      var toolBar;
      xmlDoc.async="false"
      xmlDoc.load("tt.xml")
      //***************這個地方是你根據實際取得的字段名稱來改了
      header="<TABLE border=1><tr><td>姓名</td><td>圖標</td><td>IP地址</td><td>email</td><td></td><td>日期</td><td></td><td></td></tr>";
      //檢索的記錄數
      maxNum = xmlDoc.getElementsByTagName(mode).length
      //每條記錄的列數
      column=xmlDoc.getElementsByTagName(mode).item(0).childNodes
      //每條記錄的列數
      colNum=column.length
      //頁數
      pagesNumber=Math.ceil(maxNum/pagenum)-1;
      pagesNumber2=Math.ceil(maxNum/pagenum);
      //上一個頁面
      function UpPage(page)
      {
      thePage="前一頁";
      if(page 1>1) thePage="<A HREF='#' onclick='Javascript:return UpPageGo()'>前一頁</A>";
      return thePage;
      }
      function NextPage(page)
      {
      thePage="后一頁";
      if(page<pagesNumber) thePage="<A HREF='#' onclick='Javascript:return NextPageGo()'>后一頁</A>";
      return thePage;
      }
      function UpPageGo(){
      if(page>0) page--;
      getContent();
      BodyText="";
      }
      //當前的頁數
      function currentPage()
      {
      var cp;
      cp="當前是第 " (page 1) " 頁";
      return cp;
      }
      //總共的頁數
      function allPage()
      {
      var ap;
      ap='總共 ' (pagesNumber 1) ' 頁';
      return ap
      }
      function NextPageGo()
      {
      if (page<pagesNumber) page ;
      getContent();
      BodyText="";
      }
      //顯示分頁狀態欄
      function pageBar(page)
      {
      var pb;
      pb=UpPage(page) " " NextPage(page) " " currentPage() " " allPage() selectPage();
      return pb;
      }
      function changePage(tpage)
      {
      page=tpage
      if(page>=0) page--;
      if (page<pagesNumber) page ;
      getContent();
      BodyText="";
      }
      function selectPage()
      {
      var sp;
      sp="<select name='hehe' onChange='javascript:changePage(this.options[this.selectedIndex].value)'>";
      //sp="<select name='hehe' onChange='alert(this.options[this.selectedIndex].value)'>";
      sp=sp "<option value=''></option>";
      for (t=0;t<=pagesNumber;t )
      {
      sp=sp "<option value='" t "'>" (t 1) "</option>";
      }
      sp=sp "</select>"
      return sp;
      }
      function getContent()
      {
      if (!page) page=0;
      n=page*pagenum;
      endNum=(page 1)*pagenum;
      if (endNum>maxNum) endNum=maxNum;
      BodyText=header BodyText;
      for (;n<endNum;n )
      {
       
      BodyText=BodyText "<TR>";
      for (m=0;m<=colNum-1;m )
      { 
      mName=column.item(m).tagName;
      BodyText=BodyText ("<TD>" xmlDoc.getElementsByTagName(mName).item(n).text "</TD>");
      }
      BodyText=BodyText "</TR>"
      mm="";
      }
      showhtml.innerHTML=BodyText "</table>" pageBar(page);
      BodyText=""
      }
      </script>
      <div id="showhtml"></div>
      <script>
      if (maxNum==0)
      {
      document.write("沒有檢索到合適的人才信息")
      }
      else
      {
      getContent()
      }
      </script>
      </BODY>
      </HTML>

      分享:用jConfig獲取XML文件中的配置信息
      第一步:下載jConfig:在http://sourceforge.net/里下載最新的jConfig項目包 http://sourceforge.net/project/showfiles.php?group_id=38356&package_id=30 463&release_id=272653,下

      共2頁上一頁12下一頁
      來源:模板無憂//所屬分類:Xml教程/更新時間:2008-08-22
      相關Xml教程