Home > Developer > JavaScript
In web-based technology, pagination is an old, no longer old, but we relish the problem, with the increasingly application of XML technology, the application of XML to the paging, is also a possibility, of course, a lot of online tutorials, when I was looking at a muddle, simply write one of their own, and share with you, correct.
Total two files tmh.htm & Tt.xml
The source code is as follows:
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" >
Variable Correlation definition **************
* Author: hai Zi *
* Email:rautinee@21cn.com *
* This procedure is free to use, but be sure to keep this information *
//****************************************
var pagenum=4; Display a few messages per page
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")
This is where you changed the name of the field you actually obtained.
header= "<table border=1><tr><td> name </td><td> icon </td><td>ip address </td> <td>email</td><td></td><td> Date </td><td></td><td></td ></tr> ";
Number of records retrieved
Maxnum = Xmldoc.getelementsbytagname (mode). length
Number of columns per record
Column=xmldoc.getelementsbytagname (Mode). Item (0). childnodes
Number of columns per record
Colnum=column.length
Pages
Pagesnumber=math.ceil (Maxnum/pagenum)-1;
Pagesnumber2=math.ceil (Maxnum/pagenum);
Previous page
function Uppage (page)
{
Thepage= "Previous page";
if (page+1>1) thepage= "<a href= ' # ' onclick= ' Javascript:return uppagego () ' > Previous </A>";
Return thepage;
}
function NextPage (page)
{
Thepage= "the next page";
if (page<pagesnumber) thepage= "<a href= ' # ' onclick= ' Javascript:return nextpagego ' () ' > After </A>";
Return thepage;
}
function Uppagego () {
if (page>0) page--;
GetContent ();
Bodytext= "";
}
Current number of pages
function CurrentPage ()
{
var CP;
Cp= "Currently is the first" + (page+1) + "page";
return CP;
}
Total number of pages
function Allpage ()
{
var ap;
Ap= ' total ' + (pagesnumber+1) + ' page ';
Return AP
}
function Nextpagego ()
{
if (page<pagesnumber) page++;
GetContent ();
Bodytext= "";
}
Show Paging status bar
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 (page<pagesnumber) 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 (endnum>maxnum) endnum=maxnum;
Bodytext=header+bodytext;
for (; n<endnum;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 ("No suitable Talent information retrieved")
}
Else
{
GetContent ()
}
</script>
</BODY>
</HTML>
Here's the code for Tt.xml.
<?xml version= "1.0" encoding= "GB2312"?>
<rautinee>
<member id= ' 1 ' >
<name> hai zi </name>
<loginName>rautinee</loginName>
<email>rautinee@btamail.net.cn</email></member>
<member id= ' 2 ' >
<name> Strong </name>
<loginName>hehe</loginName>
<email>rautinee@chinamanagers.com</email></member>
<member id= ' 3 ' >
<name> Jinhua Just </name>
<loginName>nature_it</loginName>
<email>rautinee_sea@hotmail.com</email></member>
<member id= ' 4 ' >
<name> Jianqiang </name>
<loginName>tank</loginName>
<email>tank@163.com</email></member>
<member id= ' 7 ' >
<name> Joint Venture </name>
<loginName>kaka</loginName>
<email>kaka@eyou.com</email></member>
<member id= ' 6 ' >
<name> Plus personal </name>
<loginName>apple</loginName>
<email>apple@163.com</email></member>
<member id= ' 8 ' >
<name>null</name>
<loginName>sunny</loginName>
<email>rautinee@eyou.com</email></member>
<member id= ' a ' >
<name> Baby </name>
<loginName>index</loginName>
<email>rautinee@21cn.com</email></member>
<member id= ' ' >
<name>null</name>
<loginName>login</loginName>
<email>webmaster@chinamanagers.com</email></member>
<member id= ' >
<name>jiang</name>
<loginName>123</loginName>
<email>japing@chianmanagers.com</email></member>
<member id= ' >
<name>null</name>
<loginName>world</loginName>
<email>rautinee@21cn.com</email></member>
<member id= ' >
<name>null</name>
<loginName>swallow</loginName>
<email>swallow@chinamanagers.com</email></member>
<member id= ' >
<name> Weig </name>
<loginName>hotmail</loginName>
<email>rautinee_sea@hotmail.com</email></member>
<member id= ' >
<name>null</name>
<loginName>wrong</loginName>
<email>wrong@chinamanagers.com</email></member>
<member id= ' >
<name>null</name>
<loginName>leah</loginName>
<email>leah@chinamanagers.com</email></member>
<member id= ' >
<name>null</name>
<loginName>ttth</loginName>
<email>rautinee@21cn.com</email></member>
</rautinee>
At the moment it seems to support only >ie5.0
If you have any good methods and improvements, please notify me by letter, thank you.
OK, just enjoy it, and good luck
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
