web-dev-qa-db-fra.com

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

J'utilise le plugin jQuery datatables pour trier les champs de la table. Ma question est comment puis-je 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 aussi essayé le code suivant:

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

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

javascriptjquerysortingdatatables
147
usman

C'est ce que vous cherchez: 

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

À partir de DataTables 1.10.5, il est maintenant possible de définir l’initialisation options utilisant les attributs HTML5 data- *.

- Documentation de dataTables: attributs de données HTML5 * - options de table

Donc, vous pouvez utiliser data-orderable="false" sur la th de la colonne que vous ne voulez pas pouvoir trier. Par exemple, la deuxième colonne "Avatar" dans le tableau ci-dessous ne sera pas triable:

<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/ .

80
Jeromy French

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

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

Désactiver le tri sur une colonne dans jQuery Datatables

63
Paulraj

Utiliser 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 ]
        } ]
    });
});

MODIFIER:

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

et utilisez 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, à la suite d'un ancien article de blog. Maintenant, il existe un lien avec les informations mises à jour sur le style des Datatables avec bootstrap .

60
Paulo Fidalgo

Ce que j'utilise, c’est d’ajouter un attribut personnalisé dans thead et de contrôler le tri en vérifiant cette valeur attr automatiquement.

Donc, 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 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
    });
});
27
Bhavesh B

columnDefs accepte maintenant une classe. Je dirais que c'est la méthode recommandée si vous souhaitez spécifier les 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
    }]
});
13
dtbarne

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}
           ]
});

Donc, tout ce que vous avez à faire est d’ajouter le "orderable": false à la colonne que vous ne voulez pas pouvoir trier.

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

À partir de 1.10.5 , incluez simplement

'commandable: faux'

dans columnDefs et ciblez votre colonne avec 

'cibles: [0,1]'

Le tableau devrait ressembler à: 

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

Si vous définissez la propriété FIRST column orderable sur false, vous devez définissez également la colonne order par défaut, sinon elle 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 de commande 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 }
  ]
} );
4
Moses Machua

Pour désactiver le tri sur une seule colonne, 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 un numéro de colonne. Par défaut c'est à partir de 0

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

Ici seulement Column 3 fonctionne

4
Siddhartha esunuri

Pour mettre à jour la réponse de Bhavish (qui, je pense, concerne une version plus ancienne de DataTables et ne m'a pas fonctionné) 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>
3
Josh Mouch
"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

Ici 0 est l'index de la colonne, si vous voulez que plusieurs colonnes ne soient pas triées, mentionnez les valeurs d'index de colonnes séparées par comma(,)

3
coder

Cela fonctionne pour moi pour une seule colonne

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

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>[email protected]</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

Maintenant, vous pouvez donner la classe "nosort" à <TH>

2
Ghanshyam Gohel

Vous pouvez directement utiliser 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()
        ];
1
Urvi_204

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

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

Une autre façon utilise javascript, par exemple, vous avez la 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
        }
        ]
    }
    );
}
);
1
Zero

  1. Utilisez le code suivant pour désactiver la commande dans 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, 
} );
1
Pushkaraj Bhandari

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

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

Notez que j'avais caché la fonctionnalité ici

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

Puis je l'ai fusionné dans "aoColumnDefs"

1
Pratik C Joshi

vous pouvez aussi 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 ] }
    ]
});
0
Nurul Ferdous

Voici la réponse!

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

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

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": []
  });
});
0
Python