js結合xml檔案實現的分頁效果

antzone發表於2017-03-17
JSXML

本章節分享一段能夠從xml檔案讀取資料，然後使用js讀取實現分頁效果，下面只列出程式碼，自己自行分析一下即可，這裡就不多介紹了。程式碼如下:

一.前臺讀取js程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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="下一頁"></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>

二.xml檔案程式碼:

[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>

相關文章