DataTable - Custom Data source sorting (method 2)
by ipark
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>
<script src="http://cdn.datatables.net/tabletools/2.2.1/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="cdn.datatables.net/tabletools/2.2.1/css/dataTables.tableTools.css">
<body>
<table id="example">
<thead>
<tr>
<th>
header 1
</th>
<th>
header 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" value="123"/>
</td>
<td>
123
</td>
</tr>
<tr>
<td>
<input type="text" value="124"/>
</td>
<td>
124
</td>
</tr>
<tr>
<td>
<input type="text" value="1234"/>
</td>
<td>
1234
</td>
</tr>
<tr>
<td>
<input type="text" value="234"/>
</td>
<td>
234
</td>
</tr>
</tbody>
</table>
</body>
JavaScript
$.fn.dataTableExt.afnSortData['dom-text'] = function(oSettings, iColumn) {
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push(this.value);
} );
return aData;
};
$.fn.dataTableExt.oSort['custom-numeric-asc'] = function(x,y) {
console.log('asc, ' + x + " vs " + y + " = " + ((x-y < 0)? true:false));
return x-y;
};
$.fn.dataTableExt.oSort['custom-numeric-desc'] = function(x,y) {
console.log('desc, ' + x + " vs " + y + " = " + ((y-x < 0)? true:false));
return y-x;
};
var staticTestTable = $('#example').dataTable({
aoColumns: [
{ sSortDataType: 'dom-text', sType: 'custom-numeric' },
{ sType: 'custom-numeric' }
]
});
var tableTools = new $.fn.dataTable.TableTools( staticTestTable, {
"buttons": [
"copy",
"csv",
"xls",
"pdf",
{ "type": "print", "buttonText": "Print me!" }
]
} );