JavaScript read XML implementation JavaScript paging

JavaScript read XML implementation JavaScript paging _javascript tips

Last Update:2017-01-19 Source: Internet

Author: User

Tags prev

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> reading XML and Paging </title>

<body >
<div id= "Gao" >

</div>
<div>
<table align= "center" >
<tr>
<td><input type= "button" Name= "prev" id= "prev" value= "previous page" onclick= "ShowPage (' false ')" ><input type= " Button "Id=" Next "name=" Next "value=" next page "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 ("name"));
Headerrow.insertcell (1). AppendChild (document.createTextNode ("school"));
Headerrow.insertcell (2). AppendChild (document.createTextNode ("results"))
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>

In the process of writing, involving the processing of code, because I initially, the JavaScript code in the head tag, resulting in the Document.body object is empty!
We all know that JavaScript in the implementation of the page will be tentatively loaded to execute the HTML code, so when the JS code in the head tag, the HTML page has not been executed to the body, resulting in errors!
Later the JS code, placed in the body of the tail, so that you can correctly reference to the body object!
At the same time, in large web site architecture, but also to improve the speed of the page loading a way! Page loaded HTML tag content, to the end of the page, in the implementation of JS code, to a large extent, to enhance the speed of web pages to enhance the user experience!
The other Student.xml content is

Copy Code code as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<students>
<student name= "Gaoxing" >
<school> Northwestern University 1</school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwestern University 2</school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> West Peking University 3 Science </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwestern University 4</school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> West Peking University 5 Science </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> West Peking University 6 science </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> West Peking University 7 Science </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwest 8 University </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwest 9 University </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwest 10 University </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwestern University </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwestern University </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwestern University </school>
<grade>76</grade>
</student>
<student name= "Gaoxing" >
<school> Northwestern University </school>
<grade>76</grade>
</student>
</students>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More