Motivation:
To make it easier for users to view large quantities of data, we use dynamic paging, so paging is the most common and common feature module we've seen on our website. The previous information paging is connected to the database, each click must be backed up by the background database. This not only the burden of the server, but also seriously affect the speed of user browsing.
Imagine, if you put the paging function on the client, that will produce what kind of effect. Oh, look at the design below.
Materials:
Dynamic paging of XML volumes
There are 2 files: Pages.xml and pages.xsl
Role:
Put the paging feature on the client. Filter the data without refreshing the page, effectively improve the efficiency of browsing data function.
Effect:
Browse here
Pages.xml
<?xml version= "1.0" encoding= "gb2312"?>
<?xml-stylesheet type= "text/xsl" href= "pages.xsl"?>
<BlueIdea>
<team>
<blue_ID>1</blue_ID>
<blue_name>Sailflying</blue_name>
<blue_text> a simple page-out </blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>xml Special </blue_class>
</team>
<team>
<blue_ID>2</blue_ID>
<blue_name>flyingbird</blue_name>
<blue_text> marry you, it's your pain </blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class> Irrigation Essence </blue_class>
</team>
<team>
<blue_ID>3</blue_ID>
<blue_name> Caustic </blue_name>
Application of <blue_text> Regular expression in UBB forum </blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>web Programming Essentials </blue_class>
</team>
<team>
<blue_ID>4</blue_ID>
<blue_name> too b lang </blue_name>
<blue_text> end of the year Classic Rudder party complete manual v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class> Forum Irrigation Area </blue_class>
</team>
<team>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>asp error Message </blue_text>
<BLUE_TIME>2001-10-13 16:39:05</blue_time>
<blue_class>javascript Script </blue_class>
</team>
</BlueIdea>
Pages.xsl
<?xml version= "1.0" encoding= "gb2312"?>
<xsl:stylesheet xmlns:xsl= "Http://www.w3.org/TR/WD-xsl" >
<xsl:template match= "/" >
<title> the actual battle of the XML Volume (3): Dynamic paging </title>
<style>
body,blueidea,team,blue_id,blue_name,blue_text,blue_time,blue_class{font:12px "Song Body", "Arial", "Times New Roman";}
Table {font-size:12px; border:0px double; Border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; b Gcolor: #eeeeee; Text-decoration:blink}
span {font-size:12px; color:red;}
. keybutton {cursor:hand; font-size:12px; color: #003300; background: #ffffff; border:0px solid;}
</style>
<script>
<xsl:comment>
<! [cdata[
var onepagenum=2;
var pagenum=1;
var xmlpagenum=1;
function pages (Num)
{
Stylesheet=document. Xsldocument;
Source=document. XMLDocument;
Nodes=source.documentelement.childnodes;
Len=nodes.length;
For (i=1;i<= (len/onepagenum); i++);
Xmlpagenum=i;
var firstnum=0;
var lastnume=0;
if (num== "first") {pagenum=1;}
if (num== "previous") {if (pagenum>1) Pagenum-=1;}
if (num== "next") {if (pagenum<xmlpagenum) Pagenum +=1;}
if (num== "last") {Pagenum =xmlpagenum;}
Sortfield=document. Xsldocument.selectsinglenode ("//@expr");
firstnum=onepagenum* (PageNum-1) +1;
lastnum=onepagenum* (PageNum-1) +onepagenum;
Text= "Childnumber (This) >=" +firstnum+ "& Childnumber (This) <=" +lastnum;
Sortfield.value=text;
Layer1.innerhtml=source.documentelement.transformnode (stylesheet);
}
]]>
</xsl:comment>
</script>
<body>
<p align= "Center" ><span>xml volume of Actual Combat (3): Dynamic paging </span></p>
<table align= "center" width= ">"
<tr>
<td>
<button id= "Cmdfirstpage" class= "Keybutton" onclick= "pages (' first ');" > Home </button>
<button id= "Cmdpreviouspage" class= "Keybutton" onclick= "pages (' previous ');" > Previous </button>
<button id= "Cmdnextpage" class= "Keybutton" onclick= "pages (' Next ');" > Next </button>
<button id= "Cmdlastpage" class= "Keybutton" onclick= "pages (' last ');" > Last </button>
</td>
</tr>
</table>
<div id= "Layer1" name= "Layer1" > <xsl:apply-templates select= "Blueidea"/></div>
</body>
</xsl:template>
<xsl:template match= "Blueidea" >
<table width= "border=" 1 "align=" center "cellpadding=" 1 "cellspacing=" 1 "bordercolordark=" #ffffff " bordercolorlight= "#ADAAAD" >
<tr bgcolor= "#FFCC99" align= "Center" >
<td> numbering </td>
<td> name </td>
<td> Topics </td>
<td> Publication Time </td>
<td> Classification </td>
</tr>
<xsl:apply-templates select= "Team" order-by= "blue_id"/>
</table>
</xsl:template>
<xsl:template match= "Team" >
<xsl:if expr= "Childnumber (this) >=1 & Childnumber (This) <=2 ">
<TR align= "center" >
<xsl:apply-templates select= "blue_id"/>
<xsl:apply-templates select= "Blue_name"/>
<xsl:apply-templates select= "Blue_text"/>
<xsl:apply-templates select= "Blue_time"/>
<xsl:apply-templates select= "Blue_class"/>
</tr>
</xsl:if>
</xsl:template>
<xsl:template match= "blue_id" >
<TD bgcolor= "#eeeeee" >
<xsl:value-of/>
</td>
</xsl:template>
<xsl:template match= "Blue_name" >
<td>
<xsl:value-of/>
</td>
</xsl:template>
<xsl:template match= "Blue_text" >
<td>
<xsl:value-of/>
</td>
</xsl:template>
<xsl:template match= "Blue_time" >
<td>
<xsl:value-of/>
</td>
</xsl:template>
<xsl:template match= "Blue_class" >
<td>
<xsl:value-of/>
</td>
</xsl:template>
</xsl:stylesheet>
Explain:
1) search.xml is a data file, I believe we will not have a problem.
2) search.xsl is a format file, there are several places to note.
(1) in the script:
Nodes=source.documentelement.childnodes;
The function is: Find all the nodes. Nodes.length is the total number of points that meet the criteria
Sortfield=document. Xsldocument.selectsinglenode ("//@expr");
The function is to find the first node that has a property of expr, so its corresponding node is
<xsl:if expr= "Childnumber (this) >=1 & Childnumber (This) <=2 ">
So the value of expr at the initial onload is
Childnumber (This) <=1 & Childnumber (this) >=2
About > < You may be more familiar with it. What's the &? It is "with".
You can find something else in the XML book.
Parameter description:
Onepagenum: Number of data displayed per page
Pagenum: Current Page
Xmlpagenum: Total Pages
Firstnum: The first data value of the current page
Lastnum: The last data value of the current page
(2) in the text:
<xsl:if expr= "Childnumber (this) >=1 & Childnumber (This) <=2 ">
In paging we need to output the appropriate data, so we use an IF-judging condition to control it.
At the beginning we asked for the value of only the first two nodes to be output.
Childnumber (This)
Function: Returns the number of the current node in its ancestor node list, and the first node in the list is numbered 1 by default.
In pagination we are judging by the number of the node that it belongs to the first page.
Expr
Do not know that we found no, the first two we used to be test, but this we use is expr.
There are certain differences between them, and the usage is not the same.
The expr── script language expression evaluates to TRUE or false, and if the result is true and passes test, the content is displayed in the output (this property can be omitted).
test── source data test conditions.
<button id= "Cmdfirstpage" class= "Keybutton" onclick= "pages (' first '); > Home </button> function is to get the data back to the previous page. The other buttons Act similarly.
Add one point: How XML example files are used
1) Save the two files in each example according to the file name separately.
2) Browse the XML file with your browser. This is what you will see the effect, should be good.
Postscript:
Hehe, can increase the dynamic sorting after the function of paging. Change the number of lists to set. Use your mind to make these features more perfect. You can work out a better way to achieve paging functionality. It's a pleasure to explore each other.
Author Blog: http://blog.csdn.net/aspstu/
