javascript读取xml实现javascript分页


Posted in Javascript onDecember 13, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>读取Xml并分页</title>
</head>
<body >
   <div id="gao">
   </div>
    <div>
       <table align="center">
          <tr>
             <td><input type="button" name="prev" id="prev" value="上一页"  onclick="showPage('false')"><input type="button" id="next" name="next" value="下一页" onclick="showPage('true')"> </td>
          </tr>
       </table>
    </div>
<script type="text/javascript">
     function LoadXML(url)
  {
  var xmlDoc;
  if(window.ActiveXObject)
  { 
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async="false";
     xmlDoc.load(url);      
  }else if(document.implementation&&document.implementation.createDocument)
  {
              xmlDoc=document.implementation.createDocument("","",null);
     xmlDoc.async=false;
     xmlDoc.load(url);
  }else
  {
     alert("You browser cannot handle this script!");
  }
  return xmlDoc;
  }

  var xmlDoc=LoadXML("student.xml");
  var students=xmlDoc.getElementsByTagName("student");
  var stuLength=students.length;
  var currentPage=0;
  var pageSize=2;
  var maxPage=Math.ceil(stuLength/pageSize);
  function showPage(page)
  {
  var mytable=document.getElementsByTagName("table")[1];
  if(mytable) document.body.removeChild(mytable); 
  var table=document.createElement("table");
  table.setAttribute("id","mytable");
  table.setAttribute("width","600");
  table.setAttribute("border","1");
     document.body.appendChild(table);
  var header=table.createTHead();
  var headerrow=header.insertRow(0);
     headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
  headerrow.insertCell(1).appendChild(document.createTextNode("学校"));
  headerrow.insertCell(2).appendChild(document.createTextNode("成绩"))
       if(page=="true")
    currentPage++;
    else
      currentPage--;
    if(currentPage>=maxPage) currentPage=maxPage;
    else if(currentPage<=0) currentPage=1;
    var start=(currentPage-1)*pageSize;
    var end=currentPage*pageSize-1;
    for(var i=start;i<=end;i++)
    {
             var e=students[i];
    var name=e.getAttribute("name");
    var school=e.getElementsByTagName("school")[0].firstChild.data;
    var grade=e.getElementsByTagName("grade")[0].firstChild.data;
    var row=table.insertRow(i%pageSize+1);
    row.insertCell(0).appendChild(document.createTextNode(name));
    row.insertCell(1).appendChild(document.createTextNode(school));
    row.insertCell(2).appendChild(document.createTextNode(school));
    }
    
  }
  showPage("true");
</script>
</body>
</html>

在编写过程过,涉及到代码的处理上,由于我最初,将javascript代码放在了head标签里面,结果导致document.body对象为空!
我们都知道,javascript在执行的时候,页面会暂定加载而去执行html代码,所以当js代码放在head标签中的时候,html页面还没有执行到body,故而产生了错误!
后来将js代码,放在了body的尾部,这样,就能够正确引用到body对象了!
同时,在大型网站架构中,也是提高页面加载速度的一种方式!页面首页加载html标签内容,到页面最后,在执行js代码,能在很大程度上提升网页打开速度,提升用户体验!
另外的student.xml内容是
<?xml version="1.0" encoding="utf-8"?>
<students>
   <student name="gaoxing">
       <school>西北大学1</school>
    <grade>76</grade>
   </student>
   <student name="gaoxing">
       <school>西北大学2</school>
    <grade>76</grade>
   </student>
   <student name="gaoxing">
       <school>西北大3学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学4</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大5学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大6学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大7学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北8大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北9大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北10大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
</students>
Javascript 相关文章推荐
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
js实现圆盘记速表
Aug 03 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
微信小程序 搜索框组件代码实例
Sep 06 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 #Javascript
javascript分页代码实例分享(js分页)
Dec 13 #Javascript
jquery 操作iframe的几种方法总结
Dec 13 #Javascript
异步动态加载JS并运行(示例代码)
Dec 13 #Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 #Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 #Javascript
jquery如何获取复选框的值
Dec 12 #Javascript
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
页面中js执行顺序
2009/11/09 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
JS删除String里某个字符的方法
2021/01/06 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python读写锁实现实现代码解析
2020/11/28 Python
Python爬取某平台短视频的方法
2021/02/08 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
求职自荐信范文格式
2013/11/29 职场文书
大课间活动制度
2014/01/18 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python