jQuery dataTable non mostra l'icona di ordinamento

Question

Sto provando a utilizzare un plug-in dataTable jQuery. Il problema è che l'icona di ordinamento (questa freccia che indica quale direzione è effettivamente ordinata) non viene visualizzata.

Il mio codice si presenta come segue:

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

e 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> 

Answer 1

DataTable utilizza uno sprite per le icone che si desidera utilizzare Firebug in Firefox cliccare su rete di tutti e cercare qualcosa mostrando in rosso. Il che indicherebbe che una risorsa non viene caricata. Stai cercando un modulo simile a questo "/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png".

Suppongo che il plug-in datatable sia inizializzato e che stai vedendo tutto ciò che ti aspetteresti?

Si potrebbe voler guardare questo http://debug.datatables.net/ che è un bookmarklet che aiuta a eseguire il debug di questo plugin.

Answer 2

Ogni volta che ho avuto questo problema con DataTables deriva da un errore javascript.
Inoltre, si potrebbe provare ad aggiungere

"bSort": true, 

Answer 3

Ho avuto questo problema e ci ho messo un'ora per scoprire che non ero il collegamento a un foglio di stile richiesto. Nel mio caso, ho avuto:

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

ma ho anche bisogno di aggiungere:

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

per le icone di ordinamento di presentarsi. Questa è probabilmente una soluzione di bootstrap, ma se stai riscontrando questo problema, puoi assicurarti di avere i fogli di stile corretti collegati.

Answer 4

Ho avuto questo problema, ho trovato perché avevo copiato lo script CDN sul mio computer locale non stava facendo riferimento alle immagini correttamente come @ Matt2012 ha sottolineato. Quindi la mia soluzione è stata quella di aggiornare il file CSS per cercare quelle immagini in cui voglio metterle, dopo averle salvate anche io.

vedere questa parte:

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

Answer 5

ho risolto il problema avvolgendo il testo dell'intestazione tabella in un <div>:

<th><div>Date</div></th> 

Answer 6

ho avuto il problema troppo. Basta usare il proprio configuratore per impostare tutte le opzioni che si desidera formare qui https://datatables.net/download/ genereranno esattamente i file .js e .css necessari. È quindi possibile scaricare o utilizzare il proprio CDN ospitato per entrambi i file