begin process at 2012 05 30 02:27:56
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Evènements

 > 

Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript)


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript)

mercredi 23 mai 2007 à 17:13:29 | Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript)

edevouge

Bonjour,

Dans le cadre d'un stage, j'ai besoins de créer un tableau html à partir d'un fichier XML et d'un fichier XSL. Et grâce au JavaScript, je voudrais que l'utilisateur puisse modifier l'ordre de tri (ASC, DESC). Je suis tombé sur un scripts ( [ Lien ] ) que j'ai adapté à mon projet, seulement un problème mageur perssiste: le tri ne s'effectue que sur le premier caractère.

C'est à dire:
Admetons que j'ai ce fichier XML:

<Root>
  <Table>
    <Nombre>25</Nombre>
    <Nombre>1</Nombre>
    <Nombre>3</Nombre>
    <Nombre>8882</Nombre>
  </Table>
</Root>

Une fois la page xHtml générée on obtiendra un tri DESC de ce type: 8882,3,25,1

et un tri ASC de ce type: 1,25,3,8882

J'espère que mon exemple est clair. Le problème vient donc du fait que le critère de tri ne se base que sur le premier charactère.

Pouvez-vous m'aider?

Merci d'avance de vos réponses.

jeudi 24 mai 2007 à 10:08:23 | Re : Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript)

bultez

Membre Club





Bonjour,

    le tri est sur "du caractère", pas sur "du nombre"
        donc 8 (de 8888) > 3  (de 3) > 2 (de 25) > 1 (de 1)
    ° adapter la taille du champ au maxi ( en ajoutant des 0 )
    ° peut-être une option sur le tri ?
    ° ...

Cordialement            Bul     [mon Site]     [M'écrire]



jeudi 24 mai 2007 à 13:23:42 | Re : Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript)

edevouge

Merci pour ta réponse Bul, mais peut-tu être plus clair dans les solutions que tu propose s'il te plait?

voici mon code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet
 xmlns:xsl=" [ Lien ]" version="1.0">
<xsl:template match="/">


<html>
 <head>
 <title>Exemple XML + XSLT + JavaScript</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 ;
 XSimg = XSLSource.documentElement.selectNodes("//img src="");

 

 
// Réaffichage de la page
 document.body.innerHTML =
   XMLSource.transformNode(XSLSource);
}]]></script>
 </head>
 
 <!--***********.::DEBUT BODY::.************-->
 <body>
 <img src=".gif"/>
   <p>
    
    Tri sur <em>DB</em> par ordre <em>descending</em>.
    <I> Cliquez sur un titre pour changer l'ordre de tri.</I>
  </p>
  
<!-- Compteur de Lignes sur la colone 'DB'-->
  <b>Nombre de Lignes : <xsl:value-of select="count(//DB)"/></b>
 

<!-- Création du tableau, réaction de la tete de tableau à la souris -->

   <table border="1" cellspacing="0" ALIGN="center" BGCOLOR="#EEEEEE" BORDERCOLOR="#000000">
     <tr>

 <th bgcolor="white" id="HeaderColumnDB"
  onclick="javascript:tri('DB');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
 >DB</th>  
           
 <th bgcolor="white" id="HeaderColumnReqid"
         onclick="javascript:tri('Reqid');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
 >Reqid</th>

 <th bgcolor="white" id="HeaderColumnDESCRIPTION"
         onclick="javascript:tri('DESCRIPTION');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
 >DESCRIPTION</th>

       <th bgcolor="white" id="HeaderColumnSubmitted_Date"
         onclick="javascript:tri('Submitted_Date');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
         >Submitted_Date</th>

       <th bgcolor="white" id="HeaderColumnStart_Date"
         onclick="javascript:tri('Start_Date');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
         >Start_Date</th>

       <th bgcolor="white" id="HeaderColumnEnd_Date"
         onclick="javascript:tri('End_Date');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
         >End_Date</th>

       <th bgcolor="white" id="HeaderColumnApplication"
         onclick="javascript:tri('Application');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
         >Application</th>

       <th bgcolor="white" id="HeaderColumnWait_Duration"
         onclick="javascript:tri('Wait_Duration');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
         >Wait_Duration</th>

       <th bgcolor="white" id="HeaderColumnPROGRAM"
         onclick="javascript:tri('PROGRAM');" onMouseOver="bgColor='#FF9900', this.style.cursor='hand';" onMouseOut="bgColor='#FFFFFF';"
         >PROGRAM</th>


     </tr>


     <xsl:apply-templates select="NewDataSet/Table"> <!-- select TABLE -->
       <xsl:sort select="DB" order="descending"/>
     </xsl:apply-templates>
   </table>
 </body>
