web-dev-qa-db-fra.com

jQuery dataTable ne montre pas l'icône de tri

J'essaie d'utiliser un plugin jQuery dataTable. Le problème est que l'icône de tri (cette flèche indiquant le sens dans lequel les données sont triées) n'est pas affichée.

Mon code se présente comme suit:

$('#example').dataTable(
{
    "bPaginate": false,
    "bFilter": false,
    "oLanguage": { "sInfo": ""}        
}
);

et html:

<table class="surfClass" cellspacing="1" id="example">

<thead>
<tr>
    <th width="120px">Name</th>
    <th width="120px">The hourly rate (points)</th>
    <th>Levels of referrals</th>
    <th>bonuses</th>
    <th width="70px">Payout minimum</th>
</tr>
</thead>
jquerydatatables
25
PsCraft

J'ai eu ce problème, car, comme @ Matt2012 l'avait signalé, j'avais copié le script CDN sur ma machine locale. Ma solution a donc été de mettre à jour le fichier CSS pour rechercher les images où je souhaite les placer, après les avoir également enregistrées.

Voir cette partie:

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.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('/Content/images/sort_desc.png') no-repeat center right; }

table.dataTable thead .sorting_asc_disabled { background: url('/Content/images/sort_asc_disabled.png') no-repeat center right; }
table.dataTable thead .sorting_desc_disabled { background: url('/Content/images/sort_desc_disabled.png') no-repeat center right; }
35
John

J'ai eu ce problème et il m'a fallu une heure pour découvrir que je ne liais pas à une feuille de style requise. Dans mon cas, j'avais:

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/minidatatables-bootstrap.css'}"/>

mais j'avais aussi besoin d'ajouter:

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/datatables-bootstrap.css'}"/>

pour que les icônes de tri apparaissent. C'est probablement une solution d'amorçage, mais si vous rencontrez ce problème, vous pouvez vous assurer que les bonnes feuilles de style sont liées.

13
Jeremy Goodell

Datatables utilise un Sprite pour les icônes que vous souhaitez utiliser firebug dans firefox. Cliquez sur le réseau et cherchez tout ce qui apparaît en rouge. Ce qui indiquerait qu'un actif n'est pas en cours de chargement. Vous cherchez quelque chose comme ça "/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png". 

Je suppose que le plugin datatable est en cours d'initialisation et que vous voyez tout ce que vous attendez?

Vous voudrez peut-être regarder ceci http://debug.datatables.net/ qui est un bookmarklet qui aide à déboguer ce plugin.

5
Matt2012

Chaque fois que j'ai eu ce problème avec dataTables, il provient d'une erreur javascript.
En outre, vous pouvez essayer d'ajouter

"bSort": true,
3
xjx424

J'ai eu le problème aussi. Utilisez simplement leur propre configurateur pour configurer toutes les options de votre choix ici https://datatables.net/download/ / ils généreront exactement les fichiers .js et .css dont vous avez besoin . Vous pouvez ensuite télécharger ou utiliser leur propre CDN hébergé pour les deux fichiers

1
Khaled

J'ai résolu le problème en encapsulant le texte de l'en-tête du tableau dans un <div>:

<th><div>Date</div></th>
1
Ben

Si vous utilisez Bootstrap V4, vous devez inclure 2 css supplémentaires:

<link href="/bower_components/font-awesome/css/font-awesome.css"  rel="stylesheet">
<link href="/bower_components/datatables.net-plugins/integration/font-awesome/dataTables.fontAwesome.css"  rel="stylesheet">

pour plus d'informations, visitez ce link

0
Camilo Calderón Tapia

Je viens de UPGRADED JQuery datatable , fonctionne maintenant très bien

0
Arun Prasad E S