propiedades - ¿Qué determina el color de la fila en los estilos de tablas de datos jquery?
datatables style bootstrap (2)
Ajá ... Encontré la respuesta. en el documento html original de la tabla del servidor, las filas tienen su clase establecida de forma diferente dependiendo de qué datos hay en la última columna, por ejemplo:
<tr class="gradeC">
Luego puede ver el html resultante después de que la función datatable () hace su trabajo. Agrega par o impar a la cadena de clase. me gusta
<tr class="gradeC odd">
Cuando ordena una columna, la función de clasificación agregará un "sorting_1" a la cadena de clase en las celdas de esa columna.
Todos los colores se establecen en el archivo css de esta manera:
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DataTables row classes
*/
table.display tr.odd.gradeA { background-color: #ddffdd; }
table.display tr.even.gradeA { background-color: #eeffee; }
table.display tr.odd.gradeA { background-color: #ddffdd; }
table.display tr.even.gradeA { background-color: #eeffee; }
table.display tr.odd.gradeC { background-color: #ddddff; }
table.display tr.even.gradeC { background-color: #eeeeff; }
table.display tr.odd.gradeX { background-color: #ffdddd; }
table.display tr.even.gradeX { background-color: #ffeeee; }
table.display tr.odd.gradeU { background-color: #ddd; }
table.display tr.even.gradeU { background-color: #eee; }
tr.odd { background-color: #E2E4FF; }
tr.even { background-color: white; }
tr.odd.gradeA td.sorting_1 { background-color: #c4ffc4; }
tr.odd.gradeA td.sorting_2 { background-color: #d1ffd1; }
tr.odd.gradeA td.sorting_3 { background-color: #d1ffd1; }
tr.even.gradeA td.sorting_1 { background-color: #d5ffd5; }
tr.even.gradeA td.sorting_2 { background-color: #e2ffe2; }
tr.even.gradeA td.sorting_3 { background-color: #e2ffe2; }
tr.odd.gradeC td.sorting_1 { background-color: #c4c4ff; }
tr.odd.gradeC td.sorting_2 { background-color: #d1d1ff; }
tr.odd.gradeC td.sorting_3 { background-color: #d1d1ff; }
tr.even.gradeC td.sorting_1 { background-color: #d5d5ff; }
tr.even.gradeC td.sorting_2 { background-color: #e2e2ff; }
tr.even.gradeC td.sorting_3 { background-color: #e2e2ff; }
tr.odd.gradeX td.sorting_1 { background-color: #ffc4c4; }
tr.odd.gradeX td.sorting_2 { background-color: #ffd1d1; }
tr.odd.gradeX td.sorting_3 { background-color: #ffd1d1; }
tr.even.gradeX td.sorting_1 { background-color: #ffd5d5; }
tr.even.gradeX td.sorting_2 { background-color: #ffe2e2; }
tr.even.gradeX td.sorting_3 { background-color: #ffe2e2; }
tr.odd.gradeU td.sorting_1 { background-color: #c4c4c4; }
tr.odd.gradeU td.sorting_2 { background-color: #d1d1d1; }
tr.odd.gradeU td.sorting_3 { background-color: #d1d1d1; }
tr.even.gradeU td.sorting_1 { background-color: #d5d5d5; }
tr.even.gradeU td.sorting_2 { background-color: #e2e2e2; }
tr.even.gradeU td.sorting_3 { background-color: #e2e2e2; }
En los estilos de tabla de datos jquery (aquí suavidad) muestra las filas con un color diferente. ¿Qué determina qué colores se muestran en cada fila? ¿Y cómo puedo cambiar esto? Vea el ejemplo a continuación de sus ejemplos en el paquete de descarga.
En este caso, los colores específicos se están aplicando utilizando las siguientes clases. gradeA , gradeB gradeA , gradeB gradeC , etc. No estoy seguro de si se generaron dinámicamente de alguna manera y si usaron jQuery Theme Roller. Supongo que utilizaron el rodillo temático para generar los estilos. De todos modos ... todo lo que tendría que hacer es usar las opciones de clases personalizadas para agregar clases a su mesa.
Vea aquí: https://datatables.net/styling/custom_classes
Y a partir de ahí, deberías ser capaz de hacer algo como esto:
oTable = $(''#example'').dataTable( {
"aoColumns" : [
{ sClass: "myCustomClass" }
]});
-y-
table.display tr.even.myCustomClass { background-color: #ffdddd; }
table.display tr.odd.myCustomClass { background-color: #ffeeee; }
Aquí hay una pregunta algo similar:
Dando clases personalizadas a cada TD para diseñar - Datatables & jQuery
Y aquí hay uno con filtros: