jQuery dataTable no muestra el icono de ordenar

Question

Estoy tratando de usar un plugin jQuery dataTable. El problema es que el ícono de ordenación (esta flecha, que indica en qué dirección los datos están realmente clasificados) no se visualiza.

Mi código es el siguiente:

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

y 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

tablas de datos utiliza un sprite para los iconos que desea usar Firebug en Firefox, haga clic en la red que todos, y buscar cualquier cosa apareciendo en rojo. Lo que indicaría que un activo no se está cargando. Estás buscando algo como esto "/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png".

Supongo que el plugin datatable se está inicializando y está viendo todo lo demás que podría esperar.

Es posible que desee mirar este http://debug.datatables.net/ que es un bookmarklet que ayuda a depurar este complemento.

Answer 2

Cada vez que he tenido ese problema con dataTables se trata de un error de javascript.
También, usted podría intentar agregar

"bSort": true, 

Answer 3

he tenido este problema y me tomó una hora para descubrir que no estaba ligando a una hoja de estilo requerido. En mi caso, tuve:

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

pero también necesitaba añadir:

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

para ordenar los iconos en aparecer. Es probable que sea una solución solo de arranque, pero si tiene este problema, puede asegurarse de que tenga las hojas de estilo correctas.

Answer 4

Tuve este problema, encontré porque había copiado el script de CDN en mi máquina local y ya no hacía referencia a las imágenes correctamente, como señaló @ Matt2012. Así que mi solución fue actualizar el archivo CSS para buscar las imágenes donde quiero ponerlas, después de que las guardé también.

Ver esta 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

He arreglado el problema envolviendo el texto encabezado de la tabla en un <div>:

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

Answer 6

que tenían el problema también. Simplemente use su propio configurador para configurar todas las opciones que desee desde https://datatables.net/download/ que generarán exactamente los archivos .js y .css que necesite. Puede descargar o usar su propio CDN alojado para ambos archivos