And here's an example that uses a bilingual XML file and loads list.js and as well as some CSS to pretty up things:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<STYLE type="text/css"><!--
body {font-family:sans-serif;}
table {border-collapse:collapse;}
th,td {border:1px solid #999; vertical-align:top;}
th {text-align:center;}
td.name, td.namede, td.comments {text-align:left;}
td.basecost, td.baseweight, td.page {text-align:right;}
td.lc, td.tl {text-align:center;}
input {
border:solid 1px #ccc;
border-radius: 5px;
padding:7px 14px;
margin-bottom:10px
}
input:focus {
outline:none;
border-color:#aaa;
}
.sort {
padding:8px 30px;
border-radius: 6px;
border:none;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #28a8e0;
height:30px;
}
.sort:hover {
text-decoration: none;
background-color:#1b8aba;
}
.sort:focus {
outline:none;
}
.sort:after {
display:inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:-10px;
right:-5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:4px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-4px;
right:-5px;
}
--> </STYLE>
</head>
<body>
<h1>GURPS Equipment (XSLT Conversion from GCA Files)</h1>
<p><a href="index.php">Back to Index</a></p>
<div id="sorttable">
<button class="sort" data-sort="name" style="margin-right:10px;">Sort by EN Item Name</button>
<button class="sort" data-sort="namede" style="margin-right:10px;">Nach DE Name sortieren</button>
<input class="search" placeholder="Search / Suche"/>
<table id="G4Equip" border="1" cellspacing="0" cellpadding="2" color="#DDDDDD" style="border:1px solid #ddd;">
<tbody class="list">
<tr>
<th width="15%">Item</th>
<th width="15%">Deutsch</th>
<th width="5%">Cost</th>
<th width="5%">Weight</th>
<th width="5%">LC</th>
<th width="5%">TL</th>
<th width="5%">Page</th>
<th width="45%">Other Info</th>
</tr>
<xsl:apply-templates/>
</tbody>
</table>
</div>
<script src="list.min.js"></script>
<script>
var options = { valueNames: [ 'name', 'namede', 'basecost', 'baseweight', 'lc', 'tl', 'page', 'comments' ] };
var userList = new List('sorttable', options);
</script>
</body>
</html>
</xsl:template>
<xsl:template match="equipment">
<xsl:for-each select="*"> <!-- take all descendants of equipment (ID tags) -->
<tr>
<!--<td><xsl:value-of select="local-name()"/></td>-->
<td class="name" width="15%"><xsl:value-of select="./name"/></td>
<td class="namede" width="15%"><xsl:value-of select="./namede"/></td>
<td class="basecost" width="5%"><xsl:value-of select="./basecost"/> <xsl:text> $</xsl:text> </td>
<td class="baseweight" width="5%"><xsl:value-of select="./baseweight"/> <xsl:text> lbs.</xsl:text> </td>
<td class="lc" width="5%">
<xsl:choose>
<xsl:when test="./lc != ''">
<xsl:value-of select="./lc"/>
</xsl:when>
<xsl:otherwise>
<xsl:text>4</xsl:text>
</xsl:otherwise>
</xsl:choose>
</td>
<td class="tl" width="5%">
<xsl:choose>
<xsl:when test="./tl != ''">
<xsl:value-of select="./tl"/>
</xsl:when>
<xsl:otherwise>
<xsl:text>3</xsl:text>
</xsl:otherwise>
</xsl:choose>
</td>
<td class="page" width="5%"><xsl:value-of select="./page"/></td>
<td class="comments" width="45%" style="font-size:0.8rem">
<xsl:choose>
<xsl:when test="./damage != ''">
<xsl:text>Dam: </xsl:text> <xsl:value-of select="./mode"/>
<xsl:text> </xsl:text> <xsl:value-of select="./damage"/>
<xsl:text> </xsl:text> <xsl:value-of select="./damtype"/>
<xsl:text> / R: </xsl:text> <xsl:value-of select="./reach"/>
<xsl:text> Parry: </xsl:text> <xsl:value-of select="./parry"/>
<xsl:text> MinST: </xsl:text> <xsl:value-of select="./minst"/>
<xsl:text> / Acc: </xsl:text> <xsl:value-of select="./acc"/>
<xsl:text> ½D: </xsl:text> <xsl:value-of select="./rangehalfdam"/>
<xsl:text> Max: </xsl:text> <xsl:value-of select="./rangemax"/>
<xsl:text> RoF: </xsl:text> <xsl:value-of select="./rof"/>
<xsl:text> Shots: </xsl:text> <xsl:value-of select="./shots"/>
<xsl:text> Blk: </xsl:text> <xsl:value-of select="./bulk"/><br/>
</xsl:when>
</xsl:choose>
<xsl:choose>
<xsl:when test="./dr != ''">
<xsl:text>DR: </xsl:text> <xsl:value-of select="./dr"/>
<xsl:text> </xsl:text><xsl:value-of select="./location"/><br/>
</xsl:when>
</xsl:choose>
<xsl:choose>
<xsl:when test="./skillused != ''">
<xsl:text>Skill: </xsl:text> <xsl:value-of select="./skillused"/> <xsl:text> / </xsl:text>
</xsl:when>
</xsl:choose>
<xsl:choose>
<xsl:when test="./notes != ''">
<xsl:text> Notes: </xsl:text> <xsl:value-of select="./notes"/> <br/>
</xsl:when>
</xsl:choose>
<xsl:choose>
<xsl:when test="./description != ''">
<xsl:text> Desc: </xsl:text> <xsl:value-of select="./description"/> <br/>
</xsl:when>
</xsl:choose>
<xsl:text> Cat: </xsl:text> <xsl:value-of select="./cat"/> <br/>
</td>
</tr>
</xsl:for-each>
</xsl:template>
<!-- do nothing for unmatched text or attribute nodes -->
<xsl:template match="text()|@*"/>
</xsl:stylesheet>
Three lines are particularly interesting for changes: line 90 (<th width="15%">Deutsch</th>), where I create a table row header for the second language; line 104 (var options= ...), where I tell list.js which columns it should process; and line 116 (<td class="namede" width="15%"><xsl:value-of select="./namede"/></td>), where the iterating XSL transformation will fill the table's second language column with data. Change/delete these to allow for another second language or to get by without.
So... what do you think?