motivation:
In order to facilitate users to view large batches of data, we will use dynamic paging, so the paging function is the most common and commonly used functional module we have seen on the website. In the past, the information paging was connected to the database, and every click was required to support the backend database. This not only increases the burden on the server, but also seriously affects the speed of users' browsing.
Just imagine, if the pagination function is placed on the client, what effect will it have? Haha, take a look at the design below! .
Material:
Dynamic paging of XML volumes
There are 2 files: and
effect:
Put the pagination function to the client. The data is filtered and filtered without refreshing the page, effectively improving the efficiency of the browsing data function.
Effect:
Browse here
Code:
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="" ?>
<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 topic</blue_class>
</team>
<team>
<blue_ID>2</blue_ID>
<blue_name>flyingbird</blue_name>
<blue_text>Marrying you is what you want to hurt</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Flooding Essence</blue_class>
</team>
<team>
<blue_ID>3</blue_ID>
<blue_name>Kaozi</blue_name>
<blue_text>Application of regular expressions 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>Taiyilang</blue_name>
<blue_text>Complete manual of classic branch party at the end of the year 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 summary</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript script</blue_class>
</team>
</BlueIdea>
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http:///TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title> XML volume practical tips (3): Dynamic pagination</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "Stick", "Arial", "Times New Roman"; }
table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#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=;
source=;
nodes=;
len=;
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=("//@expr");
firstNum=OnePageNum*(PageNum-1)+1;
lastNum=OnePageNum*(PageNum-1)+OnePageNum;
text="childnumber(this)>="+firstNum+" & childnumber(this)<="+lastNum;
=text;
=(stylesheet);
}
]]>
</xsl:comment>
</script>
</head>
<body>
<p align="center"><span>XML volume practical tips (3): Dynamic pagination</span></p>
<table align="center" width="500" >
<tr>
<td>
<button class="keybutton" onclick="pages('first');" >Home</button>
<button class="keybutton" onclick="pages('previous');" >Previous page</button>
<button class="keybutton" onclick="pages('next');">Next page</button>
<button class="keybutton" onclick="pages('last');">Last page</button>
</td>
</tr>
</table>
<div name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</body>
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>Number</td>
<td>Name</td>
<td>Theme</td>
<td>Published 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) It is a data file, I believe everyone will not have any problems.
2) It is a format file, there are several things to pay attention to.
(1) In the script:
nodes=;
The function is: find all nodes. It is the total number of nodes that meet the criteria
sortField=("//@expr");
The function is: find the first node with the attribute expr, so its corresponding node is
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Therefore, the value of expr is
childnumber(this)<=1 & childnumber(this)>=2
About > < You may be more familiar with it. Then what is it? It is "with".
You can find some other things in XML books.
Parameter description:
OnePageNum: The number of data displayed per page
PageNum: Current page count
XMLPageNum: Total page count
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 the page, we need to output the appropriate data, so we use an if judgment condition to control it.
In the initial stage, we require only output values of the first two nodes.
childnumber(this)
Function: Return the number of the current node in its upper node list, and the default number of the first node in the list is 1.
In the page, we judge which page it belongs to based on the number of the node.
expr
I don’t know if you have noticed that we used test in the first two times, but we used expr.
There are certain differences between them and their usage is also different.
expr ── Script language expression, the calculation result is "true" or "false"; if the result is "true" and passes test, the contents are displayed in the output (this property can be omitted).
test ── Source data testing conditions.
<button class="keybutton" onclick="pages('first');" >Home</button>
The function is to return the data to the previous page. Other buttons work similarly.
One more thing: How to use XML example files
1) Save the two files in each example according to the file name.
2) Just browse XML files with a browser. This is what you will see, it should be good!
postscript:
Haha, you can add the function of dynamic sorting and then paging. Then change the number of lists to set. Use your mind to make these functions more perfect. You can find a better way to implement the paging function. Discuss each other, have a lot of fun!