Sorting jQuery.dataTables
HTML
<script src="https://datatables.net/download/build/jquery.dataTables.js"></script>
<h2>How do you sort this <a href="https://datatables.net">jQuery.dataTable</a> to produce:</h2>
<p>NA, 100, 200, 300, 1024, 2096 <b>&</b> 2096, 1024, 300, 200, 100, NA</p>
<table>
<thead>
<tr>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-internalid="-1">NA</a></td>
</tr>
<tr>
<td>1024</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>2096</td>
</tr>
</tbody>
</table>
CSS
* {
font-family: sans-serif;
}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #666;
padding: 5px 10px;
}
}
JavaScript
//Taken from Numbers with Html sorting plugin and then using a negative lookahead regex to check for negative numbers
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"num-html-pre": function ( a ) {
var x = String(a).replace(/(?!^-)[^0-9.]/g, "");
return parseFloat( x );
},
"num-html-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"num-html-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
$(document).ready(
function() {
$('table').dataTable({
"aoColumns": [{ "sType": "num-html" }],
"aaSorting": [[ 0, "desc" ]],
'bFilter': false,
'bInfo': false,
'bLengthChange': false,
'bPaginate': false
});
});