使用javascript+xml实现分页

2016-02-19 21:16 4 1 收藏

下面请跟着图老师小编一起来了解下使用javascript+xml实现分页,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

  基于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=1trtd姓名/tdtd图标/tdtdIP地址/tdtdemail/tdtd/tdtd日期/tdtd/tdtd/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+11) thePage="A HREF='#' onclick='Javascript:return UpPageGo()'前一页/A";
      return thePage;
  }
  function NextPage(page)
  {
      thePage="后一页";
      if(pagepagesNumber) thePage="A HREF='#' onclick='Javascript:return NextPageGo()'后一页/A";
      return thePage;
  }
  
  function UpPageGo(){
  
  if(page0) page--;
      getContent();
      BodyText="";
  
  }
  //当前的页数
  function currentPage()
  {
      var cp;
      cp="当前是第 "+(page+1)+" 页";
      return cp;
  }
  //总共的页数
  function allPage()
  {
      var ap;
      ap='总共 '+(pagesNumber+1)+' 页';
      return ap
  }
  function NextPageGo()
  {
  if (pagepagesNumber) 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 (pagepagesNumber) 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 (endNummaxNum) endNum=maxNum;
          BodyText=header+BodyText;
          for (;nendNum;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
  loginNamerautinee/loginName
  emailrautinee@btamail.net.cn/email/member
  
  member id='2'
  name刚强/name
  loginNamehehe/loginName
  emailrautinee@chinamanagers.com/email/member
  
  member id='3'
  name金华刚/name
  loginNamenature_it/loginName
  emailrautinee_sea@hotmail.com/email/member
  
  member id='4'
  name的简强/name
  loginNametank/loginName
  emailtank@163.com/email/member
  
  member id='7'
  name合资/name
  loginNamekaka/loginName
  emailkaka@eyou.com/email/member
  
  member id='6'
  name加个人/name
  loginNameapple/loginName
  emailapple@163.com/email/member
  
  member id='8'
  namenull/name
  loginNamesunny/loginName
  emailrautinee@eyou.com/email/member
  
  member id='10'
  name宝贝/name
  loginNameindex/loginName
  emailrautinee@21cn.com/email/member
  
  member id='12'
  namenull/name
  loginNamelogin/loginName
  emailwebmaster@chinamanagers.com/email/member
  
  member id='13'
  namejiang/name
  loginName123/loginName
  emailjaping@chianmanagers.com/email/member
  
  member id='14'
  namenull/name
  loginNameworld/loginName
  emailrautinee@21cn.com/email/member
  
  member id='15'
  namenull/name
  loginNameswallow/loginName
  emailswallow@chinamanagers.com/email/member
  
  member id='16'
  name魏格/name
  loginNamehotmail/loginName
  emailrautinee_sea@hotmail.com/email/member
  
  member id='17'
  namenull/name
  loginNamewrong/loginName
  emailwrong@chinamanagers.com/email/member
  
  member id='18'
  namenull/name
  loginNameleah/loginName
  emailleah@chinamanagers.com/email/member
  
  member id='19'
  namenull/name
  loginNamettth/loginName
  emailrautinee@21cn.com/email/member
  
  /rautinee
  目前好像是只支持IE5.0
  如果你有什么好的方法和改进,请来信通知我,谢谢。
  
  ok ,just enjoy it ,and good luck

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1625728.html

延伸阅读
标签: Web开发
xml id="users" userGroup   user id="1"     useriduser 1/userid     namename 1/name   /user   user id="2"     useriduser 2/userid     namename 2/name   /user   user id="3"     useriduser 3/userid   ...
标签: Web开发
一.Xml文件 二.IXMLDOMDocument/DOMDocument简介  2.1 属性 2.1.1  parseError  2.1.2  async.  2.1.3  xml  2.1.4  text 3  2.1.5  attributes  2.1.6  nodeName 2.1.7  documentElement  2...
标签: Web开发
在网络浏览器软件中,可以Internet Explorer (IE)现在是一种标准的软件。可以看到,运行不同版本的Windows操作系统(和很多其他的操作系统)的每一台机器几乎都使用IE。微软已经通过ActiveX控件将IE的功能包含在执行成熟的XML处理技术中。 在本篇文章中,我们将讲述如何在IE中使用ActiveX功能来访问并解析XML文档,由此允许网络冲浪者...
标签: Web开发
代码如下: /**   * 得到XML文件属性的集合对象   * @param xmlDoc XML对象   * @param name 属性名称 如: user   * @return 返回 Array 对象   * Example XML:   * ?xml version='...
标签: Web开发
最近更新网站首页广告,ASP.NET的广告控件很容易实现这点,可首页是静态页面,联想广告控件的原理决定采用javascript+xml实现这点方面配置,更新广告时只要更新xml即可,方便了广告轮换 xml结构如下 ad tupianhttp://edu.itbulo.com/UploadFiles_1485/200610/20061010132448597.jpg/tupian dizhihttp://www.seehaha.com/plan//dizhi ...

经验教程

469

收藏

72
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部