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?

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. — Sidharth Panwar
– Sidharth Panwar, Commented Jun 24, 2015 at 13:17
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 — clearScreen
– clearScreen, Commented Jun 24, 2015 at 14:01
can you provide a fiddle or plunker or post your code for table — akashrajkn
– akashrajkn, Commented Jun 24, 2015 at 14:03

davidkonrad · Accepted Answer · 2017-04-21 10:44:39Z

19

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.

edited Apr 21, 2017 at 10:44

answered Jun 25, 2015 at 6:07

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

3 Comments

vinothini Over a year ago

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

davidkonrad Over a year ago

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

query Over a year ago

@davidkonrad i am exacty suffering with the same issue.can you provide any help ?here is the link to my question stackoverflow.com/questions/44501820/…

Black Mamba · Accepted Answer · 2017-10-16 05:25:53Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related