Comment désactiver le tri d'une seule colonne spécifique dans les tableaux de données?

Question

Supposons que j'ai le tableau comme ci-dessous:

Et je souhaite désactiver le tri de la Colonne d'action

<!--index.html-->      
<table class="table table-striped table-bordered post-list-table" id="table" >
  <thead>                      
    <tr>
      <th>Title</th>
      <th>Created At</th>
      <th>Action</th>
    </tr>
  </thead>
</table>

<!--Script.js-->
$('#table').DataTable();

jquery datatables

10

vishal ribdiya 16 nov. 2017 à 08:07

Answer 1

Essayez d'ajouter: columns.orderable

"columnDefs": [
    { "orderable": false, "targets": 2 }
  ]

JSFiddle ici

<!--Script.js-->
$('#table').DataTable( {
"columnDefs": [
    { "orderable": false, "targets": 2 }
  ]
  });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table class="table table-striped table-bordered post-list-table" id="table" >
  <thead>                      
    <tr>
      <th>Title</th>
      <th>Created At</th>
      <th>Action</th>
    </tr>
  </thead>
</table>

23

Ananda 16 nov. 2017 à 06:04

Answer 2

Essaye ça

$('#table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aoColumns":[
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": false}
    ]
});

Pour référence - https://stackoverflow.com/a/7878609/1982631

2

Manoz 16 nov. 2017 à 05:15

Answer 3

Ajouter une classe aux colonnes dont vous souhaitez désactiver le tri

<th class="no-sort">Operations</th>

Puis ajoutez le style suivant à votre css

table.datatable thead th.no-sort {
    background: none;
    pointer-events: none;
}

2

Hassan Alhaj 24 févr. 2019 à 19:15

Answer 4

Faites cela dans jQuery

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

Et ajoutez une classe 'no-sort' à tous les en-têtes que vous souhaitez désactiver comme ceci ..

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

1

user10792816 15 août 2019 à 17:28

Comment désactiver le tri d'une seule colonne spécifique dans les tableaux de données?

4 réponses

Questions connexes

Questions liées

De nouvelles questions

jquery