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

Question

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)

davidkonrad · Accepted Answer · 2018-08-06 08:41:58Z

1

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', [])

answered Aug 6, 2018 at 8:41

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

davidkonrad Over a year ago

@klent No reason other than it is more readable. ADT's "builders" is just wrappers for DataTables object literals. In fact, ADT "translates" notSortable() to bSortable: false which goes back to the old 1.9.x hungarian notation. DT still support 1.9.x option names, but if you use DT a lot it can be confusing.

Len Over a year ago

thanks! for the second solution, how do I define multiple targets?

davidkonrad Over a year ago

@klent, see datatables.net/reference/option/columnDefs.targets for example targets: [0,3,5,11] or targets: '_all' or targets: -1 for the very last column.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related