使用 jQuery DataTables 时禁用第一列的自动排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12124746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable automatic sorting on the first column when using jQuery DataTables
提问by Psyche
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?
我正在使用 jQuery DataTables，我想知道是否可以禁用表格第一列的自动排序？
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="#">← '+oLang.sPrevious+'</a></li>'+
'<li class="next disabled"><a href="#">'+oLang.sNext+' → </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() );
})
});
回答by Jo?o Silva
Set the aaSortingoption to an empty array. It will disable initial sorting, whilst still allowing manual sorting when you click on a column.
将aaSorting选项设置为空数组。它将禁用初始排序，同时在您单击列时仍允许手动排序。
"aaSorting": []
The aaSorting array should contain an array for each column to be sorted initiallycontaining the column's index and a direction string ('asc' or 'desc').
aaSorting 数组应包含每个要排序的列的数组，最初包含列的索引和方向字符串（'asc' 或 'desc'）。
回答by jbgarr
In the newer version of datatables (version 1.10.7) it seems things have changed. The way to prevent DataTables from automatically sorting by the first column is to set the orderoption to an empty array.
在较新版本的数据表（版本 1.10.7）中，事情似乎发生了变化。防止 DataTables 自动按第一列排序的方法是将order选项设置为空数组。
You just need to add the following parameter to the DataTables options:
您只需将以下参数添加到 DataTables 选项中：
"order": []
Set up your DataTable as follows in order to override the default setting:
如下设置您的 DataTable 以覆盖默认设置：
$('#example').dataTable( {
"order": [],
// Your other options here...
} );
That will override the default setting of "order": [[ 0, 'asc' ]].
这将覆盖"order": [[ 0, 'asc' ]].
You can find more details regarding the orderoption here:
https://datatables.net/reference/option/order
您可以在order此处找到有关该选项的更多详细信息：https:
//datatables.net/reference/option/order
回答by Bhargav Chudasama
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
},
],
});
});
set
放
"targets": [0]
to
到
"targets": [ ]
回答by Obaidul Haque
Use this simple code for DataTables custom sorting. Its 100% work
使用此简单代码进行 DataTables 自定义排序。它的 100% 工作
<script>
$(document).ready(function() {
$('#myTable').DataTable( {
"order": [[ 0, "desc" ]] // "0" means First column and "desc" is order type;
} );
} );
</script>
See in Datatables website
在 Datatables 网站中查看
https://datatables.net/examples/basic_init/table_sorting.html
https://datatables.net/examples/basic_init/table_sorting.html
回答by Ipsita Rout
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)
（我使用的是 Angular 版本 7、angular-datatables 版本 6.0.0 和 bootstrap 版本 4）
回答by Atta Ur Rehman
Add
添加
"aaSorting": []
And check if default value is not nullonly set sortable column then
并检查默认值是否null不仅设置了可排序的列
if ($('#table').DataTable().order().length == 1) {
d.SortColumn = $('#table').DataTable().order()[0][0];
d.SortOrder = $('#table').DataTable().order()[0][1];
}
