How to enable sorting for only one column in JQUERY Datatable

I am trying to enable sorting based on one column only in datatable. but it does not work. So 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 the second column and try this in columnDefs

+6
source share
4 answers

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

I enabled sorting only for the 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"
    }]

  });
});
+18
source

columnDefs columns :

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

JSFiddle

, columns.

+3

<th> , <th> <th> ,

:

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

Position.

, :

<script>

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

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

  });
});

" " , - .

Thus, the rule is to place the column that you want to sort in, columnDefsas in the example above, after it you can set the class selector to disable sorting for all other columns.

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

Try it...

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

0
source

All Articles