XML/XSLで構築されたHTMLテーブルのユーザ定義フィルタリング

Question

私はWeb開発の初心者で、Webサイトの訪問者がXML/XSLによって生成された出版物のHTMLテーブルをフィルタリングして並べ替えることを可能にする方法に固執しています。サーバーの制約のため、私は.phpやASP.NETを使用できません。データはフラットファイルのままでなければなりません。

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

そして、私の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> 

私はkeywordフィールドにドロップダウンリストを追加したい、とユーザー定義のでしょう。ここ

は、XMLファイルの基本的な構造は、テキストフィールドをcontributorsおよびabstractフィールドに追加します。

XSLファイルはテーブルを完全に出力しますが、フィルタとソート機能を構築するのに最善の方法は何か分かりません。私はテーブルソート/フィルタリングのためのJavaScriptとjQueryスクリプトをいくつか試しましたが、それらを正しく動作させることはできません。私はエラーはありませんが、私は追加された機能を持っていません。

ご指摘いただければ幸いです。読んでくれてありがとう！

Answer 1

あなたはXSLTの道を踏み続けるなら、あなたはちょっとしたピクルスに入ると思います。

これは比較的静的な1つのテーブル出力を使った変換として機能していましたが、XSLTがますます複雑になり、汎用性に欠けてしまうような鐘や笛をすべて追加したいそれは変換のためのものでしかないからです。

サーバーサイドコードなしで立ち往生しているので、ネイティブのJavaScriptライブラリのすべての機能を使用して、このページで必要となる他の機能と同様にクライアントの並べ替えを処理することをお勧めします。

Ext JSなどがありますが、DojoやYUIなどもあります。

あなたが探しているコンポーネントは、一般に「グリッド」と呼ばれます。

Ext JSではGridPanelを実装できます。また、データに500以上のレコードがある場合は、Buffered GridPanelを使用します。これは、表示されている行に対してのみDOMをレンダリングする同様の実装です。

希望すると便利です。