Using Javascript+xml to implement paging

Source: Internet
Author: User
Tags header implement return
javascript|xml| Paging

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= ' # ' > front page </A>";
Return thepage;
}
function NextPage (page)
{
Thepage= "the next page";
if (page<pagesnumber) thepage= "<a href= ' # ' > 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 ' >";
sp= "<select name= ' hehe ' >";
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



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.