web-dev-qa-db-fra.com

Supprimer les flèches de tri dans jQuery DataTables

J'utilise le jQuery DataTables plugin. 

Est-il possible de supprimer les petites flèches affichées dans les en-têtes pour indiquer les options de tri? Je souhaite conserver la fonctionnalité voulant qu'en cliquant sur un en-tête trié dans cette colonne, je ne souhaite tout simplement pas afficher les icônes de flèche car elles modifient la présentation de mes en-têtes de colonne. 

Firebug montre mes en-têtes comme suit:

<th class="sorting" role="columnheader" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" style="width: 151px;" aria-label="Category: activate to sort column ascending">Category</th>
jquerycssdatatables
28
user2571510

Les icônes sont définies en tant que background : url(..) sur les classes CSS. Désactivez-les en:

.sorting, .sorting_asc, .sorting_desc {
    background : none;
}

voir jsfiddle -> http://jsfiddle.net/5V2Dx/ Remarque: cette solution concerne les fichiers de données 1.9.x !!

Mettre à jour. Lors de l'utilisation de datatables 1.10.x, le CSS pour réinitialiser les icônes d'en-tête est un peu différent:

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background : none;
}

voir -> http://jsfiddle.net/kqpv3ub9/ (la démo mise à jour utilise dataTables 1.10.11)

39
davidkonrad

Aucune des solutions présentées n'a fonctionné pour moi. Mais je viens de trouver celui-ci;

.dataTable > thead > tr > th[class*="sort"]:after{
    content: "" !important;
}

PS .: DataTables version "datatables": "~1.10.2"

22
Renato Gama

Vous pouvez utiliser les propriétés datatable comme ci-dessous, cela cachera l'icône de tri Des colonnes datatable:

"targets": 'no-sort',
"bSort": false,
"order": []
8
Ankita_systematix

Pour la nouvelle version de DataTables:

<style>
     .dataTable > thead > tr > th[class*="sort"]::after{display: none}
</style>
5
Irshad Khan

Certaines classes sont associées aux flèches. Vous pouvez utiliser les CSS suivantes pour masquer ces éléments.

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    display: none;
}
4
Edgar Couto

Astuce rapide (cela va cacher un bouton de tri, mais la fonction fonctionne toujours): - Créer CSS: 

.no-sort::after { display: none!important; }

.no-sort { pointer-events: none!important; cursor: default!important; }

  • Ajoutez ensuite ceci dans un en-tête de votre tableau:

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

Quoi qu'il en soit, voici une longue réponse, vous pouvez utiliser ce morceau de code pour désactiver la fonction de tri de la colonne particulière (base-idx: 0), AUSSI COMME supprimer un bouton de tri:

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

Mais cela ne fonctionnera pas parfaitement si vous définissez orderable sur false dans la première colonne. La fonction de tri s'arrête mais le bouton est toujours là. Parce que, par défaut, la première colonne a été définie sur ordre croissant ('ordre': [[0, 'asc']). Pour désactiver cette valeur par défaut "ennuyeuse", ajoutez une option supplémentaire: "commande":

$('#example').dataTable( {
      "columnDefs": [
        { "orderable": false, "targets": 0 }
      ],
      "order": [],  // not set any order rule for any column.
});

4
Nguyen Tan Dat

C'est ce qui a fonctionné pour moi

.dataTable > thead > tr > th[class*=sort]:after{
    display:none;
}
2
Bakly

Utilisation de CSS:

.DataTables_sort_icon { display:none;}
2
A. Wolff

(Depuis DataTables 1.10) Si vous n'en avez pas besoin, la désactivation de la commande est un moyen d'empêcher l'affichage des contrôles de flèche. Faites ceci lors de l'initialisation de la table en spécifiant l'option "ordering" comme false. 

Exemple:

$("#example").DataTable({
   "ordering": false
});

JSFiddle 

Documentation:

Activer ou désactiver l'ordre des colonnes - c'est aussi simple que cela!

Avertissement: pas de tri du tout. 

Une autre solution consiste à désactiver le classement dans toutes les colonnes. Ensuite, vous pouvez définir un ordre par programme avec les les flèches de contrôle ne s'affichant que sur les colonnes triées}:

var after = $('#after').DataTable({
  "order": [[1,"asc"]],                       // sorting 2nd column
  "columnDefs": [
    { "orderable": false, "targets": "_all" } // Applies the option to all columns
  ]
});

JSFiddle

1
Logan Hoerth

Sur la dernière version de datatables/CDN, c'est encore différent

table.dataTable thead .sorting:after
{
    display: none;
}

Cache les filtres.

Cordialement

1
Nicky Thomas

Exemple:

<display:column property="......" title="......" sortable="true"/>

Cela rendra la colonne triable sans afficher les flèches.

1
aseesh

Tout cela semble un peu compliqué, pourquoi ne pas utiliser l'attribut data-sortable="false" sur la balise <th> et ensuite simplement faire un removeAttribute("class"); dans JS avec un déclencheur click? 

1
BeNice

Cela a fonctionné pour moi. 

 #sample_1>thead>tr>th.sorting, #sample_1>thead>tr>th.sorting_asc, #sample_1>thead>tr>th.sorting_desc {
        background : none;

    }
    #sample_1>thead>tr>th.sorting:after, #sample_1>thead>tr>th.sorting_asc:after, #sample_1>thead>tr>th.sorting_desc::after {
        content: none; 
    }
0
Shahid Chaudhary

Dans mon cas, cela a bien fonctionné.

.sorting:after,
.sorting_asc:after,
.sorting_desc:after{
    content: "";
    background: none !important;
}
0
KBIIX

Ajouter ce style à votre page

table.dataTable thead .sorting::after {
    opacity: 0.2;
    content: "";
}
0
Clinton Agburum

En fait, vous pouvez aussi supprimer les images d’icônes (au lieu d’ajouter du nouveau CSS), dans le dossier:

DataTables-1.10.16\images

 enter image description here

0
GMsoF

Mettez ci-dessous CSS. Cela ne masquera que l'icône, mais le tri fonctionnera.

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-image: none!important;
}
0
ruchit
$('#sample_1 thead tr th:first-child').removeClass('sorting');
0
Sagar Mali

Cela vous permettra de changer les icônes de tri par défaut pour les icônes personnalisées, que j'ai dérivées de l'article d'Irshad ci-dessus et de Suschil de ici . Cela était dû aux navigateurs dont le rendu des polices était désactivé, ce qui était hors de notre contrôle.

.dataTable > thead > tr > th[class*="sort"]::after{display: none}

table.dataTable thead .sorting { background: url('/Content/images/sort-both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('/Content/images/sort-asc-list.png') no-repeat center right; }
table.tabledataTable thead .sorting_desc { background: url('/Content/images/sort-desc-list.png') no-repeat center right; }
0
ScottLenart

Il existe une autre solution pour masquer les icônes de tri d’une colonne, Appliquer une classe css à l’en-tête,

<th class="sorting_disabled"></th>

et définir la classe css dans le style 

.sorting_disabled
{
   background-image:none !important;
}

Cette solution a fonctionné et a été testée pour la version 1.10+ datatable jquery

0
Tahir Alvi

Pour DataTables 1.10.7 une petite variante pour le style davidkonrad css:

table.dataTable thead th.sorting, 
table.dataTable thead th.sorting_asc, 
table.dataTable thead th.sorting_desc {
    background : none;
}

Inclure le "th" élément.

0
Cristian A. Rodríguez Enríquez