Create a sortedand paging data display page in XML

In Web development, we often encounter paging display and sorting of data record sets. this is very easy to use the server code and database technology on the server side. for example: asp, php, jsp, etc. However, it is a headache to display multiple records on the client and sort them. Next, we use ExtensibleMarkupLanguage (xml, extensible markup language) and extensiblestylesheet?agetransformations (XSLT, extensible style single language conversion), and XMLPathLanguage (XPath, XML in Web development, we often encounter paging display and sorting of data record sets, which makes it easy to use the server code and database technology on the server side, such: asp, php, jsp, etc. However, it is a headache to display multiple records on the client and sort them. Next, we use Extensible Markup Language (xml, Extensible Markup Language) and Extensible Stylesheet Language Transformations (XSLT, Extensible style single Language conversion), and combine XML Path Language (XPath, XML Path Language), you can easily implement it by writing simple code. This method avoids the process of dealing with the server frequently and saves the data display time. the browser can see the results without waiting, and reduces the burden on the server. In addition. Due to XML and XSLT technologies, data storage and data display separation can also allow reuse of our code, greatly reducing the burden on programmers to write code.
Next, we will implement our functions step by step.

First, create an XSLT

The first line of the XSLT style sheet indicates the XML Standard version that the XML complies with, and then the namespace used by the style sheet. here, we will write it in the formal version of the XSL standard, instead of writing the XSL draft:

Note: There is a big difference between the two in terms of functions and writing.

Next, we will define the template tag in XSLT:

We will write the style to be displayed into the template. We use the HTML data Island to store our data, which can be obtained through SQL Server 2000 XML queries. for databases that do not support XML, we can write our own components to convert the data into XML format and put it in the data Island. There are two ways to use data Islands in HTML:
First, embed data directly, as shown below:

 
      
  <客户关系表>     
   <客户>
    
Each data entry
        
       
 

The second is to reference an external file through the SRC attribute, as shown below:

To use the data in the data Island, you must use the id name to reference it. of course, because the XSLT file is also a file in XML format, you can also use this method:

We add a tag DIV to the page to display our conversion results:

Use XSLT to convert data in the data Island, use the transNode () method of DOMDocument, and display the result through the innerHTML attribute of DIV:

DisplayArea.innerHTML = Data.transformNode(Style.DocumentElement)

Step 2: implement client sorting

First, set a default sorting field. here, "Sequence Number" is selected as the default sorting keyword, which is arranged in ascending order and added the sort tag in XSLT:

Next, we add the sorting function for the style sheet to respond to user operations. we add an onClick event to each column in the header, and this event calls the sort () function, you can click the header to sort the column.

  Serial NumberThe statement of the Sort () Function is as follows: Function Sort (strField) Dim sortField Dim sortOrderAttribute ''obtains the attribute value Set sortField = Style of the original sorting field. XMLDocument. selectSingleNode ("// xsl: sort/@ select") ''to obtain the attribute value Set sortOrderAttribute = Style. XMLDocument. selectSingleNode ("// xsl: sort/@ order") ''if we have sorted by the field of the column we clicked, we must change the sorting order;'' otherwise, we only need to sort the new column fields in the default order If sortField. value = strField Or sortField. value = ". /* [0] "Then If sortOrderAttribute. value = "descending" Then sortOrderAttribute. value = "ascending" Else sortOrderAttribute. value = "descending" End If Else sortField. value = strField sortOrderAttribute. value = "ascending" End If Set sortField = Nothing Set sortOrderAttribute = Nothing ''output the sorted result DisplayArea. innerHTML = Data. transformNode (Style. documentElement) End Function

The following describes the number of records displayed on each page and the function of setting the front and back pages. Use the span tag to display the page number, total page number, and total number of records currently displayed. By default, six records are displayed on each page. use the variable intRecordsPerPage to save the value:

 
 
     
  
  
 
   
 
    
Total page of the page contains a total of records
 
    
Number of records per page:
 
    
     
 
   
 
  
 
 

The following uses the next page as an example to describe how to convert different pages. This function determines the number of records to be displayed and the corresponding page based on the intPage parameter. The Value of each button is implemented by dynamically changing the content of the xsl dom:

Function nextPage (intPage) Dim strDisplay Dim strDateRange If CInt (CStr (intPage) * intRecordsPerPage) <_ Data. selectNodes ("/customer relationship table/customer "). length Then intPage = CInt (intPage) + 1 Style. XMLDocument. selectNodes ("// @ OnClick") _ (1 ). value = "previousPage (" & intPage & ")" Style. XMLDocument. selectNodes ("// @ OnClick") _ (2 ). value = "nextPage (" & intPage & ")" Style. XMLDocument. selectNodes _ ("// xsl: for-each/@ select") (1 ). value = _". /customer [position () <= "& (CStr (intPage) _ * intRecordsPerPage) &" and position ()> "_ & (CInt (intPage)-1) * intRecordsPerPage & _ "]" redisplay (intPage) End If End Function

Next, let's take a look at the setRecordsPerPage () function that sets the number of records on each page. This function is implemented by dynamically modifying the select attribute value of xsl: for-each, use XPath to traverse those nodes that match the node location greater than 0 and the node location smaller than the number of records per page plus 1. The main statement is the following line:
Style. XMLDocument. selectNodes ("// xsl: for-each/@ select") (1 )._
Value = "./customer [position () <" & intRecordsPerPage + 1 & "and" & "position ()> 0]"
So far, our pages can both be sorted and dynamically change the number of records displayed on each page. to meet reusable requirements, we can make further improvements. XPath is a powerful tool for XML/XSLT application development. in XPath, wildcards can be used to make XSLT style file completely independent of your data node name. Therefore, when we change XML data, we can directly use XSLT without changing the node hierarchy. For example, in this example, you can add or delete some fields, or add or delete some records, and directly use XSLT in this example, not only can the data be normally displayed in the table, it can also be sorted and paged normally.
Next we will analyze how it is implemented. For example, the following hierarchical relationship:

 
 <客户关系表>     
  <客户>     
   <序号>     
   <姓名>     
   <电子邮件>     
       
 

Assume that our XSLT contains the following sentence for selecting a template:

To meet the universal requirements, we can use wildcards:

Here we use the sub-operator "/", which selects all nodes under the root, the difference between the two is: "/customer relationship table" selects the customer relationship table sub-nodes under the root, and "/*" selects all direct sub-nodes under the root, in the preceding XML data format, the two are completely equivalent.
For the following for-each loop:

We can change it to this form:

"./*" Indicates that you should include all the first-level subnodes under the current node. the syntax "./* [1]" indicates that the first subnode of the current node is selected.
Another thing that can be improved is: , We can change it To select the current node in each cycle.
Some hard code is also used in our functions. If no changes are made, we still cannot implement the versatility. Therefore, let's take a look at how to replace the statements in the hard code.
We usedSerial NumberIf no sequence number node exists in the XML data, an error occurs here. to achieve universality, we have customized a function getName to get the name of the node to be displayed:

     
 
       Sort(''
  '')     
      
      

A custom function is an outstanding function of XSLT. to use this feature, we must use the msxml: script element to define it. at the same time, you must specify a user-defined namespace when defining a style sheet. The following is all the content of the user-defined function:

 
      
            function getName(node)     getName = node.item(0).nodeName     end function     }>     </msxsl:script></pre><p>在我们的XSLT文件中，使用了两个循环，我们分别进行相应的更改，第一处：显示表头的地方改为<xsl:for-each select="./*[1]/*">，它等同于<xsl:for-each select="客户关系表/客户[1]/*">；第二处循环是显示每行记录，改成<xsl:for-each select="./*">。还有其他的地方需要更改的，请参见后面的完整源代码部分。这样我们就完成了通用的XSLT文件，不管你的XML数据有多少字段，也不管节点名称是什么，我们都无需更改XSLT文件，就可以实现我们的功能了。最终的浏览效果将会象所示：  </p><p></p><p>   以下是完整的Style.xsl文件的内容：  </p><pre class="brush:xml;toolbar:false"><?xml version="1.0" encoding="gb2312"?>     <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:user="http://lucky.myrice.com" version="1.0">     <msxsl:script language="VBScript" implements-prefix="user">     <![CDATA[     Function getName(node)     getName = node.Item(0).nodeName     End Function     }>     </msxsl:script>         <xsl:template match="/">     <xsl:apply-templates select="/*"/>     </xsl:template>         <xsl:template match="/*">     <table width="100%" border="0" style="font-size:9pt">     <tr>     <td align="left"><b>第  页 总  页    共有  条记录</b></td>     <td align="right"><b>每页记录数：<input onblur="setRecordsPerPage()" id="RecordsPerPage" style="vertical-align:middle;height:15pt;width:30px"/></b></td>     <td align="right">          <input type="button" OnClick="FirstPage()" value="第一页"/>     <input type="button" OnClick="previousPage(1)" value="上一页"/>     <input type="button" OnClick="nextPage(1)" value="下一页"/>     <input type="button" OnClick="LastPage()" value="最末页"/>          </td>     </tr>     </table>     <Table WIDTH="100%" BORDER="0" cellpadding="0" cellspacing="1" style="font-size:11pt" bgcolor="#0099ff">     <tr bgcolor="#FF6600" style="cursor: hand;padding:5px">     <xsl:for-each select="./*[1]/*">     <td align="center">     <xsl:attribute name="onclick">     Sort(&#39;&#39;<xsl:value-of select="user:getName(.)"/>&#39;&#39;)     </xsl:attribute>     <b><u><xsl:value-of select="user:getName(.)"/></u></b>     </td>     </xsl:for-each>     </tr>     <xsl:for-each select="./*[position() < 6 and position() > 0]">     <xsl:sort select="./*[1]" order="ascending"/>     <tr bgcolor="#FFCCFF">     <xsl:for-each select="./*">     <td> <xsl:value-of select="."/></td>     </xsl:for-each>     </tr>     </xsl:for-each>     </Table>     </xsl:template>     </xsl:stylesheet>     以下是进行输出的Exam.htm文件：     <HTML>     <Head>     <META http=equiv="Content-Type" Content="text/html;charset=gb2312">     <STYLE>     body { font-family:宋体; font-size:9pt;}     th { font-family:宋体; font-size:11pt; font-weight:bold;}     </STYLE>          </Head>     <body>     <p align="center" style="font-weight:bold;font-size:12pt;color:#0000FF;border-bottom:3px double red;padding-bottom:5px">客户关系表</p>     <XML id=&#39;&#39;Data&#39;&#39;>     <客户关系表 xmlns:dt="urn:schemas-microsoft-com:datatypes">     <客户><序号 dt:dt="int">01</序号><姓名>Mi</姓名><电子邮件>water@21cn.com</电子邮件></客户>     <客户><序号 dt:dt="int">02</序号><姓名>uyi</姓名><电子邮件>Lily@sina.com</电子邮件></客户>     <客户><序号 dt:dt="int">03</序号><姓名>uiyu</姓名><电子邮件>John@21cn.com</电子邮件></客户>     <客户><序号 dt:dt="int">04</序号><姓名>Doug</姓名><电子邮件>Karry@163.net</电子邮件></客户>     <客户><序号 dt:dt="int">05</序号><姓名>Ellen</姓名><电子邮件>vivki@sina.com</电子邮件></客户>     <客户><序号 dt:dt="int">06</序号><姓名>Frank</姓名><电子邮件>net_lover@mengxianhui.com.cn</电子邮件></客户>     <客户><序号 dt:dt="int">07</序号><姓名>Greg</姓名><电子邮件>meng@mengxianhui.com</电子邮件></客户>     <客户><序号 dt:dt="int">08</序号><姓名>Harry</姓名><电子邮件>sunny@xianhui.net</电子邮件></客户>     <客户><序号 dt:dt="int">09</序号><姓名>Ingrid</姓名><电子邮件>cathy@hotmail.com</电子邮件></客户>     <客户><序号 dt:dt="int">10</序号><姓名>Jeff</姓名><电子邮件>your@mxh.com</电子邮件></客户>     <客户><序号 dt:dt="int">11</序号><姓名>Kelly</姓名><电子邮件>Iloveyou@mengxianhui.com</电子邮件></客户>     <客户><序号 dt:dt="int">12</序号><姓名>Larry</姓名><电子邮件>smilling@mengxianhui.com</电子邮件></客户>     <客户><序号 dt:dt="int">13</序号><姓名>Mark</姓名><电子邮件>money@21cn.com</电子邮件></客户>     <客户><序号 dt:dt="int">14</序号><姓名>Nancy</姓名><电子邮件>www@yahoo.com</电子邮件></客户>     <客户><序号 dt:dt="int">15</序号><姓名>Peter</姓名><电子邮件>dotnet@aol.com</电子邮件></客户>     <客户><序号 dt:dt="int">16</序号><姓名>Rachel</姓名><电子邮件>billgates@microsoft.com</电子邮件></客户>     <客户><序号 dt:dt="int">17</序号><姓名>Seth</姓名><电子邮件>flying@yous.net</电子邮件></客户>     <客户><序号 dt:dt="int">18</序号><姓名>Tim</姓名><电子邮件>agooyboy@lovegirl.com</电子邮件></客户>     </客户关系表>     </XML>     <XML id=&#39;&#39;Style&#39;&#39; src=&#39;&#39;Style.xsl&#39;&#39;></XML>     <p id="DisplayArea"></p>     <table border="0" width="100%" style="font-size:11pt;">     <tr>     <td align="right">资料来源：【孟宪会之精彩世界】</td>     </tr>     </table>     </body>     </HTML></pre><p>   把上面的内容拷贝到本地计算机上，分别保存为相应的文件，在IE5+和XML3.0+的环境下即可看到效果！ </p><p> 以上就是XML创建可排序、分页的数据显示页面的内容，更多相关内容请关注PHP中文网（www.php1.cn）！<br/></p>