现在的位置: 首页 > 综合 > 正文

JavaScript读取xml文档中的数据库,并分页显示

2013年12月03日 ⁄ 综合 ⁄ 共 10226字 ⁄ 字号 评论关闭

    文本主要介绍JavaScript 读取XMl 文件中的数据,并以一定的方式显示出来。本文为分页显示。分页代码有JavaScript代码实现。

XML中的数据(名字为Records.xml):

<?xml version="1.0"?>
<ArrayOfRecord xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <Record>
    <SpentTime>2011-07-14T13:28:21</SpentTime>
    <Provider>万永刚</Provider>
    <Share>王文赛,李琦,刘漱琰,万永刚</Share>
    <Money>8.5</Money>
    <Description>买菜</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-14T13:28:21</SpentTime>
    <Provider>李琦</Provider>
    <Share>王文赛,李琦,刘漱琰,万永刚</Share>
    <Money>231.38</Money>
    <Description>电费</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-14T13:28:21</SpentTime>
    <Provider>万永刚</Provider>
    <Share>王文赛,李琦,刘漱琰,万永刚</Share>
    <Money>50</Money>
    <Description>买菜</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-14T13:28:21</SpentTime>
    <Provider>刘漱琰</Provider>
    <Share>王文赛,李琦,刘漱琰,万永刚</Share>
    <Money>15</Money>
    <Description>买菜</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-17T13:28:21</SpentTime>
    <Provider>王文赛</Provider>
    <Share>王文赛,李琦,刘漱琰,万永刚</Share>
    <Money>9</Money>
    <Description>买菜</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-19T13:37:56</SpentTime>
    <Provider>刘漱琰</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>34.5</Money>
    <Description>买菜</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-19T13:37:56</SpentTime>
    <Provider>王文赛</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>29.6</Money>
    <Description>面条</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-19T13:37:56</SpentTime>
    <Provider>万永刚</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>6</Money>
    <Description>面条</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-19T13:37:56</SpentTime>
    <Provider>李琦</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>58.8</Money>
    <Description>水费</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-20T13:37:56</SpentTime>
    <Provider>万永刚</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>6</Money>
    <Description>馒头</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-21T13:37:56</SpentTime>
    <Provider>李琦</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>46.7</Money>
    <Description>馒头</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-21T13:37:56</SpentTime>
    <Provider>刘漱琰</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>5</Money>
    <Description>馒头</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-23T13:37:56</SpentTime>
    <Provider>王文赛</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>52.5</Money>
    <Description>买菜</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-23T13:37:56</SpentTime>
    <Provider>王文赛</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>5</Money>
    <Description>馒头</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-24T13:37:56</SpentTime>
    <Provider>李琦</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>6</Money>
    <Description>馒头</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-24T13:37:56</SpentTime>
    <Provider>王文赛</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>5</Money>
    <Description>馒头</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-25T13:37:56</SpentTime>
    <Provider>王文赛</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>110</Money>
    <Description>杂物</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-25T13:37:56</SpentTime>
    <Provider>刘漱琰</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>61</Money>
    <Description>杂物</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-27T17:54:18.078125+08:00</SpentTime>
    <Provider>万永刚</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>28.5</Money>
    <Description>杂物</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-27T18:29:38.265625+08:00</SpentTime>
    <Provider>刘漱琰</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>21</Money>
    <Description>买鸡蛋</Description>
  </Record>
  <Record>
    <SpentTime>2011-07-28T08:17:49.734375+08:00</SpentTime>
    <Provider>万永刚</Provider>
    <Share>王文赛,万永刚,刘漱琰,李琦</Share>
    <Money>15.8</Money>
    <Description>面条</Description>
  </Record>
</ArrayOfRecord>

HTML代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=gbk">
  <!--定义显示的样式-->
  <style type="text/css">   
    table,tr,td {   
        background-position: center;   
        border-width: 1px;   
        border-style: solid;   
        border-collapse: collapse;   
        border-color: blue;   
        text-align: center;   
        font-size: 20px;   
    }   
    table {   
        width: 800px;   
        margin-bottom: 20px;   
    }   
    tr {   
        height: 40px;      
    }   
    .bordertyle {   
        font-family: sans-serif;   
        text-align: center;   
    }
    .borderstyle {   
        font-family: sans-serif;   
        text-align: center; 
        background-color:Gray;
        width:800px;
    }
        
        
    .btn {   
        margin-left: 30px;   
        margin-right: 30px; 
          
    }      
    label {   
        font-size: 20px;   
        font-family: sans-serif;   
    }   
   
