Motivation:
In order to facilitate the user to view large quantities of data, we will use dynamic paging, so the paging function is the most common and most commonly used functional modules that we have seen on the website. And the previous information paging are connected to the database, each click must be back to the background database support. This will not only increase the burden on the server, but also seriously affect the speed of user browsing.
Just imagine, if the paging function to the client, that will produce what kind of effect? Oh, look at the following design bar!.
Materials:
dynamic pagination of XML volumes
There are 2 files: Pages.xml and pages.xsl
Role:
Put the paging functionality on the client side. Filter the data without refreshing the page, effectively improve the efficiency of browsing the data function.
Effect:
Browse here
Code:
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 pagination </blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>xml Special Topics </blue_class>
</team>
<team>
<blue_ID>2</blue_ID>
<blue_name>flyingbird</blue_name>
<blue_text> marry you, is to you 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> The harsh child </blue_name>
The 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 Essence </blue_class>
</team>
<team>
<blue_ID>4</blue_ID>
<blue_name> 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 Information </blue_text>
<BLUE_TIME>2001-10-13 16:39:05</blue_time>
<blue_class>javascript Scripts </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> XML volume of actual combat (3): Dynamic pagination </title>
<style>
body,blueidea,team,blue_id,blue_name,blue_text,blue_time,blue_class{font:12px, "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== "a") {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 the actual combat Kam (3): Dynamic paging </span></p>
<table align= "center" width= "M" >
<tr>
<td>
<button id= "Cmdfirstpage" class= "Keybutton" > Home </button>
<button id= "Cmdpreviouspage" class= "Keybutton" > Prev </button>
<button id= "Cmdnextpage" class= "Keybutton" > next page </button>
<button id= "Cmdlastpage" class= "Keybutton" > 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> number </td>
<td> name </td>
<td> Topics </td>
<td> Publishing 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 any problems.
2 search.xsl is a format file, there are several places to pay attention to.
(1) in the script:
Nodes=source.documentelement.childnodes;
The effect is: Find all the nodes. Nodes.length is the total number of points that match the condition
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 in the first onload, the value of expr is
Childnumber (This) <=1 & Childnumber (this) >=2
About > < You may be more familiar with it. So what's &? It is the "and".
You can find some of the other things in the XML book.
Parameter description:
Onepagenum: Number of data displayed per page
Pagenum: Current Pages
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 condition to control.
At the beginning we asked to output only the values of the first two nodes.
Childnumber (This)
Function: Returns the number of the current node in its parent node list, and the first node in the list defaults to the number 1.
In the page, we are based on the number of nodes to determine it belongs to the first few pages.
Expr
Do not know that we found no, the first two we used are test, but this we use is expr.
There is a certain difference between them and the usage is not the same.
expr── a script language expression that evaluates to True or false, and if the result is true, and the content is displayed in the output (this property can be omitted).
test── source data test conditions.
<button id= "Cmdfirstpage" class= "Keybutton" > Home </button>
The effect is to get the data back to the previous page. The other buttons work like this.
Add one point: How XML example files are used
1 The two files in each example are saved according to the filename.
2 Browse the XML file with the browser. This is the effect you will see, it should be good!
Postscript:
Oh, you can add dynamic sorting after the paging function. Then the list number can be set. Use your mind to make these functions more perfect. You can work out a better way to achieve paging. Mutual discussion, the joy!
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
