Angular 数据表：对非文本数据进行排序答案

【问题标题】：Angular datatables: sort non-textual dataAngular 数据表：对非文本数据进行排序
【发布时间】：2016-06-17 19:48:53
【问题描述】：

有没有办法为包含非文本数据的列创建自定义排序？

这是一个快照：

我想按图标符号排序。

附：这两个图标都使用ng-if 和数据集中的布尔值显示。

编辑：我正在使用 Angular 显示数据的方式。

<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 我更新了我的问题。
@davidkonrad 你会这么好心看看我的另一个数据表问题，因为你可能非常了解这个库吗？这是链接：stackoverflow.com/questions/38032004/…

标签： angular-datatables

【解决方案1】：

有几种不同的方法可以实现您想要的。考虑到您的设置，我相信最简单的方法是创建一个特殊的orderType，它会根据fa-* 的类来返回一个值，<i> 元素是用呈现的：

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

将给所有<i class="fa fa-check"> 订单1，任何其他0。这也可能是返回多个不同订单值的switch { .. }。像这样使用它：

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

小演示 -> http://plnkr.co/edit/8S5f2MR331CiNBYYfDQf?p=preview

【讨论】：

【解决方案2】：

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

【讨论】：

orderBy 以及 dataTables 不是一个好主意。充其量，您最终会在视觉上呈现与底层内部行结构不同的行。这将是没有 dataTables 的 DOM 表的正确答案。