Angular datatables: sort non-textual data - angular-datatables

Question

Is there a way to create custom sorting for a column containing non-textual data?
Here is a snapshot:
I would like to sort by the icon symbol.
P.S. The both icons are shown using ng-if and a boolean value from the dataset.
Edit: I'am using the Angular way of displaying data.
<table datatable="ng" dt-options="dtOptionsLoginHistory" dt-column-defs="dtColumnDefsLoginHistory"
class="table table-striped row-border hover"
width="100%">
<thead>
<tr>
<th>Success</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entry in entries">
<td style="width: 10%;">
<i ng-if="!entry.failed" class="fa fa-check" style="color: green;"></i>
<i ng-if="entry.failed" class="fa fa-times" style="color: red;"></i>
</td>
</tr>
</tbody>
</table>

Answer 1

There is several different ways to achieve what you want. Considered your setup I believe the easiest would be to create a special orderType that return a value based on which fa-* classes the <i> elements is rendered with :
$.fn.dataTable.ext.order['fa-classes'] = function(settings, col) {
return this.api().column( col, {order:'index'} ).nodes().map(function(td, i) {
return $('i', td).hasClass('fa-check') ? '1' : '0';
})
}
Will give all <i class="fa fa-check"> order 1, any other 0. This could also be a switch { .. } returning multiple different order values. Use it like this :
$scope.dtColumnDefsLoginHistory = [
DTColumnDefBuilder.newColumnDef(0).withOption('orderDataType', 'fa-classes')
];
small demo -> http://plnkr.co/edit/8S5f2MR331CiNBYYfDQf?p=preview

Answer 2

Add an orderBy filter:
<tr ng-repeat="entry in entries orderBy : 'failed' ">
<td style="width: 10%;">
<i ng-if="!entry.failed" class="fa fa-check" style="color: green;"></i>
<i ng-if="entry.failed" class="fa fa-times" style="color: red;"></i>
</td>
</tr>