How to enable sorting only for one column in JQUERY Datatable

Viewed 26846

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

4 Answers

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.

$(function () {
       $("#dgUsers").prepend($("<thead></thead>").append($("#dgUsers").find("tr:first"))).DataTable({
           "aoColumnDefs": [
             { "bSortable": false, "aTargets": [ 4, 5, 6 ] }
           ] }
       );
   });

Try This...

4, 5, 6 are column numbers starting with 0.

Related