jquery datatable disable sort in specific row

Question

How to disable sorting in specific row/column in jquery datatable using a class?

here's my sample table;

    <table>
    <thead>
    <tr>
    <th class="sorting_disabled">Title1</th>
    <th class="">Title2</th>
    <th class="sorting_disabled">Title3</th>
    </tr>
    </thead>
    <tbody>
    <tr><td>Tag 1</td><td>Date 1</td><td>Date 2</td></tr>
    <tr><td>Tag 2</td><td>Date 2</td><td>Date 2</td></tr>
    <tr><td>Tag 3</td><td>Date 3</td><td>Date 3</td></tr>
    <tr><td>Tag 4</td><td>Date 4</td><td>Date 4</td></tr>
    <tr><td>Tag 5</td><td>Date 5</td><td>Date 5</td></tr>
....
    </tbody>
    </table>

script;

$('.sortable thead tr th.sorting_disabled').livequery(function() {
       $(this).removeClass('sorting');
       $(this).unbind('click');
    });

above code works but if I click to the next column who has a sorting its shows again an arrow. though its not clickable ;(

How can I disable the sorting by using a class and not using/redraw a table.

You can set bSortable to false for those columns, in aoColumns def. Check this example, sorting is disabled on first and second column live.datatables.net/awizop/edit#preview — Prasenjit Kumar Nag
– Prasenjit Kumar Nag, Commented Jun 13, 2012 at 9:18
I know Sir, but the given code always set in the first column though we can set it by its script. below answer may used as a dynamic code for a class who has a 'sorting_disabled'. — mrrsb
– mrrsb, Commented Jun 13, 2012 at 9:24

Paulo Fidalgo · Accepted Answer · 2013-06-17 22:20:03Z

11

You can disable the sorting using a class in definition. Just add this code to the datatable initialization:

// Disable sorting on the sorting_disabled class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "sorting_disabled" ]
} ]

answered Jun 17, 2013 at 22:20

Paulo Fidalgo

22.4k7 gold badges105 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Farab Alipanah · Accepted Answer · 2016-06-23 22:15:51Z

4

The only solution: First add class="sorting_disabled" to any<th> that you want to disable sorting, then add this code to the datatable initialization:

        // Disable sorting on the sorting_disabled class
        "aoColumnDefs" : [ {
            "bSortable" : false,
            "aTargets" : [ "sorting_disabled" ]
        } ],
        "order": [
            [1, 'asc']
        ],

answered Jun 23, 2016 at 22:15

Farab Alipanah

4015 silver badges3 bronze badges

1 Comment

JLChafardet Over a year ago

This is the cleanest solution for jq dataTables to disable sorting any specific target

Ilia Ross · Accepted Answer · 2016-05-06 18:18:56Z

3

$('#example').dataTable( {
  "aoColumnDefs": [
      { 'bSortable': false, 'aTargets': [ 1 ] }
   ]});

That should do it..;)

edited May 6, 2016 at 18:18

Ilia Ross

13.5k11 gold badges56 silver badges89 bronze badges

answered Oct 17, 2012 at 9:37

Alborz

2,0432 gold badges20 silver badges17 bronze badges

Comments

elango · Accepted Answer · 2013-11-15 12:46:40Z

try the following answer .it works for me.

<table class="tablesorter" id="tmp">
<thead>
    <tr>
        <th>Area</th>
        <th>Total Visitors</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Javascript</td>
        <td>15</td>
    </tr>
    <tr>
        <td>PHP</td>
        <td>3</td>
    </tr>
    <tr>
        <td>HTML5</td>
        <td>32</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>14</td>
    </tr>
    <tr>
        <td>XML</td>
        <td>54</td>
    </tr>
</tbody>
<tfoot>
    <tr class="no-sort">
        <td><strong>Total</strong></td>
        <td><strong>118</strong></td>
    </tr>
</tfoot>

source : http://blog.adrianlawley.com/tablesorter-jquery-how-to-exclude-rows

Can Ürek · Accepted Answer · 2013-12-19 07:54:00Z

2

<th class="sorting_disabled">&nbsp;</th>

$(document).ready(function () {
    $('#yourDataTableDivID').dataTable({
        "aoColumnDefs": [
           {
               "bSortable": false,
               "aTargets": ["sorting_disabled"]
           }
        ]
    });
});

answered Dec 19, 2013 at 7:54

Can Ürek

66112 silver badges25 bronze badges

Comments

Francisco · Accepted Answer · 2019-08-14 17:16:13Z

2

As said in the Datatables documentation:

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the data-* attributes taking priority).

Example:

<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th data-orderable="false">Start date</th>
        <th>Salary</th>
    </tr>
</thead>

I strongly recommend using this approach, as it is more cleaner than others. DataTables 1.10.15 was originally released on 18th April, 2017.

answered Aug 14, 2019 at 17:16

Francisco

4,1113 gold badges26 silver badges27 bronze badges

Comments

truly bs · Accepted Answer · 2012-06-13 09:14:00Z

0

I hope below code works in your case.

        $("#dataTable").dataTable({
            "aoColumns": [{"bSortable": false}, null,{"bSortable": false}]
        });

You need to disable sorting via "bSortable" for that specific column.

answered Jun 13, 2012 at 9:14

truly bs

236 bronze badges

Comments

Suranart Niamcome · Accepted Answer · 2012-06-13 09:19:01Z

0

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            { "bSortable": false },
            null,
            { "bSortable": false }
        ]
    });
});

answered Jun 13, 2012 at 9:19

Suranart Niamcome

781 silver badge8 bronze badges

Comments

denis.peplin · Accepted Answer · 2012-12-17 10:16:00Z

0

I came with almost the same solution like in the question, but I used the "fnHeaderCallback". As far as I understood, it gets called after each header redisplay, so no more worries about 'sorting' class that appears again after clicking on column next to target column.

$('.datatable').dataTable({
  "fnHeaderCallback": function() {
    return $('th.sorting.sorting_disabled').removeClass("sorting").unbind("click");
  }
});

Additional documentation about callbacks: http://datatables.net/usage/callbacks

answered Dec 17, 2012 at 10:16

denis.peplin

9,9093 gold badges50 silver badges55 bronze badges

Comments

rink.attendant.6 · Accepted Answer · 2018-08-08 07:03:43Z

this code worked for me in react.

in row created i added fixed-row class to the row i wanted to stay fixed and not sortable and i drawcallback i hid the row then i appended it to the table itself.

Hope this works for you:

$(this.refs.main).DataTable({
        dom: '<"data-table-wrapper"t>',
        data: data,
        language: {
            "emptyTable": "Loading ...",

        },
        columns,
        ordering: true,
        order: [0,'asc'],
        destory:true,
        bFilter: true,
        fixedHeader: {
            header: true
        },
        iDisplayLength: 100,
        scrollY: '79vh',
        ScrollX: '100%',
        scrollCollapse: true,
        "drawCallback": function( settings ) {
            var dataTableId = $("#To_Scroll_List").find(".dataTables_scrollBody table").attr("id");
            $("..fixed-row").css('display','none');
            $("#"+dataTableId+"_wrapper table").find('tbody tr:last').after($('.fixed-row'));
            $(".fixed-row").show();
        },
        createdRow: function (row, data, index) {
                if(data.UnitsPerLine == 999){
                    $(row).addClass('fixed-row');
                } 
        },
        initComplete: function (settings, json) {

           $("#To_Scroll_List").find(".dataTables_scrollBodytable").attr("id");
            $("#"+dataTableId+" thead tr").remove();



            });

            DatatableSearch(dataTableId+"_wrapper table", "AverageUnitsPerLineReport");
        }     
    });  
}

Draken · Accepted Answer · 2019-09-05 10:51:35Z

0

Without using class, you can follow these steps:

Remove the row which has to remain unsorted from the body of the table.
Include the row to be added in the footer of the table if it is the last row.

edited Sep 5, 2019 at 10:51

Draken

3,19614 gold badges38 silver badges56 bronze badges

answered Sep 5, 2019 at 10:20

Nancy

1881 gold badge3 silver badges12 bronze badges

Comments

Weuller Krysthian · Accepted Answer · 2020-10-15 18:25:56Z

0

I did it including the code below in drawCallback:

drawCallback: function(settings) {
    let td = $("td:contains('TOTAL')");
    if (td.length) {
        let row = td.closest('tr');
        let clonedRow = row.clone();
        row.remove();
        $('table tbody').append(clonedRow);
    }
}

answered Oct 15, 2020 at 18:25

Weuller Krysthian

112 bronze badges

Collectives™ on Stack Overflow

jquery datatable disable sort in specific row

12 Answers 12

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related