désactiver le tri d'une colonne à l'aide de datatables de jquery

Question

J'utilise datatables de jquery pour trier les champs de la table. ma question est de savoir comment désactiver une colonne particulière sans trier. j'ai essayé avec le code suivant, mais j'ai obtenu le résultat escompté.

"aoColumns": [
    { "bSearchable": false },
    null
]   

J'ai également essayé avec le code suivant

"aoColumnDefs": [
     { "bSearchable": false, "aTargets": [ 1 ] }
 ]

mais le résultat n'est pas accepté .s'il vous plaît dites-moi toute idée

usman

Answer 1

C'est ce que vous cherchez :

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

Answer 2

Pour rendre le tri de la première colonne inopérant, essayez avec le code ci-dessous dans datatables jquery. Le null représente ici l'activation du tri.

$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );

Désactiver le tri sur une colonne dans les tables de données jQuery

Answer 3

En utilisant Datatables 1.9.4, j'ai désactivé le tri de la première colonne avec ce code :

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

EDIT :

Vous pouvez même les désactiver en utilisant l'option no-sort sur votre <th> ,

et utiliser ce code d'initialisation :

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

EDIT 2

Dans cet exemple, j'utilise Datables avec Bootstrap, en suivant un ancien article de blog. Maintenant il y a un lien avec du matériel mis à jour sur stylisation des tables de données avec bootstrap .

Answer 4

Ce que j'utilise, c'est d'ajouter un attribut personnalisé dans le td du tableau et de contrôler le tri en vérifiant automatiquement la valeur de cet attribut.

Le code HTML sera donc

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

Et le JavaScript pour initialiser les tables de données sera (il obtiendra dynamiquement les informations de tri de la table elle-même ;)

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});

Answer 5

$("#exemple").dataTable( {"aoColumnDefs" : [{ "bSortable" : false, "aTargets" : [ 0,1,2,3,4,5 ] }] } ) ;