Angular datatables: sort non-textual data

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>

@davidkonrad Would you be so kind and look at my another datatables question, since you probably know this library very well? Here is the link: stackoverflow.com/questions/38032004/… — N.Zukowski
– N.Zukowski, Commented Jun 25, 2016 at 20:14

davidkonrad · Accepted Answer · 2016-06-18 13:42:14Z

2

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

answered Jun 18, 2016 at 13:42

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike · Accepted Answer · 2016-06-18 13:29:52Z

0

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>

answered Jun 18, 2016 at 13:29

Mike

1,6573 gold badges14 silver badges21 bronze badges

1 Comment

davidkonrad Over a year ago

orderBy along with dataTables is not a good idea. At best you will end up in rows visually rendered different than the underlying internal row structure. It would be the correct answer on a DOM table without dataTables.

Collectives™ on Stack Overflow

Angular datatables: sort non-textual data

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related