Disable sorting of one column

Disable sorting of one column

mcranemcrane Posts: 10Questions: 4Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • mcranemcrane Posts: 10Questions: 4Answers: 0

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

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    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

  • mcranemcrane Posts: 10Questions: 4Answers: 0

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

  • jrichviewjrichview Posts: 36Questions: 7Answers: 0

    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.

  • anaganag Posts: 48Questions: 2Answers: 7

    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

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    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

  • brndnfrmnbrndnfrmn Posts: 1Questions: 0Answers: 0
    edited October 2014

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

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

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

  • miclebowskimiclebowski Posts: 4Questions: 0Answers: 0

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

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    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

  • prem2prem2 Posts: 17Questions: 3Answers: 1
    edited March 2015

    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

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    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

  • prem2prem2 Posts: 17Questions: 3Answers: 1

    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

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

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

    Allan

  • prem2prem2 Posts: 17Questions: 3Answers: 1
    Answer ✓

    Thanks allen,

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

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

    Thanks,
    Prem

This discussion has been closed.