Données angulaires: trier les données non textuelles

Question

Existe-t-il un moyen de créer un tri personnalisé pour une colonne contenant des données non textuelles?

Voici un aperçu:

je voudrais trier par l'icône symbole.

P.S. Les deux icônes sont affichées en utilisant ng-if et une valeur booléenne de l'ensemble de données.

Éditer: J'utilise la méthode angulaire d'affichage des données.

<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

Il y a plusieurs façons de réaliser ce que vous voulez. Considéré comme votre configuration Je crois que le plus simple serait de créer un orderType spécial qui retourne une valeur basée sur les classes qui fa-* les <i> éléments est rendu avec:

$.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'; 
    }) 
} 

donnera tout <i class="fa fa-check"> ordre 1, tout autre 0. Cela peut également être un switch { .. } renvoyant plusieurs valeurs de commande différentes. Utilisez comme ceci:

$scope.dtColumnDefsLoginHistory = [ 
    DTColumnDefBuilder.newColumnDef(0).withOption('orderDataType', 'fa-classes') 
]; 

petite démo ->http://plnkr.co/edit/8S5f2MR331CiNBYYfDQf?p=preview

Answer 2

Ajouter un filtre orderBy:

<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>