Disable sorting on last column when using jQuery DataTables

Question

I'm using jQuery DataTables in a project and I would like to know how to disable sorting for the last column. I want to implement this site-wide.

Right now I have the following code:

<!-- jQuery DataTable -->
    <script src="../assets/js/plugins/dataTables/jquery.datatables.min.js"></script>
    <script>
        /* Default class modification */
        $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );

        /* API method to get paging information */
        $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
        {
            return {
                "iStart":         oSettings._iDisplayStart,
                "iEnd":           oSettings.fnDisplayEnd(),
                "iLength":        oSettings._iDisplayLength,
                "iTotal":         oSettings.fnRecordsTotal(),
                "iFilteredTotal": oSettings.fnRecordsDisplay(),
                "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
            };
        }

        /* Bootstrap style pagination control */
        $.extend( $.fn.dataTableExt.oPagination, {
            "bootstrap": {
                "fnInit": function( oSettings, nPaging, fnDraw ) {
                    var oLang = oSettings.oLanguage.oPaginate;
                    var fnClickHandler = function ( e ) {
                        e.preventDefault();
                        if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
                            fnDraw( oSettings );
                        }
                    };

                    $(nPaging).addClass('pagination').append(
                        '<ul>'+
                            '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
                            '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
                        '</ul>'
                    );
                    var els = $('a', nPaging);
                    $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
                    $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
                },

                "fnUpdate": function ( oSettings, fnDraw ) {
                    var iListLength = 5;
                    var oPaging = oSettings.oInstance.fnPagingInfo();
                    var an = oSettings.aanFeatures.p;
                    var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

                    if ( oPaging.iTotalPages < iListLength) {
                        iStart = 1;
                        iEnd = oPaging.iTotalPages;
                    }
                    else if ( oPaging.iPage <= iHalf ) {
                        iStart = 1;
                        iEnd = iListLength;
                    } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
                        iStart = oPaging.iTotalPages - iListLength + 1;
                        iEnd = oPaging.iTotalPages;
                    } else {
                        iStart = oPaging.iPage - iHalf + 1;
                        iEnd = iStart + iListLength - 1;
                    }

                    for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
                        // Remove the middle elements
                        $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                        // Add the new list items and their event handlers
                        for ( j=iStart ; j<=iEnd ; j++ ) {
                            sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
                            $('<li '+sClass+'><a href="#">'+j+'</a></li>')
                                .insertBefore( $('li:last', an[i])[0] )
                                .bind('click', function (e) {
                                    e.preventDefault();
                                    oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
                                    fnDraw( oSettings );
                                } );
                        }

                        // Add / remove disabled classes from the static elements
                        if ( oPaging.iPage === 0 ) {
                            $('li:first', an[i]).addClass('disabled');
                        } else {
                            $('li:first', an[i]).removeClass('disabled');
                        }

                        if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                            $('li:last', an[i]).addClass('disabled');
                        } else {
                            $('li:last', an[i]).removeClass('disabled');
                        }
                    }
                }
            }
        });

        /* Show/hide table column */
        function dtShowHideCol( iCol ) {
            var oTable = $('#example-2').dataTable();
            var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
            oTable.fnSetColumnVis( iCol, bVis ? false : true );
        };

        /* Table #example */
        $(document).ready(function() {
            $('.datatable').dataTable( {
                "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
                "sPaginationType": "bootstrap",
                "oLanguage": {
                    "sLengthMenu": "_MENU_ records per page"
                }
            });
            $('.datatable-controls').on('click','li input',function(){
                dtShowHideCol( $(this).val() );
            })
        });
    </script>

you may also want to look cbabhusal.wordpress.com/2015/05/20/… — illusionist, Aug 18 '15 at 2:43

Ashitaka · Accepted Answer · 2015-02-02 14:38:16Z

up vote 74 down vote accepted

The aoColumnDefs' aTargets parameter lets you give indexes offset from the right (use a negative number) as well as from the left. So you could do:

aoColumnDefs: [
  {
     bSortable: false,
     aTargets: [ -1 ]
  }
]

The equivalent new API (for DataTables 1.10+) would be:

columnDefs: [
   { orderable: false, targets: -1 }
]

edited Feb 2 '15 at 14:38

Ashitaka

