XML creates sortable and paginated data display pages

In Web development, we often encounter paging display and sorting of data record sets. This is very easy to use on the server side using server-side code and database technology, such as: asp, php, jsp, etc. However, if you want to display multiple records on the client and sort them, it can be a headache. Below, we use Extensible Markup Language (xml, extensible markup language) and Extensible Stylesheet Language Transformations (XSLT, extensible style single language transformation), combined with XML Path Language (XPath, XML path language), and only need to write simple code , can be easily achieved. This method avoids the process of frequent dealings with the server, saves the time of data display, and allows viewers to see the results without waiting, which can also reduce the load on the server. in addition. Thanks to XML and XSLT technology, data storage and data display are separated, and our code can be reused, greatly reducing the burden of programmers writing code.
Below, we implement our function step by step.

First: Create XSLT

The first line of the XSLT style sheet indicates the XML specification version that the XML complies with, and then indicates the namespace used by the style sheet. Here, we use the XSL specification To write the official version of XSL instead of using the draft writing method of XSL:

   <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

Note: There are big differences in functions and writing methods between the two.

 <?xml version="1.0"?>  
   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Next, we define the template tag in XSLT:

<xsl:template match="/">  
   <xsl:apply-templates select="/客户关系表"/>  
   </xsl:template>  
    
   <xsl:template match="/客户关系表"></xsl:template>

We write the style to be displayed into the template. We use HTML data islands to store our data. These data can be obtained using XML queries of SQL Server 2000. For databases that do not support XML, we can write our own components to convert the data into XML format, and then put it in the data island. inside. There are two ways to use data islands in HTML:
One is to embed data directly, as shown below:

 <XML id=&#39;&#39;Data&#39;&#39;>  
   <客户关系表>  
   <客户>每条数据</客户>  
   </客户关系表>  
   </XML>

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

 <XML id=&#39;&#39;Data&#39;&#39; src=&#39;&#39;Data.xml&#39;&#39;></XML>

To use the data in the data island, you must reference it through the id name. Of course, since the XSLT file is also a type of XML format file, it can also be achieved through this method:

<XML id=&#39;&#39;Style&#39;&#39; src=&#39;&#39;Style.xsl&#39;&#39;></XML>

We add markup DIV to the page to display the results of our conversion:

   <div id="DisplayArea"></div>

Use XSLT to convert the data in the data island, use the transNode() method of DOMDocument, and convert the results It is displayed through the innerHTML attribute of DIV:

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

Step 2: Implement the client-side sorting function

We first set a default sorting field, here select "Serial Number" As the default sort keyword, and arranged in increasing order, add the sort tag in XSLT:

<xsl:for-each select="客户">  
   <xsl:sort select="序号" order="descending" data-type="number"/>  
   </xsl:for-each>

Next, we add the sorting function to the style sheet so that it can respond to user operations. We add Add an onClick event to each column of the table header, which calls the sort() function, allowing the user to sort the column by clicking the table header.

  <td onClick="sort(&#39;&#39;序号&#39;&#39;)">序号</td>  
   Sort()函数的语句如下所示：  
   Function Sort(strField)  
    
   Dim sortField  
   Dim sortOrderAttribute  
    
   &#39;&#39;　得到原来排序字段的属性值  
   Set sortField = Style.XMLDocument.selectSingleNode("//xsl:sort/@select")  
    
   &#39;&#39;　得到原来排序的顺序属性值  
   Set sortOrderAttribute = Style.XMLDocument.selectSingleNode("//xsl:sort/@order")  
    
   &#39;&#39;　如果我们已经按所点击的列的字段排序，我们必须改变排序的顺序；  
   &#39;&#39;　否则，我们只需要按新所点击的列字段按默认的顺序进行排序  
   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  
   &#39;&#39;　输出排序后的结果  
   DisplayArea.innerHTML = Data.transformNode(Style.DocumentElement)  
    
   End Function

Next, we implement the function of displaying the number of records on each page and setting the previous and next pages. Use the span tag to display which page is currently displayed, how many pages in total and the total number of records. We display 6 records per page by default, and use the variable intRecordsPerPage to save this value:

<table width="100%" border="0" style="font-size:9pt">  
   <tr>  
   <td align="left"><b>第 <span id="CurrentPage"></span> 页 总 <span id="PageCount"></span> 页    共有 <span id="RecordCount"></span> 条记录</b></td>  
   <td align="right"><b>每页记录数：<input onblur="setRecordsPerPage()" id="RecordsPerPage" style="vertical-align:middle;height:15pt;width:30px"/></b></td>  
   <td align="right">  
   <span id="Paging">  
   <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="最末页"/>  
   </span>  
   </td>  
   </tr>  
   </table>

The following uses the operation performed by the "Next Page" button as an example to illustrate the process of converting different pages. This function determines the number of records to be displayed and the corresponding page based on the parameter intPage. The change in the Value value of each button is achieved by dynamically changing the content of the XSL DOM:

