motivation:
The query function is the most common and commonly used functional module we have seen on the website. Previous information queries were connected to the database, and every click must be supported by the backend database. However, in many cases, users often only operate on a certain part of the data, which not only increases the burden on the server, but also seriously affects the user's browsing speed.
In this case, we need to pass a part of the data needed by the user to the client in XML, and the user can operate this data very conveniently. It not only facilitates users, but also reduces the burden on server database. Why not do it! Moreover, this function can be used for many other modules, so this dynamic query function has been added.
Material:
Dynamic query of XML volumes
There are 2 files: and
effect:
Filter and filter the data without refreshing the page, effectively improving the function of data query.
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 query</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 (2): Dynamic query</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; }
</style>
<script>
function searchtext(x)
{
stylesheet=;
source=;
sortField=("//@select");
if (x!="")
{
sortField[1].value="team[blue_ID='"+x+"']";
=(stylesheet);
}
else {alert("Please enter filter criteria!");}
}
</script>
</head>
<body>
<p align="center"><span>XML volume practical tips (2): Dynamic query</span></p>
<div name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
<hr size="1" width="500" />
<table align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td>
<span>Please enter filter criteria: </span>
blue_ID= <input type="text" name="searchtext" size="1" maxlength="1" />
<input type="button" class="button" onClick="searchtext()" value="Search" name="button" />
</td>
</tr>
</table>
</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">
<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) 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:
sortField=("//@select");
The function is: find all nodes with selected attributes. This and what I mentioned in dynamic sorting
sortField=("//@order-by");
Something different is a bit different. Please pay attention to this small difference and their respective functions.
sortField[1].value="team[blue_ID='"+x+"']";
Therefore sortField[1] is the second node found, and its corresponding node is
<xsl:apply-templates select="team" order-by="blue_ID"/>
Parameter x is the value entered in the text box.
We changed the search criteria for select="team" to select="team[blue_ID='x']"
The function is: add judgment conditions, and only XML data with the value of blue_ID equal to x will be displayed.
Of course, you can enrich the conditions for judgment. The simple judgment I made here is to make it easier for everyone to understand.
Finally, the new sorted content is displayed by redisplaying the innerHTML value of Layer1.
(2) In the text:
select="team"
In my place it is sortField[1], but it may change when you do it.
Then you must have accurate calculations but no mistakes, otherwise you will find another home!
I provide a common method: in the code you can use loops to determine whether it is the node you need.
Another point:
XML has extremely strict requirements on upper and lower case. So if your writing is not standardized, it will catch a cold!
postscript:
When you are familiar with the ideas of dynamic sorting and dynamic query completion, you will find that our implementation method is actually very simple.
It is to modify a certain value and then display it again.
In the dynamic pagination function, we still complete it according to this idea.