XML crée des pages d'affichage de données triables et paginées

Dans le développement Web, nous rencontrons souvent l'affichage de pagination et le tri des ensembles d'enregistrements de données. Ceci est très facile à faire côté serveur en utilisant le code côté serveur et la technologie de base de données, telle que : asp, php, jsp, etc. Cependant, si vous souhaitez afficher plusieurs enregistrements sur le client et les trier, cela peut être un casse-tête. Ci-dessous, nous utilisons le langage de balisage extensible (xml, langage de balisage extensible) et les transformations du langage de feuille de style extensible (XSLT, transformation de langage unique de style extensible), combinés avec le langage de chemin XML (XPath, langage de chemin XML), et n'avons besoin que d'écrire du code simple. peut être facilement réalisé. Cette méthode évite le processus de transactions fréquentes avec le serveur, économise le temps d'affichage des données et permet aux téléspectateurs de voir les résultats sans attendre, ce qui peut également réduire la charge sur le serveur. en outre. Grâce aux technologies XML et XSLT, le stockage et l'affichage des données sont séparés et notre code peut être réutilisé, réduisant considérablement la charge des programmeurs qui écrivent du code.
Ci-dessous, nous implémentons notre fonction étape par étape.

Premièrement : créer du XSLT

La première ligne de la feuille de style XSLT indique la version de la spécification XML à laquelle le XML est conforme, puis indique l'espace de noms utilisé par la feuille de style. Ici, nous utilisons. la spécification XSL Pour écrire la version officielle de XSL au lieu d'utiliser la méthode d'écriture brouillon de XSL :

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

Remarque : Il existe de grandes différences dans les fonctions et les méthodes d'écriture entre les deux.

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

Ensuite, nous définissons la balise du modèle en XSLT :

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

Nous écrivons le style à afficher dans le modèle. Nous utilisons des îlots de données HTML pour stocker nos données. Ces données peuvent être obtenues à l'aide de requêtes XML de SQL Server 2000. Pour les bases de données qui ne prennent pas en charge XML, nous pouvons écrire nos propres composants pour convertir les données au format XML, puis les insérer. l'îlot de données à l'intérieur. Il existe deux manières d'utiliser les îlots de données en HTML :
L'une consiste à intégrer les données directement, comme indiqué ci-dessous :

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

L'autre consiste à référencer des fichiers externes via l'attribut SRC, comme indiqué ci-dessous :

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

Pour utiliser les données dans l'îlot de données, vous devez les référencer via le nom de l'identifiant. Bien entendu, puisque le fichier XSLT est également un type de fichier au format XML, il peut également l'être. obtenu grâce à cette méthode :

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

Nous ajoutons un balisage DIV à la page pour afficher les résultats de notre conversion :

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

Utilisez XSLT pour convertissez les données dans l'îlot de données, à l'aide de la méthode DOMDocument transNode(), et affichez les résultats via l'attribut innerHTML de DIV :

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

Étape 2 : Implémenter la fonction de tri côté client

Définissons d'abord un champ de tri par défaut, sélectionnez ici "numéro de série" comme mot-clé de tri par défaut, et organisons-le par ordre croissant, ajoutons la balise de tri dans le XSLT :

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

Suivant , nous ajoutons le tri à la fonction feuille de style, afin qu'elle puisse répondre aux opérations de l'utilisateur, nous ajoutons un événement onClick sur chaque colonne de l'en-tête du tableau, qui appelle la fonction sort(), permettant à l'utilisateur de trier la colonne en cliquant sur le bouton en-tête du tableau.

  <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

Ensuite, nous implémentons la fonction d'affichage du nombre d'enregistrements sur chaque page et de définition des pages précédentes et suivantes. Utilisez la balise span pour afficher quelle page est actuellement affichée, combien de pages au total et le nombre total d'enregistrements. Nous affichons 6 enregistrements par page par défaut, et utilisons la variable intRecordsPerPage pour enregistrer cette valeur :

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

Ce qui suit utilise l'opération effectuée par le bouton "Page suivante" comme exemple pour illustrer le processus de conversion différentes pages. Cette fonction détermine le nombre d'enregistrements à afficher et la page correspondante en fonction du paramètre intPage. La modification de la valeur Value de chaque bouton s'effectue en modifiant dynamiquement le contenu du DOM XSL :

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()  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）！