jquery - propiedades - datatables responsive

jQuery dataTables-alinear a la izquierda el icono ordenar

Question

Como puede ver, los íconos de clasificación en mi Datatable están en el extremo derecho de la columna:

¿Es posible alinearlos a la izquierda para que aparezcan justo después del texto?

es decir.

# ^ Technician ^ Completed Date ^

Gracias

Código según lo solicitado:

 <div class="dataTable_wrapper">
<table class="table table-striped table-hover" id="table-d">
<thead>
<tr>
<th>{% trans %} id {% endtrans %}</th>
<th>{% trans %} technician {% endtrans %}</th>
<th>{% trans %} date {% endtrans %}</th>
<th>{% trans %} summary {% endtrans %}</th>
</tr>
</thead>
</table>
</div>

Y:

$(''#table-d'').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "{{ path(''table_data'') }}",
"pageLength": 10
})''

Answer 1

Aquí está la respuesta ordenada y simple.

para mi pantalla 160px izquierda es suficiente.

Ajústelo según su necesidad.

 #table-d thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after
{
left: 160px;
right: 0;
}

Answer 2

Hay una muy buena solución publicada en el foro de DataTables .

Answer 3

He logrado hacer esto aplicando los siguientes estilos (mejor si se aplica ya que la última definición de archivo incluye css)

/**
* Datatables Sorting icons on left
*/
table.dataTable thead > tr > th {
padding-left: 30px !important;
padding-right: initial !important;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
left: 8px !important;
right: auto !important;
}

Answer 4

No, eso no es posible aparecer justo después del texto, ya que las flechas son de hecho imágenes de fondo en clases CSS vinculadas dinámicamente a las <th> . Pero puedes cambiar la posición de extrema derecha a izquierda:

table.dataTable thead .sorting_asc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
}
table.dataTable thead .sorting_desc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
}
table.dataTable thead .sorting {
background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
}

demo -> http://jsfiddle.net/ttcz5odt/

Actualización: cómo colocar iconos de flecha directamente después del texto.

Le he dado algunos pensamientos adicionales: con un pequeño "truco" es posible. El truco es deshabilitar los fondos <th> e inyectar / eliminar continuamente <span> con los fondos de las tablas de datos originales.

CSS (además de desactivar el original):

span.arrow-hack {
margin-left: 5px;
}
span.asc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center right;
}
span.desc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center right;
}
span.sort {
background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center right;
}

guión:

var spanSorting = ''<span class="arrow-hack sort">&nbsp;&nbsp;&nbsp;</span>'',
spanAsc = ''<span class="arrow-hack asc">&nbsp;&nbsp;&nbsp;</span>'',
spanDesc = ''<span class="arrow-hack desc">&nbsp;&nbsp;&nbsp;</span>'';
$("#example").on(''click'', ''th'', function() {
$("#example thead th").each(function(i, th) {
$(th).find(''.arrow-hack'').remove();
var html = $(th).html(),
cls = $(th).attr(''class'');
switch (cls) {
case ''sorting_asc'' :
$(th).html(html+spanAsc); break;
case ''sorting_desc'' :
$(th).html(html+spanDesc); break;
default :
$(th).html(html+spanSorting); break;
}
});
}); 

actualizar los iconos de flecha:

$("#example th").first().click().click();

¡Ahora parece lo que queríamos! :

demostración -> http://jsfiddle.net/dmn4q141/

Answer 5

Puedes cambiar css como:

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-position: left center;
}

A continuación css para hacer flecha y dirección más atractiva. (no es necesario)

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-position: 5px center;
}
table.dataTable thead th, table.dataTable thead td {
padding: 10px 18px 10px 28px;
}