使用jQuery数据表时禁用第一列的自动sorting

我正在使用jQuery DataTables,我想知道是否有可能禁用表的第一列自动sorting?

我的代码如下所示:

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

aaSorting选项设置为空数组。 这将禁用初始sorting,同时仍然允许手动sorting,当你点击一列。

 "aaSorting": [] 

aaSorting数组应该包含一个数组,每列最初要包含列的索引和方向string('asc'或'desc')。

在新版本的数据表(版本1.10.7)中似乎事情已经改变。 防止DataTable从第一列自动sorting的方法是将order选项设置为空数组。

您只需将以下参数添加到DataTables选项:

 "order": [] 

设置您的DataTable如下,以覆盖默认设置:

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

这将覆盖"order": [[ 0, 'asc' ]]的默认设置"order": [[ 0, 'asc' ]]

您可以在这里find更多有关order选项的详细信息: https : //datatables.net/reference/option/order

 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's 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 }, ], }); }); 

 "targets": [0] 

  "targets": [ ]