motivation:
The sorting function makes the data on our page appear more humane, which is a very common functional effect we have seen on websites. In the past, automatic sorting was done with a lot of script code, which was difficult for ordinary enthusiasts. However, it is much simpler to deal with it using XML. Make your page more gorgeous, haha, are you excited too!
Material:
The dynamic sorting of XML volumes has two files: paixu.xml and paixu.xsl.
The functions are:
Without refreshing the page, the data can be re-sorted and displayed according to the user's own needs, effectively improving the data interaction function and making your page more colorful.
Effect:
Browse here
Code:
paixu.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
<BlueIdea>
<team>
<blue_ID>1</blue_ID>
<blue_name>Sailflying</blue_name>
<blue_text>A simple sort</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>
paixu.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<head>
<title> Practical Tips for XML Volume (1): Dynamic Sorting</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; }
</style>
<script>
function taxis(x)
{
stylesheet=document.XSLDocument;
source=document.XMLDocument;
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
sortField.value=x;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
</script>
</head>
<body>
<p align="center"><span>XML Volume Practical Tips (1): Dynamic Sorting</span></p>
<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 style="cursor:s-resize" onClick="taxis('blue_ID')">Number</td>
<td style="cursor:s-resize" onClick="taxis('blue_name')">Name</td>
<td style="cursor:s-resize" onClick="taxis('blue_text')">Theme</td>
<td style="cursor:s-resize" onClick="taxis('blue_time')">Publish time</td>
<td style="cursor:s-resize" onClick="taxis('blue_class')">Classification</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</table>
</xsl:template>
<xsl:template match="team">
<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: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) paixu.xml is a data file, I believe everyone will have no problem.
2) paixu.xsl is a format file, there are several things to pay attention to.
(1) In the script:
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
The function is: find the first node with the attribute order-by, so its corresponding node is
<xsl:apply-templates select="team" order-by="blue_ID"/>
Therefore, the value of order-by during the first onLoad is blue_ID.
And we achieve the purpose of sorting by redefining the value of order-by.
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
The function is: change Layer1 after converting XML data, so after passing out the parameter 'blue_name',
<td style="cursor:s-resize" onClick="taxis('blue_name)">Name</td>
We modify the value of order-by to 'blue_name', that is, use 'blue_name' as the sorting method.
Then display the new sorted content by redisplaying the innerHTML value of Layer1.
(2) In the text:
order-by
You can’t miss this, otherwise you won’t be able to find it. Take a look at the effect! !
<?xml version="1.0" encoding="gb2312" ?>
One more thing:
Encoding="gb2312" is rarely added to the code shown in most XML textbooks.
Therefore, when we use Chinese in XML, an error will be reported. The reason is that this declaration is not written.
postscript:
After everyone is familiar with the idea of dynamic sorting, you will find that our implementation method is actually very simple.
Just modify the order-by value and then display it again.
In the functions of dynamic query and dynamic paging, we still follow this idea.