example - jQuery/DataTables: eliminar flechas de clasificación

jquery datatable header title

Question

Estoy usando el plugin jQuery DataTables .

¿Hay alguna forma de deshacerme de las pequeñas flechas que aparecen en los encabezados para indicar las opciones de clasificación? Me gustaría mantener la funcionalidad que al hacer clic en el encabezado que ordena por esta columna, no quiero mostrar los íconos de flecha ya que cambian el diseño de los encabezados de mis columnas.

Firebug muestra mis encabezados de la siguiente manera:

<th class="sorting" role="columnheader" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" style="width: 151px;" aria-label="Category: activate to sort column ascending">Category</th>

Muchas gracias por cualquier ayuda con esto, Tim.

Answer 1

(Desde DataTables 1.10 ) Si no lo necesita, deshabilitar el pedido es una forma de evitar que aparezcan los controles de flecha. Haga esto en la inicialización de la tabla especificando la opción "ordenando" como falso .

Ejemplo :

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

JSFiddle

Documentation:

Habilitar o deshabilitar el orden de las columnas - ¡es tan simple como eso!

Advertencia: no hay clasificación en absoluto.

Otra alternativa es deshabilitar el pedido en todas las columnas. Luego, puede establecer el orden programáticamente con las flechas de control que solo se muestran en las columnas ordenadas :

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

JSFiddle

Answer 2

Añade este estilo a tu página

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

Answer 3

Clases CSS sorting_asc y sorting_desc trae el ícono.

La solución más sencilla para localizar una solución para una tabla específica es que, una vez que se haya inicializado la tabla, en fnInitComplete, haga lo siguiente:

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

Answer 4

Ejemplo:

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

Esto hará que la columna se pueda ordenar sin mostrar las flechas.

Answer 5

En la última versión de datos / CDN es diferente

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

Oculta los filtros.

Saludos

Answer 6

En mi caso esto funcionó bien.

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

Answer 7

Esto es lo que funcionó para mí.

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

Answer 8

Esto funcionó para mí.

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

Answer 9

Esto te permitirá cambiar los iconos de clasificación predeterminados de los iconos personalizados, que obtuve de la publicación de Irshad anterior y la publicación de Suschil desde here . Tenía que hacer esto debido a los navegadores con la fuente deshabilitada, que estaba fuera de nuestro control.

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

Answer 10

Hay otra solución para ocultar los íconos de clasificación de una columna, aplicar una clase css al encabezado, digamos,

<th class="sorting_disabled"></th>

y definir la clase css en estilo

.sorting_disabled
{
background-image:none !important;
}

Esta solución funcionó y se probó para la versión 1.10+ de jquery datatable

Answer 11

Las flechas tienen ciertas clases asociadas con ellos. Puedes usar el siguiente CSS para ocultar esos elementos.

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

Answer 12

Los iconos se definen como background : url(..) en las clases de CSS. Deshabilítalos por:

.sorting, .sorting_asc, .sorting_desc {
background : none;
}

vea jsfiddle -> http://jsfiddle.net/5V2Dx/ Nota: ¡Esta solución es para datatables 1.9.x!

Actualizar Cuando se usan las tablas de datos 1.10.x, el CSS para restablecer los iconos de encabezado es un poco diferente:

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

vea -> http://jsfiddle.net/kqpv3ub9/ (la demostración actualizada está usando dataTables 1.10.11 )

Answer 13

Ninguna de las soluciones presentadas funcionó para mí. Pero acabo de encontrar este;

.dataTable > thead > tr > th[class*="sort"]:after{
content: "" !important;
}

PS .: Versión de DataTables "datatables": "~1.10.2"

Answer 14

Para DataTables 1.10.7 una pequeña variante para el estilo css:

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

Incluir el elemento "th".

Answer 15

Para la nueva versión de DataTables:

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

Answer 16

Poner debajo de CSS. Solo ocultará el ícono, sin embargo la ordenación funcionará.

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

Answer 17

Puede usar las propiedades de datos como a continuación, ocultará el ícono de clasificación de las columnas de datos:

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

Answer 18

También puede eliminar las imágenes de los iconos (en lugar de agregar un nuevo CSS), en la carpeta:

DataTables-1.10.16/images

Answer 19

Todo esto parece un poco complicado, ¿por qué no usar el atributo data-sortable="false" en la etiqueta <th> y luego hacer un removeAttribute("class"); en JS con un disparador de click ?

Answer 20

Truco rápido (esto ocultará un botón de clasificación, pero la función aún funciona): - Crear CSS:

.no-sort::after { display: none!important; }
.no-sort { pointer-events: none!important; cursor: default!important; }

• Luego agregue esto en el encabezado de su tabla:

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

De todos modos, aquí está la respuesta larga, puede usar este fragmento de código para deshabilitar la función de clasificación de la columna en particular (base-idx: 0), ASÍ COMO para eliminar un botón de clasificación:

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

Pero esto no funcionará perfectamente si establece ordenable como falso en la primera columna. La función de clasificación se detendrá, pero el botón todavía está allí. Porque, de forma predeterminada, la primera columna se estableció en orden ascendente (''orden'': [[0, ''asc'']). Para deshabilitar este ''molesto'' predeterminado, agregue una opción más: "orden":

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

Answer 21

Usando CSS:

.DataTables_sort_icon { display:none;}

Answer 22

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