</style>
  <script  type = "text/javascript" >
  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = "false";
  xmlDoc.load("Records.xml"); //加载Records.xml文档,前提该文档与该html页面在同一个文件夹下面
  Records = xmlDoc.getElementsByTagName("Record"); //获取xml文档中Record的记录的集合
  var maxRec = Records.length;//Record的条数
  
  var pageShow = 5;//每页显示的数据的条数
  var currentPage = 1;//当前页码数
  
  var maxpPage = Math.ceil(maxRec/pageShow);
  //在窗体加载中调用,第一个版本,本程序显示的第二个版本,即该函数可以参考,本程序没有用处
  function addToTable()
  {
      var tr = "";
      for(var i = 0 ;i<Records.length;i++)
      {
        tr = tr+ '<tr><td>'+ (i+1)+'</td>'+
              '<td>'+ Records[i].getElementsByTagName("SpentTime")[0].firstChild.nodeValue+'</td>'+
              '<td>'+ Records[i].getElementsByTagName("Provider")[0].firstChild.nodeValue+'</td>'+
              '<td>'+ Records[i].getElementsByTagName("Share")[0].firstChild.nodeValue+'</td>'+
              '<td>'+ Records[i].getElementsByTagName("Money")[0].firstChild.nodeValue+'元'+'</td>'+
              '<td>'+ Records[i].getElementsByTagName("Description")[0].firstChild.nodeValue+'</td></tr>';
      }
  table0.insertRow(table0.rows.length);
   table0.rows.item(table0.rows.length -1).insertCell(0);
  var xx=table0.rows.length -1 ;
  var sHTML;//用来保存欲生成的表格对象或其他类型对象的代码 
  var caption = '<tr><td>序号</td><td>消费时间</td><td>付款人</td><td>涉及人员</td><td>消费金额</td><td>描述信息</td></tr>'
  sHTML='<TABLE border="1"  width="100%"> ' + caption +tr + '</TABLE>';
  table0.rows.item(table0.rows.length-1).cells.item(0).innerHTML=sHTML;  
  }
  var btnFirst = document.createElement("button");
  var btnPre = document.createElement("button");
  var btnNext = document.createElement("button");
  var btnLast = document.createElement("button");
  //第二个版本、
  function retrieve()
  {
        var oDiv = document.createElement("div");//创建一个div标签
        oDiv.id = "showhtml" ;
        oDiv.className = "bordertyle";
        if(maxRec!=0)//如果记录数不是0,则进行动态添加分页显示的按钮和标签
        {
            var oTable = generateTable (oDiv,(currentPage - 1)*pageShow ,currentPage*pageShow);
            
            var pageInfo = document.createElement("div");
            
            var oLable = document.createElement("label");
            oLable.innerHTML = "共"+maxRec+"条记录,当前第";
            pageInfo.appendChild(oLable);
            
            var curLabel = document.createElement("label");
            curLabel.innerHTMl = currentPage;
            curLabel.setAttribute("id","curLabel");
            pageInfo.appendChild(curLabel);
            
            var oLabel3 = document.createElement("label");
            oLabel3.innerHTML = "页,共"+maxpPage+"页";
            pageInfo.appendChild(oLabel3);
            
            oDiv.appendChild(pageInfo);
            
            var buttonSet = document.createElement("button");
            buttonSet.className = "borderstyle";
            
            
            btnFirst.innerHTML = "首页";
            btnFirst.id = "btnFirst";
            btnFirst.className = "btn";
            btnFirst.onclick = function(){
                if(currentPage >1)
                {
                    goToPage(1,oTable,curLabel);
                }
            };
            buttonSet.appendChild(btnFirst);
            
           
            btnPre.innerHTML = "前一页";
            btnPre.id = "btnPre";
            btnPre.className = "btn";
            btnPre.onclick = function(){
                if(currentPage >1)
                {
                    goToPage(currentPage -1 ,oTable,curLabel);
                }
            };
            buttonSet.appendChild(btnPre);
            
            var tx = document.createElement("input");
            tx.value = currentPage;
            tx.id = "tx";
            tx.size = "2";
            buttonSet.appendChild(tx);
            
            var btnGO = document.createElement("button");
            btnGO.innerHTML = "GO";
            btnGO.onclick = function(){
                var txpage = parseInt(tx.value);
                goToPage(txpage,oTable,curLabel);
            };
            buttonSet.appendChild(btnGO);
            
           
            btnNext.innerHTML = "后一页";
            btnNext.id = "btnNext";
            btnNext.className = "btn";
            btnNext.onclick = function(){
                if(currentPage< maxpPage)
                {
                    goToPage(currentPage +1 ,oTable,curLabel);
                }
            };
            buttonSet.appendChild(btnNext);
            
            
            btnLast.innerHTML = "末页";
            btnLast.id = "btnNext";
            btnLast.className = "btn";
            btnLast.onclick = function(){
              goToPage(maxpPage ,oTable,curLabel); 
            };
            buttonSet.appendChild(btnLast);
            
            
            oDiv.appendChild(buttonSet); 
        }
        else
        {
            oDiv.innerHTML = "无记录";
        }
        
        document.body.appendChild(oDiv);
        alterButton();
        
  }
  //创建一个页面的表
  function generateTable(oDiv,start,end)
  {
    var oTable = document.createElement("table");
    generateTableHead(oTable);
    generateTalbeContent(oTable,start,end);
    oDiv.appendChild(oTable);
    return oTable;
  }
  //创建表头
  function generateTableHead(oTable)
  {
    var oTr = oTable.insertRow(-1);
    
    var oTd = oTr.insertCell(-1); 
    oTd.innerHTML = "序号";
    
    var oTd2 = oTr.insertCell(-1);
    oTd2.innerHTML = "消费时间";
    
    var oTd3 = oTr.insertCell(-1);
    oTd3.innerHTML = "付款人";
    
     var oTd4 = oTr.insertCell(-1);
    oTd4.innerHTML = "涉及人员";
    
    var oTd5 = oTr.insertCell(-1);
    oTd5.innerHTML = "消费金额";
    
    var oTd6 = oTr.insertCell(-1);
    oTd6.innerHTML = "消费描述";
    
  }
  //创建表的内容
  function generateTalbeContent(oTalbe,start,end)
  {
       end  = (end > maxRec)?maxRec:end;
       for(var i = start;i<end;i++)
       {
          var oTr = oTalbe.insertRow(-1);//ff中默认必须家参数,而ie默认参数为-1;
          
          var oTd = oTr.insertCell(-1);
          oTd.innerHTML = i+1;
          
          var oTd2 = oTr.insertCell(-1);
          var oSpentTime = Records[i].getElementsByTagName("SpentTime");
          var str = oSpentTime[0].firstChild.nodeValue.toString();
          str = str.substring(0, 19);
          oTd2.innerHTML = str.replace('T','  ');
          
          var oTd3 = oTr.insertCell(-1);
          var Provider = Records[i].getElementsByTagName("Provider");
          oTd3.innerHTML = Provider[0].firstChild.nodeValue;
         
          var oTd4 = oTr.insertCell(-1);
          var Share = Records[i].getElementsByTagName("Share");
          oTd4.innerHTML = Share[0].firstChild.nodeValue;
          
          var oTd5 = oTr.insertCell(-1);
          var Money = Records[i].getElementsByTagName("Money");
          oTd5.innerHTML = Money[0].firstChild.nodeValue+"元";
         
          var oTd6 = oTr.insertCell(-1);
          var Description = Records[i].getElementsByTagName("Description");
          oTd6.innerHTML = Description[0].firstChild.nodeValue;
       }
  }
  function alterButton()
  {
      btnPre.disabled = (currentPage<=1)? true:false;
      btnNext.disabled = (currentPage>=maxpPage)? true:false;
      btnFirst.disabled = (currentPage==1)? true:false;
      btnLast.disabled = (currentPage==maxpPage)? true:false;  
  }
  function removeTableContent(oTable)
  {
     if(oTable.rows.length >1)
     {
        for(var i = oTable.rows.length -1;i>=1;i--)
        {
            oTable.deleteRow(i);
        }
     }
  }
  function goToPage(page,oTable)
  {
     if(page<1)
     {
        window.alert("您输入的页数小于等于0,请输入一个0到"+maxpPage+"的整数");
        return;
     }
     if(page>maxpPage)
     {
        window.alert("您输入的页数超过了最大页数,请输入一个0到"+maxpPage+"的整数");
        return ;
     }
     removeTableContent(oTable);
     currentPage = page;
     var start = (currentPage - 1)*pageShow;
     var end = currentPage*pageShow;
     tx.value = currentPage;
     curLabel.innerHTML = currentPage;
     generateTalbeContent(oTable,start,end);
     alterButton();
  }
  
    
  </script>
  <title>消费详情</title>
  </head>
  <!--方法一不能分页-->
  <!--<body  bgcolor="#FFFFFF"onLoad="addToTable()">
  <h2 align ="center"> 消费信息详情</h2>
      <table id=table0 width="100%"  border="1" cellpadding="0" cellspacing="0" align ="center">
      </table>
  </body>-->
  
   <!--方法二  分页显示-->
   <body  bgcolor="#FFFFFF">
  <h2 align ="center"> 消费信息详情</h2>
      <table id=table0 width="100%"  border="0" cellpadding="0" cellspacing="0" align ="center">      </table>
      <script type ="text/javascript">
        retrieve();
      </script>
  </body>
</html>

显示效果:

 

抱歉!评论已关闭.