Désactiver le tri pour une colonne particulière dans jQuery DataTables

J'utilise le plugin jQuery DataTables pour trier les champs de la table. Ma question est la suivante: comment désactiver le tri pour une colonne particulière? J'ai essayé avec le code suivant, mais cela n'a pas fonctionné:

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

J'ai également essayé le code suivant:

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

mais cela n'a toujours pas produit les résultats escomptés.

Voici ce que vous recherchez:

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

Depuis DataTables 1.10.5, il est désormais possible de définir des options d'initialisation en utilisant les attributs HTML5 data- *.

-De DataTables exemple - HTML5 Data- * attributs - Options de table

Ainsi, vous pouvez utiliser data-orderable="false"sur la thcolonne que vous ne voulez pas être triable. Par exemple, la deuxième colonne "Avatar" du tableau ci-dessous ne pourra pas être triée:

<table id="example" class="display" width="100%" data-page-length="25">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

Voir un exemple de travail sur https://jsfiddle.net/jhfrench/6yxvxt7L/ .

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

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

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

Utilisation de Datatables 1.9.4 J'ai désactivé le tri pour 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 ]
        } ]
    });
});

ÉDITER:

Vous pouvez désactiver même en utilisant la no-sortclasse sur votre <th>,

et utilisez ce code d'initialisation:

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

MODIFIER 2

Dans cet exemple, j'utilise Datables avec Bootstrap, à la suite d'un ancien article de blog. Il existe maintenant un lien avec du matériel mis à jour sur le style des tables de données avec bootstrap .

Ce que j'utilise, c'est simplement ajouter un attribut personnalisé dans la tête td et contrôler le tri en vérifiant automatiquement cette valeur attr.

Ainsi, le code HTML sera

<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 JavaScript pour l'initialisation des 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
    });
});

columnDefsaccepte maintenant une classe. Je dirais que c'est la méthode préférée si vous souhaitez spécifier des colonnes à désactiver dans votre balisage:

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

Ensuite, dans votre JS:

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});

Voici ce que vous pouvez utiliser pour désactiver certaines colonnes à désactiver:

 $('#tableId').dataTable({           
            "columns": [
                { "data": "id"},
                { "data": "sampleSortableColumn" },
                { "data": "otherSortableColumn" },
                { "data": "unsortableColumn", "orderable": false}
           ]
});

Il ne vous reste plus qu'à ajouter le "orderable": false à la colonne dont vous ne voulez pas être triable.

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

Pour désactiver le tri de colonne unique, essayez cet exemple:

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

Pour plusieurs colonnes, essayez cet exemple: il vous suffit d'ajouter le numéro de colonne. Par défaut, il commence à 0

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>  

Ici ne Column 3fonctionne que

À partir de la version 1.10.5 , incluez simplement

'ordonnable: faux'

dans columnDefs et ciblez votre colonne avec

"cibles: [0,1]"

La table devrait aimer:

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});

Si vous définissez la orderablepropriété FIRST column sur false, vous devez également définir la ordercolonne par défaut , sinon cela ne fonctionnera pas car la première colonne est la colonne de classement par défaut. L'exemple ci-dessous désactive le tri sur la première colonne mais définit la deuxième colonne comme colonne d'ordre par défaut (rappelez-vous que les index de dataTables sont basés sur zéro).

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

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

Voici 0l'index de la colonne, si vous souhaitez que plusieurs colonnes ne soient pas triées, mentionnez les valeurs d'index de colonne séparées parcomma(,)

Pour mettre à jour la réponse de Bhavish (qui, je pense, est pour une ancienne version de DataTables et n'a pas fonctionné pour moi). Je pense qu'ils ont changé le nom de l'attribut. Essaye ça:

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>

Utilisation de la classe:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>dummy@email.com</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

Vous pouvez maintenant donner la classe "nosort" à <TH>

Cela fonctionne pour moi pour une seule colonne

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

Si vous devez déjà masquer certaines colonnes, comme je cache la colonne du nom de famille. Je devais juste concaténer fname, lname, donc j'ai fait une requête mais cache cette colonne du front-end. Les modifications dans Désactiver le tri dans une telle situation sont:

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

Notez que j'avais la fonctionnalité de masquage ici

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

Puis je l'ai fusionné en "aoColumnDefs"

1. Utilisez le code suivant pour désactiver la commande sur la première colonne:

   $('#example').dataTable( {
     "columnDefs": [
       { "orderable": false, "targets": 0 }
     ]
   } );

2. Pour désactiver la commande par défaut, vous pouvez également utiliser:

   $('#example').dataTable( {
        "ordering": false, 
   } );

Vous pouvez utiliser directement la méthode .notsortable () sur la colonne

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_product.withPaginationType('full_numbers');
        vm.dtOpt_product.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtProductTypes
                }]

        });

        vm.dtColDefs_product = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
        ];

Il y a deux façons, l'une est définie en html lorsque vous définissez les en-têtes de tableau

<thead>
  <th data-orderable="false"></th>
</thead>

Une autre façon est d'utiliser javascript, par exemple, vous avez une table

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

puis,

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);

vous pouvez également utiliser un index négatif comme ceci:

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});

Le code ressemblera à ceci:

$(".data-cash").each(function (index) {
  $(this).dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
        "sPrevious": "Prev",
        "sNext": "Next"
      }
    },
    "bSort": false,
    "aaSorting": []
  });
});

Voici la réponse!

targets est le numéro de colonne, il commence à 0

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

définir la classe "no-sort" dans le tableau puis ajouter css .no-sort {événements-pointeurs: aucun! important; curseur: par défaut! important; image de fond: aucun! important; } par cela, il masquera la flèche vers le bas et désactivera l'événement dans la tête.