User Defined Filtering of HTML table built with XML/XSL

I am new to web development, and have found myself stuck on how to approach allowing website visitors to filter and sort an HTML table of publications that has been generated by XML/XSL. Due to server constraints, I cannot use .php or ASP.NET - the data must remain a flat-file.

Here is the basic structure of the XML file:

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

And, my 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>

I would like to add dropdown lists to the keyword field, and a user-defined text field to the contributors and abstract fields.

The XSL file outputs the table perfectly, I just don't know what the best approach is to building the filter and sort functionalities. I've tried a few JavaScript and jQuery scripts for table sorting/filtering , but I can't get them to work properly. I don't get any errors, but I don't get the added functionality.

Any guidance would be greatly appreciated. Thanks for reading!

I think you are going to get into a bit of a pickle if you keep going down the road of XSLT.

Yep, its been working fine as a transformation with a single table output that is relatively static, however now you want to add all the bells and whistles your XSLT is going to get increasingly complex and less useful than an all-purpose language since it is only meant for transformations.

I would recommend that, since you are stuck without server side code, you use the full capabilities of a native javascript library to handle the sorting on the client as well as the other functionality you are going to need on this page.

Ext JS comes to mind, but there are other examples such as Dojo or YUI that would serve you well too.

The component you are looking for is generally called a "Grid".

In Ext JS you can implement a GridPanel. Or if your data has more than 500 records in it use a Buffered GridPanel which is a similar implementation that only renders DOM for the rows that are being displayed.

Hope this is useful.