Deaktivieren Sie die automatische Sortierung in der ersten Spalte, wenn Sie jQuery DataTables verwenden

75

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="#">&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() );
            })
        });
Psyche
quelle

Antworten:

186

Setzen Sie die aaSortingOption auf ein leeres Array. Die anfängliche Sortierung wird deaktiviert, während die manuelle Sortierung weiterhin möglich ist, wenn Sie auf eine Spalte klicken.

"aaSorting": []

Das aaSorting-Array sollte ein Array für jede zu sortierende Spalte enthalten, das zunächst den Index der Spalte und eine Richtungszeichenfolge ('asc' oder 'desc') enthält.

João Silva
quelle
7
Die neuere Version von DataTables (Version 1.10.7) finden Sie in meiner Antwort unten.
Jbgarr
1
Legende. Ich habe mich ungefähr eine halbe Stunde lang verrückt gemacht!
Elliot Naylor
1
Funktioniere gut, danke!
Viral M
55

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 orderOption 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 orderOption finden Sie hier: https://datatables.net/reference/option/order

jbgarr
quelle
5
Ich möchte klarstellen, dass sich die Namenskonvention der Optionen bei neueren Versionen von DataTables geändert hat, die Optionen selbst jedoch nicht geändert wurden. Die alten Optionsnamen funktionieren weiterhin. "aaSorting" und "order" sind austauschbar. Außerdem ist "aaData" jetzt "data", "sTitle" ist jetzt "title", "bSortable" ist jetzt "sortable" und so weiter.
BobRodes
1
Wenn Sie nach Optionen zum Konfigurieren einer Datentabelle suchen, lesen Sie besser die offizielle Dokumentation, da in den meisten Foren die Versionen normalerweise nicht angegeben werden, was bei der Implementierung in den Projekten zu großer Verwirrung führt. Informationen zu DataTables v1.9 und früheren Versionen finden Sie unter: http://legacy.datatables.net/usage . DataTables 1.10 finden Sie unter: https://datatables.net/reference/option .
Fabrizio Valencia
Wenn Sie dies versuchen 1.10, wird die Möglichkeit deaktiviert, nach allen Spalten zu sortieren. Ich musste die akzeptierte Antwort verwenden
Bryan A
7
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
        },
        ],

    });

});

einstellen

"targets": [0]

zu

 "targets": [ ]
Bhargav Chudasama
quelle
2

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

Obaidul Haque
quelle
1
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)

Ipsita Rout
quelle
0

Hinzufügen

"aaSorting": []

Und prüfen Sie, ob der Standardwert nicht nullnur die sortierbare Spalte ist

if ($('#table').DataTable().order().length == 1) {
    d.SortColumn = $('#table').DataTable().order()[0][0];
    d.SortOrder = $('#table').DataTable().order()[0][1];
}
Atta Ur Rehman
quelle