CODEWITHSUNDEEP
javascriptjquerydatatable
mrrsb
mrrsb

Reputation: 681

jquery datatable disable sort in specific row

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.

Upvotes: 14

Views: 30222

Answers (12)

Weuller Krysthian
Weuller Krysthian

Reputation: 11

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);
    }
}

Upvotes: 0

Nancy
Nancy

Reputation: 188

Without using class, you can follow these steps:

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

Upvotes: 0

Francisco
Francisco

Reputation: 4101

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.

Upvotes: 2

Sasha Farajallah
Sasha Farajallah

Reputation: 26

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");
        }     
    });  
}

Upvotes: 0

Farab Alipanah
Farab Alipanah

Reputation: 401

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']
        ],

Upvotes: 4

Alborz
Alborz

Reputation: 2043

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

That should do it..;)

Upvotes: 3

Can &#220;rek
Can &#220;rek

Reputation: 661

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

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

Upvotes: 2

elango
elango

Reputation: 143

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

Upvotes: 2

Paulo Fidalgo
Paulo Fidalgo

Reputation: 22331

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

Upvotes: 11

denis.peplin
denis.peplin

Reputation: 9861

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

Upvotes: 0

Suranart Niamcome
Suranart Niamcome

Reputation: 78

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

Upvotes: 0

truly bs
truly bs

Reputation: 23

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.

Upvotes: 0

Related Questions