使用javascript+xml实现分页

可爱的乖乖波

可爱的乖乖波

2016-02-19 21:16

下面请跟着图老师小编一起来了解下使用javascript+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=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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

使用javascript+xml实现分页

Web开发
使用javascript+xml实现分页

使用javascript+xml技术实现分页浏览

Web开发
使用javascript+xml技术实现分页浏览

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript+XML 操作

Web开发
Javascript+XML 操作

Xml_javascript分页

Web开发
Xml_javascript分页

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

使用JS+XML(数据岛)实现分页)

Web开发
使用JS+XML(数据岛)实现分页)

Javascript实现的分页函数

Web开发
Javascript实现的分页函数

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

xml中的空格之完全解说

xml中的空格之完全解说

在.NET Framework中轻松处理XML数据(5-2)

在.NET Framework中轻松处理XML数据(5-2)
下拉加载更多内容 ↓