14.2k33662

answered Aug 17 '12 at 15:26

Allan Jardine

3,0351418

4

Cool. Btw, can we specify a class instead of the column order? I mean it would be great if all columns have class of 'no_sort' will be disabled sorting. – Giang Nguyen Jan 25 '13 at 15:36

Enclosing speech marks are missing from here. It should be: "aoColumnDefs": [{ "bSortable": false, "aTargets": [ -1 ] } ] – Nasif Md. Tanjim Jan 28 '15 at 17:24

1

I use this to remove sorting from 4th and 5th column. Set the "targets": [3, 4] – Prem Ananth C Mar 30 '15 at 12:38

add a comment |

zessx · Answer 2 · 2014-03-28 14:06:49Z

I would like to develop the current answer.

The good way is to use aoColumnDefs as mentioned.
The default value for the bSortable parameter is true (for each column).

You've got 2 options...

By index :

var table = $('#example').DataTable({
   'aoColumnDefs': [{
        'bSortable': false,
        'aTargets': [-1] /* 1st one, start by the right */
    }]
});

By class :

var table = $('#example').DataTable({
   'aoColumnDefs': [{
        'bSortable': false,
        'aTargets': ['nosort']
    }]
});

Adding the class on the <th> :

<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
            <th class="nosort">Baz</th>
        </tr>
    </thead>
    <tbody>...</tbody>
</table>

Documentation about columns

JSBin

Good Trick for the using the class. Thank you @zessx – Milacay May 9 '14 at 18:31 — Milacay, May 9 '14 at 18:31

ᾠῗᵲᄐᶌ · Answer 3 · 2012-08-17 16:10:06Z

up vote 8 down vote

Read here

http://www.craiglotter.co.za/2010/04/19/how-to-disable-sorting-on-a-column-in-jquery-datatables-plugin/

$('#example').dataTable({
    "aoColumns": [
        null,
        null,
        { "bSortable": false }, // <-- disable sorting for column 3
        null
     ]
});

http://datatables.net/usage/columns under bSortable You can specify which columns to disable using aoColumnDefs and aTargets

$('#example').dataTable({
    "aoColumnDefs": [
        { 
          "bSortable": false, 
          "aTargets": [ -1 ] // <-- gets last column and turns off sorting
         } 
     ]
});

http://live.datatables.net/aqoxob/edit#source

edited Aug 17 '12 at 16:10

answered Aug 17 '12 at 15:25

ᾠῗᵲᄐᶌ

25.6k53048

I know about that one. The problem is that I have a varying number of columns and I want to target only the last one. – Psyche Aug 17 '12 at 15:58

@Psyche I updated the answer – ᾠῗᵲᄐᶌ Aug 17 '12 at 16:04

Yep, I tried Allan Jardine's solution first and it worked. Thanks. – Psyche Aug 17 '12 at 16:16

add a comment |

Gabriel Ojomu · Answer 4 · 2014-11-20 09:01:53Z

On DataTable 1.9.x:

$('.dataTable').dataTable({
    'aoColumnDefs': [{
        'bSortable': false,
        'aTargets': [-1], /* 1st colomn, starting from the right */
    }]
});

While on 1.10.x

$('.dataTable').dataTable({
    columnDefs: [{ orderable: false, "targets": -1 }] /* -1 = 1st colomn, starting from the right */
});

Asad Ali · Answer 5 · 2016-05-12 12:59:41Z

up vote 2 down vote

Its work for me - you can try this


dataTable({
    "paging":   true,
    "ordering": false,
    "info":     true,
})

answered May 12 at 12:59

Asad Ali

1166

add a comment |

Kailas · Answer 6 · 2013-10-05 09:39:22Z

up vote 0 down vote

use this link http://datatables.net/ref#bSortable

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

answered Oct 5 '13 at 9:39

Kailas

1,39621235

add a comment |

asked	4 years ago
viewed	51778 times
active	6 months ago

current community

your communities

more stack exchange communities

Disable sorting on last column when using jQuery DataTables

6 Answers 6

By index :

By class :

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery datatables or ask your own question.

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

Disable sorting on last column when using jQuery DataTables

6 Answers 6

By index :

By class :

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery datatables or ask your own question.

Linked

Related

Hot Network Questions