Jquery Table Sort using digits
HTML
<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<table id="dataTable" class="tablesorter">
<thead>
<tr>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="badge">ABC-DE-1</span>
</td>
</tr>
<tr>
<td>
<span class="badge">ABC-DE-10</span>
</td></tr>
<tr>
<td>
<span class="badge">ABC-DE-1000</span>
</td>
</tr>
<tr>
<td>
<span class="badge">ABC-DE-100</span>
</td>
</tr>
</tbody>
</table>
CSS
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(http://tablesorter.com/themes/blue/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(http://tablesorter.com/themes/blue/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(http://tablesorter.com/themes/blue/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
.hide { display: none }
JavaScript
$.tablesorter.addParser({
id: "customParser",
is: function (stringValue) {
return false;
},
format: function (stringValue) {
var stringValueParts = stringValue.split("-");
var numericPartOfStringValue = parseInt(stringValueParts[2],10);
console.log(numericPartOfStringValue);
return numericPartOfStringValue ;
},
type: 'numeric'
});
$("#dataTable").tablesorter({
headers: {
0: {
sorter: 'customParser'
}
}
});