How to enable sorting only for one column in JQUER

Question

Im trying to enable sorting based on one column only in a datatable. but its not working. This is the way I tried

var myTable = $("#tbl_main").dataTable({
    "dom": "<'tableinfobar'i><'tablesearchbox'f><'tablestarfilter'><'tablebody't>S<'tablelength'l><'tablepaging'p>",
    "ordering": false,
    "columnDefs": [{"targets": [0, 6],"searchable": false}, {"targets":2, "type":"html-num","orderable":true}],
    "lengthMenu": [
        [10, 20, 50, 100, 500, -1],
        [10, 20, 50, 100, 500, "All"]
    ]
}).show();

Here I need to enable sorting only for second column only and tried that in columnDefs

Answer 1

For me the Accepted answer did not work

because in my table all <th> has same class and i can't add another class to <th> and also can not remove default class of <th>,

My table's structure is as below:

       <table id="example" class="mt-table" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th class="mt-head">Name</th>
                    <th class="mt-head">Position</th>
                    <th class="mt-head">Office</th>
                    <th class="mt-head">Age</th>
                    <th class="mt-head">Start date</th>
                    <th class="mt-head">Salary</th>
                </tr>
            </thead>
            <tbody>
             <tr>
               <td>Hari</td>
               <td>Senior Engineer</td>
               <td>Ahmedabad</td>
               <td>20</td>
               <td>11/02/2019</td>
               <td>50,000</td>
             </tr>
            </tbody>
         </table>

Now i also want to enable sort option for Position column only.

what i have done is as below:

In my <script>

$(document).ready(function() {
  $('#example').DataTable({

    "ordering": true,
    columnDefs: [
    {
        "orderable": true,
        "targets": 1,
    },
    {
      orderable: false,
      targets: "mt-head"
    }]

  });
});

Now only Position column will be orderable and all others will be not.

So the rule is to put the column first of all which you want to sort in columnDefs as above example after it you can put class selector to disable sorting on all other columns.

Answer 2

add class no-sort to all the <th> except the column which you want to sort.. kindly check https://jsfiddle.net/24zztcL9/

I have enabled sort only for 2nd column "Position"

HTML

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th class="no-sort">Name</th>
                <th>Position</th>
                <th class="no-sort">Office</th>
                <th class="no-sort">Age</th>
                <th class="no-sort">Start date</th>
                <th class="no-sort">Salary</th>
            </tr>
        </thead>
     </table>

jQuery

$(document).ready(function() {
  $('#example').DataTable({

    "ordering": true,
    columnDefs: [{
      orderable: false,
      targets: "no-sort"
    }]

  });
});

Answer 3

Rather than using columnDefs I prefer using columns like this:

$(document).ready(function() {
    $('#example').DataTable({
        "columns":[
            {
                "sortable": false
            },
            {
                "sortable": true
            },
            {
                "sortable": false
            },
            {
                "sortable": false
            },
            {
                "sortable": false
            },
            {
                "sortable": false
            }
        ]
    });
});

Working JSFiddle

Either approach works, I just prefer the granular control of the columns array.