motivation:
In order to facilitate users to view large amounts 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, information paging was connected to the database, and every click required the support of the background database. This not only increases the burden on the server, but also seriously affects the user's browsing speed.
Just imagine, if the paging function is put on the client, what kind of effect will it have? Haha, take a look at the design below! .
Material:
The dynamic paging of the XML volume has two files: pages.xml and pages.xsl.
The functions are:
Put the paging function on the client side. Filter data without refreshing the page, effectively improving the efficiency of browsing data.
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 paging</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 will hurt you</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>Kao Zi</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>Tayilang</blue_name>
<blue_text>Year-end classic steering 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 summary</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</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="/">
<html>
<head>
<title> XML volume practical tips (3): dynamic paging</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; 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[
varOnePageNum=2;
varPageNum=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>
</head>
<body>
<p align="center"><span>XML volume practical tips (3): dynamic paging</span></p>
<table align="center" width="500" >
<tr>
<td>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Homepage</button>
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >Previous page</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">Next page</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">Last page</button>
</td>
</tr>
</table>
<div id="Layer1" 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>Publish 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 everyone will have no problem.
2) search.xsl is a format file, there are several things to pay attention to.
(1) In the script:
nodes=source.documentElement.childNodes;
The function is: find all nodes. nodes.length is the total number of nodes that meet the conditions
sortField=document.XSLDocument.selectSingleNode(" //@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 during the first onLoad is
childnumber(this)<=1 & childnumber(this)>=2
About > < You may be more familiar with it. So what is & It is "and".
You can find others in XML books.
Parameter description:
OnePageNum: The number of data displayed on each page
PageNum: current page number
XMLPageNum: total number of 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 appropriate data, so we use an if judgment condition to control it.
At the beginning, we requested that only the values of the first two nodes be output.
childnumber(this)
Function: Returns the number of the current node in its superior node list. The default number of the first node in the list is 1.
In paging, we judge which page it belongs to based on the number of the node.
expr
I don’t know if you have noticed that the first two times we used test, but this time we used expr.
There are certain differences between them and their usage is also different.
expr ─ Scripting language expression, the calculation result is "true" or "false"; if the result is "true" and passes the test, the content will be displayed in the output (this attribute can be omitted).
test ── source data test conditions.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Homepage</button>
The function is to return the data to the previous page. The other buttons work similarly.
One additional point: How to use XML example files
1) Save the two files in each example separately according to their file names.
2) Use a browser to browse the XML file. This is the effect you will see, it should be good!
postscript:
Haha, you can add the function of paging after dynamic sorting. Then make the number of lists configurable. Use your imagination to make these functions more perfect. You can research better ways to implement paging functionality. It’s great to discuss with each other!