CODEWITHSUNDEEP
jquerydatatables
Sandeep Thomas
Sandeep Thomas

Reputation: 4759

How to enable sorting only for one column in JQUERY Datatable

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

Upvotes: 12

Views: 35783

Answers (4)

Ankursonikajen
Ankursonikajen

Reputation: 61

$(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.

Upvotes: 0

Haritsinh Gohil
Haritsinh Gohil

Reputation: 6282

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.

Upvotes: 2

RRR
RRR

Reputation: 1082

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

  });
});

Upvotes: 39

annoyingmouse
annoyingmouse

Reputation: 5699

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.

Upvotes: 10

Related Questions