CODEWITHSUNDEEP
angularjsdatatablesangular-datatables
Len
Len

Reputation: 554

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

I am rendering my DataTable the angular way - see sample table below.

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

How do I set a column as not sortable just like the code below when I define the columns in the angular controller

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

Upvotes: 1

Views: 848

Answers (1)

davidkonrad
davidkonrad

Reputation: 85518

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

Instead of a columns section include a columnDefs with indexed targets: 

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

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

Indexes are zero based, so the second column will not be sortable. I normally avoid the "builders" and just use 

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

If you disable ordering for the first column you will still see a sorting arrow, because the default order is [[0, 'asc']]. You can prevent this in dtOptions by

.withOption('order', [])

Upvotes: 1

Related Questions