jQuery DataTables를 사용할 때 첫 번째 열에서 자동 정렬 비활성화
jQuery DataTables를 사용하고 있으며 테이블의 첫 번째 열에서 자동 정렬을 비활성화 할 수 있는지 알고 싶습니다.
내 코드는 다음과 같습니다.
/* 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() );
})
});
aaSorting
옵션을 빈 배열로 설정하십시오 . 열을 클릭 할 때 수동 정렬을 허용하는 동안 초기 정렬을 비활성화합니다.
"aaSorting": []
aaSorting 배열에는 열의 인덱스와 방향 문자열 ( 'asc'또는 'desc')을 포함하여 처음에 정렬 할 각 열에 대한 배열이 포함되어야합니다 .
최신 버전의 데이터 테이블 (버전 1.10.7)에서는 상황이 변경된 것 같습니다. DataTables가 첫 번째 열을 기준으로 자동 정렬되지 않도록하는 방법은 order
옵션을 빈 배열 로 설정하는 것입니다.
You just need to add the following parameter to the DataTables options:
"order": []
Set up your DataTable as follows in order to override the default setting:
$('#example').dataTable( {
"order": [],
// Your other options here...
} );
That will override the default setting of "order": [[ 0, 'asc' ]]
.
You can find more details regarding the order
option here: 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
},
],
});
});
set
"targets": [0]
to
"targets": [ ]
Use this simple code for DataTables custom sorting. Its 100% work
<script>
$(document).ready(function() {
$('#myTable').DataTable( {
"order": [[ 0, "desc" ]] // "0" means First column and "desc" is order type;
} );
} );
</script>
See in Datatables website
https://datatables.net/examples/basic_init/table_sorting.html
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)
'IT Share you' 카테고리의 다른 글
자동 증분 기본 키를 사용하여 MySQL에 데이터를 삽입하는 방법은 무엇입니까? (0) | 2020.11.12 |
---|---|
Android에서 하이퍼 링크 텍스트보기 만들기 (0) | 2020.11.12 |
MySQL Workbench가 쿼리 결과를 표시하지 않음 (0) | 2020.11.12 |
8.0 이전 iOS 버전의 레이아웃 여백과 관련된 레이아웃 속성 (0) | 2020.11.12 |
Android Studio에서 종속성 트리를 어떻게 표시합니까? (0) | 2020.11.12 |