Accueil
 chercher             Plan du site             Info (English version) 
L'histoire de XML s'écrit en ce moment même. XMLfr vous aide à la suivre et à en dégager les tendances.Les listes de discussions XMLfr sont à votre disposition pour réagir sur nos articles ou simplement poser une question.Si vous ètes passionnée(e) par XML, pourquoi ne pas en faire votre métier ?XMLfr n'est heureusement pas le seul site où l'on parle de XML. Découvrez les autres grâce à XMLfr et à l'ODP.Les partenaires grâce auxquels XMLfr peut se développer.Pour tout savoir sur XMLfr.XMLfr sans fil, c'est possible !Pour ceux qui veulent vraiment en savoir plus sur XML.L'index du site.
 Si vous vous posez une question, vous n'êtes peut-être pas le premier...Les traductions en français des bibles XML.Ces articles sont des références dans leur domaine.Tout ce qu'il faut savoir pour démarrer sur un sujet XML...


Tri dynamique avec XSLT

Comment autoriser un utilisateur à définir son critère de tri avec MSXML et XSLT?

Réponse de Laurent Raffalli mise en forme par Eric van der Vlist, Dyomedea (vdv@dyomedea.com).
jeudi 18 janvier 2001

J'ai un fichier XML qui est transformé en une page HTML via un feuille XSLT sur le poste client (IE 5.x et MSXML 3.0).

J'aimerais que l'utilisateur puisse trier en dynamique ces données.

Comment faut-il procéder ?

Un tri s'effectue en XSLT au moyen de l'instruction xsl:sort:

<xsl:sort select="NUMERO" order="descending"/>

Pour rendre le tri dynamique, on peut affecter à l'évènement "ONCLICK" de chaque entête d'un tableau une fonction Javascript que l'on appelera par exemple "tri" avec comme paramètre le nom de l'élément support du tri:

onclick="javascript:tri('NUMERO')

La fonction "tri" récupère le nom du noeud support de la commande SORT puis peut se servir de cette information pour modifier la feuille de style en accédant à son DOM avant de ré-appliquer la transformation.

Dans l'exemple qui suit, si le nom de l'élément présent dans l'ordre est déjà égal au nom passé en paramètre alors le tri a déjà était effectué sur cette colonne. Il s'agit donc d'un tri inversé par rapport au tri précédent.

En revanche si le nom est différent, alors la fonction tri porte sur un nouvel entête, d'ou changement de nom et un tri croissant.

Une fois les paramètres du tri modifiés, la fonction tri ré-applique la transformation de la feuille de style sur le fichier XML ce qui provoque l'affichage des données avec les nouveaux critères de tri.

Document tri.xml:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml:stylesheet type="text/xsl" href="tri.xsl"?>
<VEHICULES>
      <VEHICULE>
            <NUMERO>000066</NUMERO>
            <MARQUE>Daewoo</MARQUE>
            <MODELE>Lanos SE GPL</MODELE>
            <IMMATRICULATION>9999 ZZ 99</IMMATRICULATION>
            <DATE_IMMAT>1999-11-01</DATE_IMMAT>
      </VEHICULE>
      <VEHICULE>
            <NUMERO>000180</NUMERO>
            <MARQUE>Daewoo</MARQUE>
            <MODELE>Lanos SE GPL</MODELE>
            <IMMATRICULATION>7777 XX 99</IMMATRICULATION>
            <DATE_IMMAT>1999-10-01</DATE_IMMAT>
      </VEHICULE>
      <VEHICULE>
            <NUMERO>000280</NUMERO>
            <MARQUE>Daewoo</MARQUE>
            <MODELE>Lanos SE GPL</MODELE>
            <IMMATRICULATION>8888 XX 99</IMMATRICULATION>
            <DATE_IMMAT>2000-10-01</DATE_IMMAT>
      </VEHICULE>
</VEHICULES>

Feuille tri.xsl:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html>
 <head>
 <title>Listing VO</title>
 <script language="JScript"><![CDATA[
 
 // Déclaration des variables
 var XSLSource = new Object();          
 var XMLSource = new Object();
 
 // Chargement des documents XML et XSL
 XMLSource = document.XMLDocument;
 XSLSource = document.XSLDocument;
 
 function tri (rubrique) {
 
  // Déclaration des variables
 var XSLSort = new  Object();            
 
 // Sélection de l'ordre xsl:sort
 XSLSort =
   XSLSource.documentElement.selectNodes("//xsl:sort");
 
  // Affectation de la rubrique de tri
 if (XSLSort[0].attributes(0).text == rubrique.toString()){
   if ( XSLSort[0].attributes(1).text == "ascending") {
     XSLSort[0].attributes(1).text = "descending";
   } else {
     XSLSort[0].attributes(1).text = "ascending";
   }
 } else {
   XSLSort[0].attributes(1).text = "ascending";
 }
 XSLSort[0].attributes(0).text = rubrique.toString();
 // affichage de l'ordre de tri
 XSLem = XSLSource.documentElement.selectNodes("//p/em");
 XSLem [0].text = rubrique.toString();
 XSLem [1].text = XSLSort[0].attributes(1).text ;
 // Réaffichage de la page
 document.body.innerHTML =
   XMLSource.transformNode(XSLSource);
}]]></script>
 </head>
 <body>
   <p>Tri sur <em>NUMERO</em> par ordre <em>descending</em>.</p>
   <p>Cliquez sur un titre pour changer l'ordre de tri.</p>
   <table border="1" cellspacing="1">
     <tr>
       <th id="HeaderColumnNUMERO"
         onclick="javascript:tri('NUMERO');">Numéro</th>
       <th id="HeaderColumnMARQUE"
         onclick="javascript:tri('MARQUE');">Marque</th>
       <th id="HeaderColumnMODELE"
         onclick="javascript:tri('MODELE');">Modèle</th>
       <th id="HeaderColumnIMMATRICULATION"
         onclick="javascript:tri('IMMATRICULATION');"
         >Immatriculation</th>
       <th id="HeaderColumnDATE_IMMAT"
         onclick="javascript:tri('DATE_IMMAT');"
         >Date d'immatriculation</th>
     </tr>
     <xsl:apply-templates select="VEHICULES/VEHICULE">
       <xsl:sort select="NUMERO" order="descending"/>
     </xsl:apply-templates>
   </table>
 </body>
</html>
</xsl:template>
<xsl:template match="VEHICULE">
 <tr>
   <td>
     <xsl:value-of select="NUMERO"/>
   </td>
   <td>
     <xsl:value-of select="MARQUE"/>
   </td>
   <td>
     <xsl:value-of select="MODELE"/>
   </td>
   <td>
     <xsl:value-of select="IMMATRICULATION"/>
   </td>
   <td>
     <xsl:value-of select="DATE_IMMAT"/>
   </td>
 </tr>
</xsl:template>
</xsl:stylesheet>
JA: "[xml-tech] Trier des données dans un page HTML"Laurent Raffalli: "[xml-tech] tri par colonne dans un tableau généré par XSL"

Copyright 2001, Laurent Raffalli (réponse) et Eric van der Vlist (mise en forme).


 

Mots clés.



L'histoire de XML s'écrit en ce moment même. XMLfr vous aide à la suivre et à en dégager les tendances.


Les documents publiés sur ce site le sont sous licence "Open Content"
Conception graphique
  l.henriot  

Conception, réalisation et hébergement
Questions ou commentaires
  redacteurs@xmlfr.org