Tablesorter demo
All options included, as well as the uitheme widget
by Mottie
HTML
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<div id="wrap">
<h1>Tablesorter using sort array code from <a href="http://sugarjs.com/arrays#sorting">sugar.js</a></h1>
<p>Modified to sort the Icelandic alphabet
(<a href="https://github.com/Mottie/tablesorter/issues/212">issue #212</a>)
</p>
<table class="tablesorter">
<thead>
<tr>
<th>Sort Me</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>a</td>
</tr>
<tr>
<td>Á</td>
</tr>
<tr>
<td>á</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>d</td>
</tr>
<tr>
<td>Ð</td>
</tr>
<tr>
<td>ð</td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td>e</td>
</tr>
<tr>
<td>É</td>
</tr>
<tr>
<td>é</td>
</tr>
<tr>
<td>Ę</td>
</tr>
<tr>
<td>ę</td>
</tr>
<tr>
<td>F</td>
</tr>
<tr>
<td>f</td>
</tr>
<tr>
<td>G</td>
</tr>
<tr>
<td>g</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>h</td>
</tr>
<tr>
<td>I</td>
</tr>
<tr>
<td>i</td>
</tr>
<tr>
<td>Í</td>
</tr>
<tr>
<td>í</td>
</tr>
<tr>
<td>J</td>
</tr>
<tr>
<td>j</td>
</tr>
<tr>
<td>K</td>
</tr>
<tr>
<td>k</td>
</tr>
<tr>
...
CSS
#wrap {
width: 450px;
margin: 0 auto;
text-align: center;
}
table.tablesorter {
float: left;
width: 200px;
margin-left: 10px;
}
td, th {
text-align: center;
}
JavaScript
$(function () {
// sortBy functions & helpers extracted from sugar.js
// http://sugarjs.com/arrays#sorting
var array = {
AlphanumericSortIgnoreCase: true,
AlphanumericSortEquivalents: {}
},
sortBy = function (a, b) {
return typeof a === "string" && typeof b === "string" ? collateStrings(a, b) : a < b ? -1 : a > b ? 1 : 0;
},
// Alphanumeric collation helpers
collateStrings = function (a, b) {
var aValue, bValue, aChar, bChar, aEquiv, bEquiv, index = 0,
tiebreaker = 0;
a = getCollationReadyString(a);
b = getCollationReadyString(b);
do {
aChar = getCollationCharacter(a, index);
bChar = getCollationCharacter(b, index);
aValue = getCollationValue(aChar);
bValue = getCollationValue(bChar);
if (aValue === -1 || bValue === -1) {
aValue = a.charCodeAt(index) || null;
bValue = b.charCodeAt(index) || null;
}
aEquiv = aChar !== a.charAt(index);
bEquiv = bChar !== b.charAt(index);
if (aEquiv !== bEquiv && tiebreaker === 0) {
tiebreaker = aEquiv - bEquiv;
}
index += 1;
} while (aValue != null && bValue != null && aValue === bValue);
if (aValue === bValue) return tiebreaker;
return aValue < bValue ? -1 : 1;
},
getCollationReadyString = function (str) {
if (array.AlphanumericSortIgnoreCase) {
str = str.toLowerCase();
}
return str.replace(array.AlphanumericSortIgnore, '');
},
getCollationCharacter = function (str, index) {
var chr = str.charAt(index),
eq = array.AlphanumericSortEquivalents || {};
return eq[chr] || chr;
},
getCollationValue = function (chr) {
var order = array.AlphanumericSortOrder;
return chr ? order.indexOf(chr) : null;
},
// order = 'AÁÀÂÃĄBCĆČÇDĎÐEÉÈĚÊËĘFGĞHıIÍÌİÎÏJKLŁMNŃŇÑOÓÒÔPQRŘSŚŠŞTŤUÚÙŮÛÜVWXYÝZŹŻŽÞÆŒØÕÅÄÖ',
// equiv = 'AÁÀÂÃ,CÇ,EÉÈÊË,IÍÌİÎÏ,OÓÒÔ,Sß,UÚÙÛÜ',
// modified order to match...