Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable automatic sorting on the first column when using jQuery DataTables

I'm using jQuery DataTables and I would like to know if there's possible to disable automatic sorting on the first column of the table?

My code looks like this:

        /* 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"                 },                 "aoColumnDefs": [                     {                          "bSortable": false,                          "aTargets": [ -1 ] // <-- gets last column and turns off sorting                     }                  ]             });             $('.datatable-controls').on('click','li input',function(){                 dtShowHideCol( $(this).val() );             })         }); 
like image 556
Psyche Avatar asked Aug 25 '12 18:08

Psyche


People also ask

How to remove the sorting in DataTable?

DataTable({ "columnDefs": [ { "orderable": false, "targets": [0, 4, 5, 6] }, { "orderable": true, "targets": [1, 2, 3] } ] }); As you can see, targets accepts an array of column indexes. You can even omit the orderable true part and just state which ones to disable sorting on.

How do I turn off sorting in columns?

To disable sorting for one column, select the name of this column in the list below Customize columns, and then de-select Make sortable: To deselect sorting for all columns, you'll first need to select all columns at once.


1 Answers

Set the aaSorting option to an empty array. It will disable initial sorting, whilst still allowing manual sorting when you click on a column.

"aaSorting": [] 

The aaSorting array should contain an array for each column to be sorted initially containing the column's index and a direction string ('asc' or 'desc').

like image 94
João Silva Avatar answered Sep 19 '22 02:09

João Silva