详细介绍如何使用javascript+xml实现分页

互联网 17-3-6

基于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>    //下面是tt.xml的代码          <?xml version="1.0" encoding="GB2312"?>  <rautinee>    <member id='1'>   <name>海仔</name>  <loginName>rautinee</loginName>  <email>rautinee@btamail.net.cn</email></member>    <member id='2'>  <name>刚强</name>  <loginName>hehe</loginName>  <email>rautinee@chinamanagers.com</email></member>    <member id='3'>  <name>金华刚</name>  <loginName>nature_it</loginName>  <email>rautinee_sea@hotmail.com</email></member>    <member id='4'>  <name>的简强</name>  <loginName>tank</loginName>  <email>tank@163.com</email></member>    <member id='7'>  <name>合资</name>  <loginName>kaka</loginName>  <email>kaka@eyou.com</email></member>    <member id='6'>  <name>加个人</name>  <loginName>apple</loginName>  <email>apple@163.com</email></member>    <member id='8'>  <name>null</name>  <loginName>sunny</loginName>  <email>rautinee@eyou.com</email></member>    <member id='10'>  <name>宝贝</name>  <loginName>index</loginName>  <email>rautinee@21cn.com</email></member>    <member id='12'>  <name>null</name>  <loginName>login</loginName>  <email>webmaster@chinamanagers.com</email></member>    <member id='13'>  <name>jiang</name>  <loginName>123</loginName>  <email>japing@chianmanagers.com</email></member>    <member id='14'>  <name>null</name>  <loginName>world</loginName>  <email>rautinee@21cn.com</email></member>    <member id='15'>  <name>null</name>  <loginName>swallow</loginName>  <email>swallow@chinamanagers.com</email></member>    <member id='16'>  <name>魏格</name>  <loginName>hotmail</loginName>  <email>rautinee_sea@hotmail.com</email></member>    <member id='17'>  <name>null</name>  <loginName>wrong</loginName>  <email>wrong@chinamanagers.com</email></member>    <member id='18'>  <name>null</name>  <loginName>leah</loginName>  <email>leah@chinamanagers.com</email></member>    <member id='19'>  <name>null</name>  <loginName>ttth</loginName>  <email>rautinee@21cn.com</email></member>    </rautinee>

目前好像是只支持>IE5.0

以上就是详细介绍如何使用javascript+xml实现分页的内容，更多相关内容请关注PHP中文网（www.php.cn）！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： javascript，xml，分页