Ich verwende jQuery DataTables und möchte wissen, ob die automatische Sortierung in der ersten Spalte der Tabelle deaktiviert werden kann.
Mein Code sieht folgendermaßen aus:
/* 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() );
})
});
jquery
sorting
datatables
Psyche
quelle
quelle
In der neueren Version von Datatables (Version 1.10.7) scheinen sich die Dinge geändert zu haben. Um zu verhindern, dass DataTables automatisch nach der ersten Spalte sortiert werden, müssen Sie die
order
Option auf ein leeres Array setzen.Sie müssen lediglich den folgenden Parameter zu den DataTables-Optionen hinzufügen:
"order": []
Richten Sie Ihre DataTable wie folgt ein, um die Standardeinstellung zu überschreiben:
$('#example').dataTable( { "order": [], // Your other options here... } );
Dadurch wird die Standardeinstellung von überschrieben
"order": [[ 0, 'asc' ]]
.Weitere Details zur
order
Option finden Sie hier: https://datatables.net/reference/option/orderquelle
1.10
, wird die Möglichkeit deaktiviert, nach allen Spalten zu sortieren. Ich musste die akzeptierte Antwort verwendenvar 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 }, ], }); });
einstellen
"targets": [0]
zu
"targets": [ ]
quelle
Verwenden Sie diesen einfachen Code für die benutzerdefinierte Sortierung von DataTables. Es ist 100% Arbeit
<script> $(document).ready(function() { $('#myTable').DataTable( { "order": [[ 0, "desc" ]] // "0" means First column and "desc" is order type; } ); } ); </script>
Siehe auf der Datatables-Website
https://datatables.net/examples/basic_init/table_sorting.html
quelle
this.dtOptions = { order: [], columnDefs: [ { 'targets': [0], /* column index [0,1,2,3]*/ 'orderable': false, /* true or false */ }], ........ rest all stuff ..... }
Das obige hat bei mir gut funktioniert.
(Ich verwende Angular Version 7, Angular-Datatables Version 6.0.0 und Bootstrap Version 4)
quelle
Hinzufügen
"aaSorting": []
Und prüfen Sie, ob der Standardwert nicht
null
nur die sortierbare Spalte istif ($('#table').DataTable().order().length == 1) { d.SortColumn = $('#table').DataTable().order()[0][0]; d.SortOrder = $('#table').DataTable().order()[0][1]; }
quelle