jQuery/ datables: supprimer les flèches de tri

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.: Version "datatables": "~1.10.2"

pour la nouvelle version des données:

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

les flèches ont certaines classes qui leur sont associées. Vous pouvez utiliser les CSS suivants pour cacher ces éléments.

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

vous pouvez utiliser les propriétés de données comme ci-dessous, il masquera l'icône de tri d'après les colonnes pouvant servir de données:

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

utilisant CSS:

.DataTables_sort_icon { display:none;}

C'est ce qui a fonctionné pour moi

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

exemple:

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

cela rendra la colonne sortable sans afficher les flèches.

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

sur la dernière version de datatables / CDN il est de nouveau différent

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

cache les filtres.

concerne

(depuis DataTables 1.10 ) si vous n'en avez pas besoin, désactiver la commande est une façon d'empêcher les commandes de flèches d'apparaître. Faites ceci lors de l'initialisation de la table en spécifiant l'option "ordering" comme false .

exemple :

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

JSFiddle

de la 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 l'ordre dans toutes les colonnes. Ensuite, vous pouvez configurer la commande de manière programmatique avec la ou les flèches de commande uniquement en affichant sur tried colonne (s) :

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

JSFiddle

truc rapide (cela cache 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; }

• puis ajoutez ceci dans un en-tête de votre table:

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

de toute façon, voici la réponse longue, vous pouvez utiliser ce morceau de code pour désactiver la fonction de tri de la colonne particulière (base-idx: 0), ainsi que supprimer un bouton de tri:

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

mais cela ne fonctionnera pas parfaitement si vous mettez orderable comme 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 à l'ordre ascendant ('order': [0, 'asc' ]). Pour désactiver ce défaut "gênant", ajouter une option supplémentaire: "order":

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

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

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

comprend l'élément" th".

cela vous permettra de changer les icônes de tri par défaut pour les icônes personnalisées, que j'ai dérivé du post D'Irshad ci-dessus et du post de Suschil de ici . Nous avons dû le faire à cause des navigateurs dont la police de caractères était désactivée, 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; }

dans mon cas, ça a bien marché.

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

ça a marché 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; 
    }

classes CSS sorting_asc et sorting_desc apporte de l'icône.

la solution la plus facile pour localiser la correction pour une table spécifique est, une fois que la table est initialisée, dans fnInitComplete, de faire ce qui suit:

$(TABLE).find("thead th").removeClass("sorting_asc");

$('#sample_1 thead tr th:first-child').removeClass('sorting');

mis sous CSS. Il masquera seulement l'icône, cependant 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;
}

ajouter ce style à votre page ""

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

vous pouvez en fait supprimer les images d'icône aussi bien( au lieu d'ajouter de nouveaux CSS), dans le dossier:

DataTables-1.10.16\images

il y a une autre solution pour cacher les icônes de tri d'une colonne, Appliquer une classe css à l'en-tête disons,

<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 testé pour jquery datable version 1.10+