Disable sorting of one column

mcrane

I am using dataTables 1.10 in server-side mode with Scroller. I tried to disable sorting in my first column by setting "orderable" to false in my column definitions:

$(document).ready(function() {
$('#example').dataTable( {
serverSide: true,
searching: false,
ajax: {
url: "myajax.php"
},
dom: "rtiS",
"columns": [
{"name": "first", "orderable": "false"},
{"name": "second", "orderable": "true"},
{"name": "third", "orderable": "true"},
{"name": "fourth", "orderable": "true"}
]
"order": [[1, 'asc']],
deferRender: true,
scrollY: 800,
scrollCollapse: true
} );
});

However, the column still appears to be sortable and the up- and down- arrows still appear on the right side of the table. What am I missing?

mcrane

Update: I also tried setting the "columnsDefs" parameter, but it won't work on the first column (column 0). It will work on other columns (1,2,3, etc.).

"columnDefs": [ {
"targets": 0,
"orderable": false
} ]

allan

The columns.orderable parameter is used to signify that the user should not be able to order the column. However, you as the developer case still do so using the order() method - and as a result of this the order option (the default order) is still being applied. If you don't want an initial sort, set order to be an empty array.

Allan

mcrane

I found my mistake: I had put "false" in double quotes. When I removed the quotes, it worked. Thanks!

jrichview

I'm having pretty much identical problem, but my columnDefs looks correct.

Definition object for first column:
{ "targets": [0], "searchable": false, "orderable": false, "visible": true }

However, when the grid is first rendered it is rendered as if sorted on first column. Sort uparrow image shows up. Click any other column and that image vanishes until you reload the page. So it appears the error is only on initial render.

anag

I had the same problem with the following code, I wanted my first column to not have sorting available.

This code alone did not remove sorting from the first column. It only removed it after any other column was sorted which was strange.

columnDefs: [ { orderable: false, targets: [0] }, { visible: false, targets: [5,12,13] } ],

I found that adding order: [[ 2, 'asc' ]], worked. But this seems strange because if I set my target to 1 or 2 sorting was removed by default without having to use order

allan

The columns.orderable option simply allows or disallows the user from sorting that column. It does not stop you, the developer, from sorting that column using the API. Since the default (order) is to apply sorting to the first column, you need to also change that - as you have done.

Allan

brndnfrmn

.no-sort::after { display: none!important; }

.no-sort { pointer-events: none!important; cursor: default!important; }

<th class="no-sort">Heading</th>

miclebowski

Thanks @brndnfrmn that did the trick for me :-)

But honestly a great addition to this wonderful plugin would be to be able to select a class to sort / to not sort columns because that seems a pretty common use case ;-)

allan

But honestly a great addition to this wonderful plugin would be to be able to select a class to sort / to not sort columns

I might be missing something, but with columnDefs that is quite possible:

columnDefs: [
  { targets: 'no-sort', orderable: false }
]

Allan

prem2

Hello team,

I too facing the same problem in the Datatable. I tried so many scenario. But, there is no luck. Kindly, provide your suggestion to solve this issue.

I cannot able to disable to disable the orderable icon in the index-0. Here, is the live example.

http://testtable.agilecentre.com/arrow

When i click the arrow icons on another columns then first coulmn[0] icon gets disappeared.

Coding :

HTML

    <table class="table table-bordered" id="example" >
        <thead>
        <tr id="tbl_header1">
            <th  class="no-sort" name="prop_ref_no" style="min-width:80px">PropRef</th>
            <th  class="no-sort" name="title" style="min-width:80px">title</th>
            <th  name="publish_status" style="min-width:80px">Publish status</th>
            <th  name="Bedrooms" style="min-width:200px">Bedrooms</th>
        </tr>
        </thead>
    </table>

JS

$('#example').dataTable( {
        "columnDefs": [ {
          "targets": 'no-sort',
          "orderable": false,
    } ]
} );

Kindly, provide your solution.

Thanks,
Prem

allan

The default sort is applied as [[ 0, 'asc' ]] (from the order parameter). IF you don't want that, use order: [] to not have a default sort.

This is because columns.orderable controls the users ability to change the sorting for the column - not the API's ability.

Allan

prem2

Hi allan,

Thanks for your response. Even though we are disable the order. Still the arrow icon does not disabled. But, when you click another columns it automatically disabled.

    $('#example').dataTable( {
        "columnDefs": [ {
          "targets"  : 'no-sort',
          "orderable": false,
          "order": []
        }]
    });

I have updated the code in live. Please, check it out.

http://testtable.agilecentre.com/arrow

Whether i need to do some other settings to disable the arrow icons. ??

Thanks,
Prem

allan

order is a top level configuration object, as per its documentation. It should not be nested in columnDefs.

Allan

prem2

Thanks allen,

Solved the issue as per your guidelines. Thanks a lot.

    $('#example').dataTable( {
        "order": [],
        "columnDefs": [ {
          "targets"  : 'no-sort',
          "orderable": false,
        }]
    });

Thanks,
Prem