DataTable - Custom Data source sorting [working]
HTML
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
<body>
<table id="example">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>1234321</span>%
</td>
<td>123</td>%
</tr>
<tr>
<td>
<span>123</span>%
</td>
<td>124</td>
</tr>
<tr>
<td>
<span>1321</span>%
</td>
<td>1234</td>
</tr>
<tr>
<td>
<span>123</span>%
</td>
<td>234</td>
</tr>
</tbody>
</table>
</body>
JavaScript
$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {
var aData = [];
// Before
// $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
// aData.push(this.value);
// });
// Now
oSettings.oApi._fnGetTrNodes(oSettings).forEach(function (nRow) {
var oElem = $('td:eq(' + iColumn + ') span', nRow);
aData.push(oElem.text());
});
return aData;
};
var staticTestTable = $('#example').dataTable({
aoColumns: [{
sSortDataType: 'dom-text',
sType: 'numeric'
},
null]
});