반응형
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 배열에는 처음에 열 인덱스와 방향 문자열('asc' 또는 'desc')이 포함된 각 열에 대한 배열이 포함되어야 합니다.
최신 버전의 데이터 테이블(버전 1.10.7)에서는 상황이 바뀐 것 같습니다.DataTable이 첫번째 열로 자동 정렬되는 것을 방지하는 방법은order빈 배열에 옵션을 선택합니다.
DataTables 옵션에 다음 파라미터를 추가하면 됩니다.
"order": []
기본 설정을 재정의하려면 다음과 같이 DataTable을 설정합니다.
$('#example').dataTable( {
"order": [],
// Your other options here...
} );
이는 의 기본 설정을 재정의합니다."order": [[ 0, 'asc' ]].
관련하여 자세한 내용을 확인할 수 있습니다.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": [ ]
this.dtOptions = {
order: [],
columnDefs: [ {
'targets': [0], /* column index [0,1,2,3]*/
'orderable': false, /* true or false */
}],
........ rest all stuff .....
}
위의 내용은 저에게 잘 들어맞았습니다.
(Angular version 7, Angular-datatable version 6.0.0 및 부트스트랩 version 4를 사용하고 있습니다.
DataTables 사용자 정의 정렬에는 이 간단한 코드를 사용합니다.100% 작업입니다.
<script>
$(document).ready(function() {
$('#myTable').DataTable( {
"order": [[ 0, "desc" ]] // "0" means First column and "desc" is order type;
} );
} );
</script>
데이터 테이블 웹 사이트에서 보기
https://datatables.net/examples/basic_init/table_sorting.html
더하다
"aaSorting": []
그리고 기본값이 그렇지 않은지 확인합니다.null정렬 가능한 열만 설정하면 됩니다.
if ($('#table').DataTable().order().length == 1) {
d.SortColumn = $('#table').DataTable().order()[0][0];
d.SortOrder = $('#table').DataTable().order()[0][1];
}
다른 해결책이 해결되지 않으면 스타일을 재정의하여 정렬 토글을 숨깁니다.
.sorting_asc:after, .sorting_desc:after {
content: "";
}
서버 쪽에서 사용하는 동안 초보자를 위한 데이터 테이블은 매우 어려울 수 있습니다.서버 측에서 데이터 테이블을 거의 서두르지 않고 구현할 수 있으므로 데이터 테이블을 빠르게 사용하는 것을 고려해야 합니다.저는 이것들이 저의 일상적인 일을 편하게 하기 위해 발견했습니다. 여기 있는 모든 프로그래머들이 원할 것이라고 생각합니다.참고: 데이터에 손상을 줄 수 있으므로 운영에 사용하지 마십시오.
언급URL : https://stackoverflow.com/questions/12124746/disable-automatic-sorting-on-the-first-column-when-using-jquery-datatables
반응형
'programing' 카테고리의 다른 글
| PHP를 사용하여 데이터베이스에서 반복하지 않고 난수를 생성하는 방법? (0) | 2023.09.21 |
|---|---|
| 내 Powershell 스크립트에서 Jenkins 변수를 사용하는 방법 (0) | 2023.09.21 |
| 메시지를 표시하지 않고 Powershell에서 현재 사용자의 자격 증명 개체 가져오기 (0) | 2023.09.21 |
| 데이터베이스 파일이 매우 큰 sqlite의 성능 특성은 무엇입니까? (0) | 2023.09.21 |
| Google 차트에서 범례 숨기기 (0) | 2023.09.21 |