Disable auto sort in first column when using jQuery DataTables

Question

I am using jQuery DataTables and I would like to know if auto sorting can be disabled in the first column of the table?

My code is as follows:

/* 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() ); }) }); 

Answer 1

Set the aaSorting parameter to an empty array. It will disable initial sorting while maintaining manual sorting when you click on a column.

 "aaSorting": [] 

The aaSorting array must contain an array for each column, which should be initially sorted with the column index and direction line ('asc' or 'desc').

Answer 2

In the new version of datatables (version 1.10.7) it seems that everything has changed. A way to prevent DataTables from sorting automatically by the first column is to set the order parameter to an empty array.

You just need to add the following parameter to the DataTables parameters:

 "order": [] 

Configure your DataTable as follows to override the default setting:

 $('#example').dataTable( { "order": [], // Your other options here... } ); 

This will change the default setting of "order": [[ 0, 'asc' ]] .

More information about the order option can be found here: https://datatables.net/reference/option/order

Answer 3

 var table; $(document).ready(function() { //datatables table = $('#userTable').DataTable({ "processing": true, //Feature control the processing indicator. "serverSide": true, //Feature control DataTables' server-side processing mode. "order": [], //Initial no order. "aaSorting": [], // Load data for the table content from an Ajax source "ajax": { "url": "<?php echo base_url().'admin/ajax_list';?>", "type": "POST" }, //Set column definition initialisation properties. "columnDefs": [ { "targets": [ ], //first column / numbering column "orderable": false, //set not orderable }, ], }); }); 

set

 "targets": [0] 

to

  "targets": [ ] 

Answer 4

Use this simple code for custom sorting of DataTables. Its 100% work

 <script> $(document).ready(function() { $('#myTable').DataTable( { "order": [[ 0, "desc" ]] // "0" means First column and "desc" is order type; } ); } ); </script> 

See the Datatables website

https://datatables.net/examples/basic_init/table_sorting.html

Answer 5

 this.dtOptions = { order: [], columnDefs: [ { 'targets': [0], /* column index [0,1,2,3]*/ 'orderable': false, /* true or false */ }], ........ rest all stuff ..... } 

The above worked fine for me.

(I am using Angular version 7, angular-datatables version 6.0.0 and bootstrap version 4)