Function nextPage(intPage)  
    
   Dim strDisplay  
   Dim strDateRange  
    
   If CInt(CStr(intPage) * intRecordsPerPage) < _  
   Data.selectNodes("/客户关系表/客户").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 = _  
   "./客户[position() <= " & (CStr(intPage) _  
   * intRecordsPerPage) & " and position() > " _  
   & (CInt(intPage) - 1) * intRecordsPerPage & _  
   "]"  
    
   redisplay (intPage)  
    
   End If  
    
   End Function

下面，我们来看看设置每个页面记录条数的函数setRecordsPerPage()，该函数通过动态修改xsl:for-each的select属性值来实现的，使用XPath来遍历那些符合节点位置大于0并且节点位置小于每页记录数加1的那些节点。其中主要的语句是下面的一行：
Style.XMLDocument.selectNodes("//xsl:for-each/@select")(1). _
value = "./客户[position() < " & intRecordsPerPage + 1 & " and "& " position() > 0]"
到目前为止，我们的页面既可以实现排序，也实现动态改变每页显示记录条数的功能了，为了实现可重用的要求，我们还可以进行进一步的改进。XPath是进行XML/XSLT应用开发的一个强有力的工具，XPath中可以使用通配符，使XSLT样式单文件完全不依赖于你的数据节点名称。因此，我们在改变XML数据的时候，只要不改变节点的层次关系，可以不必改动XSLT就可以直接使用。比如：在本例中，你可以添加或者删除某些字段、或添加删除一些记录，直接使用本例中的XSLT，不但可以在表格里正常显示出数据，而且还能正常排序和分页。
下面我们就分析一下是如何实现的。比如下面的层次关系：

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

假如我们的XSLT中有这样一个选择模板的句子：

<xsl:apply-templates select="/客户关系表"/>

为了实现通用性的要求，我们可以使用通配符：

  <xsl:apply-templates select="/*"/>

这里我们使用了子运算符"/"，它选择了根下的所有节点，两者的不同点在于："/客户关系表"选择的是根下的客户关系表子节点，而"/*"选择的是根下所有的直接子节点，在上面的XML数据格式中，二者是完全等价的。
对于下面的for-each循环来说：

<xsl:for-each select="客户">  
   <xsl:sort select="序号" order="ascending"/>  
   </xsl:for-each>

我们可以改变成这样的形式：

  <xsl:for-each select="./*">  
   <xsl:sort select="./*[1]" order="ascending"/>  
   </xsl:for-each>

这里"./*"表示你应当包含进去当前节点下所有的一级子节点，语法"./*[1]"表示的是选择当前节点中的第一个子节点。
另外还有一个地方可以改进的是，我们可以把它改成，表示在每一次循环中选择当前节点。
在我们的函数中，还使用了一些硬代码，如果不做改动的话，我们的通用性还是实现不了，因此，我们下面就看看如何替换硬代码中的语句。
在创建表头的时候，我们使用了 序号的语句，如果XML数据里没有序号节点的话，这里显然会出现错误的，为了实现通用性，我们自定义了一个函数getName，来取得所要显示的节点的名称：

<td>  
   <xsl:attribute name="onClick">  
   Sort(&#39;&#39;<xsl:value-of select="user:getName(.)"/>&#39;&#39;)  
   </xsl:attribute>  
   <xsl:value-of select="user:getName(.)"/>  
   </td>

自定义函数是XSLT的一个突出的功能，要使用这个特性，我们得用msxml:script元素来定义，同时，必须在样式单定义的时候指定一个用户定义的名字空间。下面就是我们使用自定义函数的全部内容：

 <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>

在我们的XSLT文件中，使用了两个循环，我们分别进行相应的更改，第一处：显示表头的地方改为，它等同于；第二处循环是显示每行记录，改成。还有其他的地方需要更改的，请参见后面的完整源代码部分。这样我们就完成了通用的XSLT文件，不管你的XML数据有多少字段，也不管节点名称是什么，我们都无需更改XSLT文件，就可以实现我们的功能了。最终的浏览效果将会象下图所示：

以下是完整的Style.xsl文件的内容：

  
     
     
     
     
    
     
   <xsl:apply-templates select="/*"/>  
     
    
     
   
  
   
  
   
第  页 总  页    共有  条记录
  
   
每页记录数：
  
   
  
     
     
     
     
     
     
   
  
   
  
   
  
     
     
     
     
   
  
     
   Sort('''')  
     
     
   
  
     
     
   以下是进行输出的Exam.htm文件：  
     
     
     
     
     
     
     
   
客户关系表
  
     
   <客户关系表 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 id=&#39;&#39;Style&#39;&#39; src=&#39;&#39;Style.xsl&#39;&#39;></XML>  
   <div id="DisplayArea"></div>  
   
资料来源：【孟宪会之精彩世界】
  
     
   

   把上面的内容拷贝到本地计算机上，分别保存为相应的文件，在IE5+和XML3.0+的环境下即可看到效果！ 

 以上就是XML创建可排序、分页的数据显示页面的内容，更多相关内容请关注PHP中文网（www.php.cn）！