DataTable - Custom Data source sorting
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>
<input type="text" value="abc" />
</td>
<td><select size="1" id="row-1-office" name="row-1-office">
<option value="Edinburgh" selected="selected">
Edinburgh
</option>
<option value="London">
London
</option>
<option value="New York">
New York
</option>
<option value="San Francisco">
San Francisco
</option>
<option value="Tokyo">
Tokyo
</option>
</select></td>
</tr>
<tr>
<td>
<input type="text" value="abv" />
</td>
<td><select size="1" id="row-1-office" name="row-1-office">
<option value="Edinburgh">
Edinburgh
</option>
<option value="London" selected="selected">
London
</option>
<option value="New York">
New York
</option>
<option value="San Francisco">
San Francisco
</option>
<option value="Tokyo">
Tokyo
</option>
</select></td>
</tr>
<tr>
...
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.afnSortData['dom-select'] = function (oSettings, iColumn) {
var aData = [];
$('select', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
aData.push(this.value);
});
return aData;
};
/*$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val();
} );
}
*/
var table = $('#example').dataTable({
aoColumns: [
{
sSortDataType: 'dom-text' // specifying this does not matters
},
{
sSortDataType: 'dom-select'
}]
});