Filtrage défini par l'utilisateur du HTML construit avec XML/XSL

Question

Je suis nouveau au développement de Web, et me suis trouvé coincé sur comment approcher permettant aux visiteurs de site Web de filtrer et de trier un tableau de HTML de publications qui a été généré par XML/XSL . En raison de contraintes de serveur, je ne peux pas utiliser .php ou ASP.NET - les données doivent rester un fichier plat.

Voici la structure de base du fichier XML:

<xml> 
    <records> 
    <record> 
     <contributors> 
      <author>Author 1</author> 
      <author>Author 2</author> 
      <author>Author 3</author> 
     </contributors> 
     <title>Publication Title</title> 
     <type>Publication Type</type> 
     <keywords>Multiple Keywords</keywords> 
     <year>1995</year> 
     <abstract>Abstract Text Here</abstract> 
    </record> 
    </records> 
</xml> 

Et, mon XSL:

<table id="cvPubs"> 
    <thead> 
     <tr> 
     <th>Authors</th> 
     <th>Title</th> 
     <th>Type of Publication</th> 
     <th>keywords</th> 
     <th>Year</th> 
     <th>Abstract</th> 
     </tr> 
    </thead> 
    <tbody> 
    <xsl:for-each select="descendant::record"> 
     <tr> 
     <td><xsl:value-of select="keywords" /></td> 
     <td><xsl:value-of select="contributors/*[position()]" /></td> 
     <td><xsl:value-of select="titles/title" /></td> 
     <td><xsl:value-of select="abstract" /></td> 
     <td><xsl:value-of select="titles/tertiary-title" /></td> 
     <td><xsl:value-of select="year" /></td> 
     </tr> 
    </xsl:for-each> 
    </tbody> 
</table> 

Je voudrais ajouter des listes déroulantes au champ keyword, et un utilisateur défini champ de texte aux champs contributors et abstract.

Le fichier XSL sort parfaitement la table, je ne sais pas quelle est la meilleure approche pour construire le filtre et trier les fonctionnalités. J'ai essayé quelques scripts JavaScript et jQuery pour le tri et le filtrage des tables, mais je n'arrive pas à les faire fonctionner correctement. Je ne reçois aucune erreur, mais je ne reçois pas la fonctionnalité ajoutée.

Toute indication serait grandement appréciée. Merci d'avoir lu!

Answer 1

Je pense que vous allez entrer dans un peu de pétrin si vous continuez sur la route de XSLT. Oui, ça fonctionne très bien comme une transformation avec une seule sortie de table qui est relativement statique, mais maintenant vous voulez ajouter toutes les cloches et les sifflets que votre XSLT va devenir de plus en plus complexe et moins utile qu'un usage général langue car il est uniquement destiné à des transformations. Je recommande que, puisque vous êtes bloqué sans code côté serveur, vous utilisez les capacités complètes d'une bibliothèque javascript native pour gérer le tri sur le client ainsi que les autres fonctionnalités dont vous aurez besoin sur cette page. Il me vient à l'esprit, mais il y a d'autres exemples tels que Dojo ou YUI qui vous serviraient bien aussi.

Le composant que vous recherchez est généralement appelé "Grid".

Dans Ext JS, vous pouvez implémenter un GridPanel. Ou si vos données ont plus de 500 enregistrements, utilisez une Buffered GridPanel qui est une implémentation similaire qui affiche uniquement DOM pour les lignes affichées.

Espérons que cela soit utile.