Reputation: 10247
I want to be able to take an HTML table, such as the one here:
<table border="1">
<tbody>
<thead>
<tr>
<th></th>
<th><a href="http://translate.com" target="_blank">translate.com & https://translate.google.com</a></th>
<th><a href="http://www.bing.com/translator/" target="_blank">Bing Translator</a></th>
<th></th>
</tr>
</thead>
<tr>
<td>I eat tacos</td>
<td>Yo como tacos</td>
<td>Comer tacos</td>
</tr>
<tr>
<td>I will eat a taco</td>
<td>Voy a comer un taco</td>
<td>Me voy a comer un taco</td>
</tr>
<tr>
<td>I will eat tacos</td>
<td>Voy a comer tacos</td>
<td>Me voy a comer tacos</td>
</tr>
<tr>
<td>I would eat a taco</td>
<td>Me volvería a comer un taco</td>
<td>Comer un taco</td>
</tr>
<tr>
<td>I would eat tacos</td>
<td>Me volvería a comer tacos</td>
<td>Comer tacos</td>
</tr>
<tr>
<td>I am eating a taco</td>
<td>Me estoy comiendo un taco</td>
<td>Estoy comiendo un taco</td>
</tr>
<tr>
<td>I am eating tacos</td>
<td>Estoy comiendo tacos</td>
<td>Voy a comer tacos</td>
</tr>
. . .
<tr>
<td>They were eating tacos</td>
<td>Estaban comiendo tacos</td>
<td>Estaban comiendo tacos</td>
</tr>
</tbody>
</table>
(or any HTML table) and allow it to be sorted when a column is clicked.
Either a jQuery or a CSS solution is okay.
Upvotes: 1
Views: 6018
Reputation: 4149
jQuery Table Sorter (http://tablesorter.com/docs/) will work. There are many different jQuery plugins to handle this. If jQuery isn't already being used, there are pure Javascript options as well.
33 Javascript Solutions to table sorting (http://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/).
CSS cannot sort data; Javascript will have to be used.
Upvotes: 2