Angular 使用 ng-repeat 的数据表 - 如何将列设置为不可排序

Question

我正在以 angular 方式呈现我的 DataTable - 请参阅下面的示例 table。

<table id="tblSamples" datatable="ng" dt-options="mainCtrl.dtOptions" dt-instance="mainCtrl.dtInstance" class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Number</th>
            <th>Source</th>
            <th>Type</th>
            <th>SubCat</th>
            <th>Product</th>
            <th>Applied Amount</th>
            <th>Sample Amount</th>
            <th><input type="checkbox" ng-model="mainCtrl.selectAll" ng-click="mainCtrl.toggleAll(mainCtrl.selectAll, mainCtrl.Samples)"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="sampleItem in mainCtrl.Samples">
            <td ng-if="sampleItem.TTTId != null"><a title="View {{sampleItem.TTT.Number}}" href="/TTT/Details/{{sampleItem.TTTId}}"><u>{{sampleItem.TTT.Number}}</u></a></td>
            <td ng-if="sampleItem.PPPId != null"><a title="View {{sampleItem.PPP.Number}}" href="/PPP/Details/{{sampleItem.PPPId}}"><u>{{sampleItem.PPP.Number}}</u></a></td>
            <td ng-if="sampleItem.MMMId != null"><a title="View {{sampleItem.MMM.Number}}" href="/MMM/Details/{{sampleItem.MMMId}}"><u> {{sampleItem.MMM.Number}}</u></a></td>
            <td ng-if="sampleItem.LLLId != null"><a title="View {{sampleItem.LLL.Number}}" href="/LLL/Details/{{sampleItem.LLLId}}"><u>{{sampleItem.LLL.Number}}</u></a></td>
            <td>{{sampleItem.Type.Source.Name}}</td>
            <td>{{sampleItem.Type.Name}}</td>
            <td ng-if="sampleItem.SubCatId != null">{{sampleItem.SubCat.Name}}</td>
            <td ng-if="sampleItem.SubCatId == null"></td>
            <td ng-if="sampleItem.ProductId != null">{{sampleItem.Product.Name}}</td>
            <td ng-if="sampleItem.ProductId == null"></td>
            <td>{{sampleItem.Amount}}</td>
            <td ng-disabled="sampleItem.ForAdd != true"><input type="number" id="SampleAmount" name="SampleAmount" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="sampleItem.SampleAmount" min="0" required /></td>
            <td><input type="checkbox" ng-model="sampleItem.ForAdd" ng-click="mainCtrl.toggleOne(mainCtrl.Samples)"></td>
        </tr>
    </tbody>
</table>

当我在 angular 控制器

中定义列时，如何将列设置为 not sortable 就像下面的代码一样

DTColumnBuilder
  .newColumn(null)
  .withTitle('Actions')
  .notSortable()
  .renderWith(actionsHtml)

Answer 1

看看http://l-lin.github.io/angular-datatables/archives/#!/angularWayWithOptions

而不是 columns 部分包含 columnDefs 索引 targets：

<table id="tblSamples" datatable="ng" dt-column-defs="dtColumnDefs" ....>

$scope.dtColumnDefs = [       
   DTColumnDefBuilder.newColumnDef(1).notSortable()
]

索引从零开始，因此第二列将不可排序。我通常避免使用 "builders" 而只使用

$scope.dtColumnDefs = [{
  targets: 1,
  orderable: false
}]

如果您禁用第一列的排序，您仍然会看到一个排序箭头，因为默认顺序是 [[0, 'asc']]。您可以通过

在 dtOptions 中防止这种情况

.withOption('order', [])

Angular 使用 ng-repeat 的数据表 - 如何将列设置为不可排序

Angular Datatables using ng-repeat - how to set a column as not Sortable

datatables

angularjs

angular-datatables