</html>
</xsl:template>


<xsl:template match="Table">
 <tr>
   <td>
     <xsl:value-of select="DB"/>
  </td>
   <td>
     <xsl:value-of select="Reqid"/>
   </td>
   <td>
     <xsl:value-of select="DESCRIPTION"/>
   </td>
   <td>
     <xsl:value-of select="Submitted_Date"/>
   </td>
   <td>
     <xsl:value-of select="Start_Date"/>
   </td>
   <td>
     <xsl:value-of select="End_Date"/>
   </td>
   <td>
     <xsl:value-of select="Application"/>
   </td>
   <td>
     <xsl:value-of select="Wait_Duration"/>
   </td>
   <td>
     <xsl:value-of select="PROGRAM"/>
   </td>

 </tr>
 
</xsl:template>


</xsl:stylesheet>
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml:stylesheet type="text/xsl" href="tri.xsl"?>

jeudi 24 mai 2007 à 13:54:22 | Re : Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript)

bultez

Membre Club






le sort xsl ( j'ai un exemple comme ça :  <xsl:sort select="*[name()=$field]" order="{$order}" /> )
    comporte peut-être des paramètres différents pour trier sur du numérique ?

sinon ( ce serait plus qu'étonnant !!! ) il faudrait mettre les zones =
    0001,0025,0003,8882 en supposant que 9999 est le maxi


Cordialement                Bul     [mon Site]     [M'écrire]



jeudi 24 mai 2007 à 15:35:22 | Re : Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript)

edevouge

Ah d'accord...
mardi 26 janvier 2010 à 15:22:34 | Re : Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript)

Pergos

En naviguant un peu sur le sujet, j'ai trouvé ceci qui pourrait t'intéresser...


Cette discussion est classée dans : tableau, tri, html, xml, xsl


Répondre à ce message

Sujets en rapport avec ce message

transformation XML vers HTML [ par cuq ] Bonjour,J'ai une petite question concernant la transformation de page XML en HTML.  dans une de mes pages je réalise la conversion de fichier XML+XSL Tri de colonnes d'un tableau html grâce à un js [ par ebenedzer ] SalutJe n'arrive pas à trouver comment je peux trier les colonnes d'un tableau fait en html, à l'aide d'un javascript.Est-ce que je dois mettre des ba xml et xsl et html [ par sokotanic ] bonjourj'ai un fichier xml et un fichier xsl, est quand je clique sur mon fichier xml la page s'affiche correctement comme une page html et c'est bien Tri à bulles d'un tableau HTML [ par Airman31 ] Tout d'abord bonjour à tous, J'ai besoin d'un petit coup de main pour une fonction Javascript que je suis en train d'implémenter : tri à bulle sur un Problème création de tableau associatif de facon récursive [ par choungaboys ] Bonjour, je souhaite lire un xml et générer un tableau a partir des données de ce-dernier. Je souhaite créer mon tableau de la facon suivante: tab[nom tri de tableau multiple [ par PROTECTIONNISTE ] Bonjour,Je voudrais pouvoir classer via un élèment de tableau et ressortir ce tri convenablement. j'expliques car pour le moment ça veut rien dire ;-) Exporter un tableau contenu dans une page html vers un document text [ par chezeu ] J'ai un tableau contenu dans une page html. Je voudrais exporter ce tableau vers un document text à partir d'un bouton.N'y a t'il pas une fonction qui boucle en XSL [ par justforthesnow ] Bonjour à tous, je suis en train de découvrir le XSL. J'ai fait une boucle qui parcourt mes noeuds. Ca fonctionne. Ce que je voudrais faire c'est lir xml [ par ahmedba1 ] Salut j'ais un problème pour remplir les deux tableau $a[] et $b[] ils restent toujours vides la page ahmed.php : load('ahmed.xml'); $racine = $dom-> Envoi de code HTML en Ajax (méthode POST) et éditeurs WYSIWYG [ par mioumiounorris ] Bonjour ! Je suis en train de réaliser la partie admin d'un site, et j'utilise TinyMCE afin de pouvoir publier mes articles. Je me suis mis en tête de


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,827 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales