Désactiver le tri sur la dernière colonne lors de l'utilisation de jQuery DataTables

Question

J'utilise jQuery DataTables dans un projet et je voudrais savoir comment désactiver le tri pour la dernière colonne. Je veux mettre en œuvre cette fonctionnalité à l'échelle du site.

Actuellement, j'ai le code suivant :

<!-- jQuery DataTable -->
    <script src="../assets/js/plugins/dataTables/jquery.datatables.min.js"></script>
    <script>
        /* 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"
                }
            });
            $('.datatable-controls').on('click','li input',function(){
                dtShowHideCol( $(this).val() );
            })
        });
    </script>

Answer 1

Utilisez ça :

$(document).ready(function () {
            $('#workPatternDataTable').dataTable({
                //"aaSorting": [],
                ajax: null,
                columnDefs: [
                    {
                        targets: 0,
                        sortable: false,
                        autoWidth: false,
                    }
                ]
            });
        });

Answer 2

Faites-le en jQuery. Le code ci-dessous fonctionne bien même si vos colonnes sont générées automatiquement ou si vous n'êtes pas sûr du numéro de la colonne.

var table = $('#tbl').DataTable({
        "columnDefs": [{ targets: 'no-sort', orderable: false }]});

et ajoutez une classe 'no-sort' à tous les en-têtes que vous voulez désactiver le tri comme ceci

<th class="no-sort">Header n</th>

Answer 3

Utiliser ce lien http://datatables.net/ref#bSortable

$(document).ready( function() {
   $('#example').dataTable( {
      "aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] }]
    } );
} );

Answer 4

Pour désactiver le tri sur n'importe quelle colonne d'une table de données, utilisez la commande suivante

aoColumnDefs: [{ "aTargets": [ 0 ], "bSortable": false}],

il signifie "aTargets": [ 0 ] est l'identifiant de la colonne à partir de 0

donc dans votre cas, ça devient :

 $(".tableSort").dataTable({
        aaSorting: [[0, 'asc']],
        aoColumnDefs: [
            { "aTargets": [ -1 ], "bSortable": false},
        ]
    });