In Angular JS how to disable column sort feature for selected columns

Question

In jquery data table I can disable specific column sort by

"aoColumnDefs": [{
                'bSortable': false,
                'aTargets': [0, 7]
            }]

Anyone know how to do this in angular JS?

<table class="custom-table" datatable="ng" dt-options="dtOptions" id="contacts-list-table">
</table>

myApp.controller("ListCtr", ['DTOptionsBuilder', function(DTOptionsBuilder) {
  $scope.dtOptions = DTOptionsBuilder.newOptions().withDOM('C<"clear">lfrtip') 
}])

this code hiding my search bar but not able to hide sort feature of my first and fourth column?

Baseboard

You want your tr elements to be not clickable? Can you post the tr code as well? It would be helpful if you paste the full table code. – Gumption

One of the ways is you can use ng-click = "$event.stopPropogation();" for that div/tr element and manipulate it in js.... would give you a more specific answer if you give more details on how you implemented the table – Unreasoning

can you provide a fiddle or plunker or post your code for table – Thomson

Answer 1

The angular-datatables equivalence to

aoColumnDefs: [{ bSortable: false, aTargets: [0, 4] }]

is

$scope.dtColumnDefs = [
   DTColumnDefBuilder.newColumnDef(0).notSortable(),
   DTColumnDefBuilder.newColumnDef(4).notSortable()
];

...

<table class="custom-table" dt-column-defs="dtColumnDefs" datatable="ng" dt-options="dtOptions" id="contacts-list-table"></table>

You must include DTColumnDefBuilder in the controller :

myApp.controller("ListCtr", ['DTOptionsBuilder', 'DTColumnDefBuilder',
    function(DTOptionsBuilder, DTColumnDefBuilder) {
       $scope.dtOptions = DTOptionsBuilder.newOptions().withDOM('C<"clear">lfrtip');
       $scope.dtColumnDefs = [
          DTColumnDefBuilder.newColumnDef(0).notSortable(),
          DTColumnDefBuilder.newColumnDef(4).notSortable()
       ];
    }
])

see http://l-lin.github.io/angular-datatables/archives/#!/api.

Admetus

do you know how to set "aLengthMenu": [[5, 10, 15, 20, -1],[5, 10, 15, 20, "All"]] in angular data table – Baseboard

@vinothini, great you got it to work (apparently?) - regarding aLengthMenu there is no "translated" name / method, but then you should use .withOption('aLengthMenu', [[5, 10, 15, 20, -1],[5, 10, 15, 20, "All"]]) in your case $scope.dtOptions = DTOptionsBuilder.newOptions().withDOM('C<"clear">lfrtip').withOption('aLengthMenu', [[5, 10, 15, 20, -1],[5, 10, 15, 20, "All"]]); ....withOption() simply add this[key] = value to the options literal. – Admetus

@Admetus i am exacty suffering with the same issue.can you provide any help ?here is the link to my question #44502320 – Previse

Answer 2

I have tried every possible solution to disable sorting but the only thing that worked for me was : order: false . Use this for reference

My dtOptions were as below

vm.dtOptions = {
        dom: '<"top"f>rt<"bottom"<"left"<"length"l>><"right"<"info"i><"pagination"p>>>',
        pagingType: 'simple',
        autoWidth: false,
        responsive: true,
        order: false, // This fixed the issue
        columnDefs : [{
            targets: [0, 1, 2, 3, 4, 5, 6, 7], // column or columns numbers
            orderable: false,  // This was not working
            filterable: false,
            sortable  : false                
            },
            {
                // Target the actions column
                targets           : 8,
                responsivePriority: 1,
                filterable        : false,
                sortable          : false,
                orderable: false
            }                
        ]
    }

Tyishatyke