current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 2 down vote favorite

Is there a way to create custom sorting for a column containing non-textual data?

Here is a snapshot:

enter image description here

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>
share|improve this question
    
please show exactly how you render the table. – davidkonrad Jun 18 at 5:52
1  
@davidkonrad I updated my question. – Sirion Jun 18 at 12:44
    
@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/… – Sirion Jun 25 at 20:14
up vote 1 down vote accepted

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

share|improve this answer
    
Thanks a lot, your solution works like a charm. – Sirion Jun 18 at 13:51
    
@Sirion - you are welcome! Thank You for accepting the answer. – davidkonrad Jun 18 at 16:03
up vote 0 down vote

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>
share|improve this answer
    
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. – davidkonrad Jun 18 at 13:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.