examples - ¿El plugin jQuery dataTables respeta los colores alternativos de fila después de clasificar/filtrar?

jquery table example

Question

Estoy usando el plugin jquery datatables que parece un plugin útil para tomar una tabla html regular y agregar clasificación, filtrado, paginación, etc.

Un problema que veo es que cuando busco no parece actualizar las clases de filas "impares" / "pares", así que si mi tabla tiene 100 filas, pero cuando filmo tiene 10, es posible que las 10 sean del mismo color. o 8 son del mismo color de fondo

Veo el mismo problema después de ordenar por una columna también donde podría agrupar un montón de filas con el mismo color de fondo después de ordenar por una columna.

¿Hay alguna forma de que el complemento de tablas de datos pueda volver a aplicar el estilo par / impar después del filtro así que no importa lo que esté filtrando, siempre hay un color de fondo alternativo?

Answer 1

Para archivar esto, debe usar el estilo Base - no hay datatable estilo para la datatable de datatable para hacer esto, simplemente elimine las clases de table tag table

Después de esto, crea tus propias clases para odd myodd odd (ej. myodd ) e even (por ejemplo, myeven ).

ahora la siguiente tarea es aplicar estas clases a las filas de la tabla en cada dibujo de tabla significa:

1. Cuando se aplican los filtros

2. Cuando el límite de los registros visibles se cambia, etc.

Para hacer esto, datatabe proporciona rowCallback() puede usar esto de esta manera:

 $(''#myTabel'').dataTable({
        "rowCallback": function( row, data, index ) {
            if(index%2 == 0){
                $(row).removeClass(''myodd myeven'');
                $(row).addClass(''myodd'');
            }else{
                $(row).removeClass(''myodd myeven'');
                 $(row).addClass(''myeven'');
            }
          }
    });

Tenga en cuenta:

Para evitarlo !important en la css rule defina la css rule para odd filas odd y even como esta:

table.dataTable tbody tr.myeven{
    background-color:#f2dede;
}
table.dataTable tbody tr.myodd{
    background-color:#bce8f1;
}

DEMO: http://jsfiddle.net/ishandemon/4za80xky/

Answer 2

PORQUE

Esta funcionalidad está disponible por defecto. Muy probablemente el motivo de este comportamiento inusual:

• anulas odd clases odd e odd en tu CSS, o
• su código afecta la estructura de la tabla después de filtrar

SOLUCIÓN # 1

1. Estilo predeterminado o jQuery UI o Foundation

   Utilice la display clase para su <table> como se muestra a continuación. Consulte Opciones de estilo predeterminadas para obtener una lista de todas las clases disponibles.

   <table id="example" class="display" cellspacing="0" width="100%">   

   Vea este jsFiddle para la demostración.

2. Oreja

   Utilice la table table-striped table-bordered clases table table-striped table-bordered de table table-striped table-bordered para su <table> como se muestra a continuación:

   <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

   Vea este jsFiddle para la demostración.

SOLUCIÓN # 2

Si hay una regla de CSS que anula odd clases odd y even , puede indicarle a jQuery DataTables que use clases alternativas en lugar de la opción stripeClasses .

$(''#example'').DataTable( {
  "stripeClasses": [ ''odd-row'', ''even-row'' ]
} );

Answer 3

Mi este comentario es aplicable para saber cómo ELIMINAR o MODIFICAR las clases de filas de Jquery Datatable

Las tablas de datos ahora proporcionan un parámetro json opcional nombrado como se define para su documentación 1.10+ .

por lo tanto, si desea eliminar por completo las clases pares impares , utilice el siguiente parámetro durante la inicialización de las tablas.

$(''#example'').dataTable( {
  "stripeClasses": [] //Empty Array.
} );

por lo tanto, si desea aplicar una clase de CSS personalizada en cada fila de tablas de datos, entonces.

$(''#example'').dataTable( {
  "stripeClasses": [''yourRowClass'']
} );

Si desea aplicar más de 1 clase de CSS (de manera impar o secuencial) de modo que estas clases se repitan una vez que se completa cada enésima fila, utilice este

$(''#example'').dataTable( {
  "stripeClasses": [ ''strip1'', ''strip2'', ''strip3'' ] //This combination will repeat always 3rd row
} );

DataTables aplicará cada clase secuencialmente, haciendo bucles cuando sea necesario.

Answer 4

Sé que esto es viejo, pero tuve que ampliar la solución anterior. Le estoy permitiendo al usuario ajustar el color de la banda, así que tuve que hacer:

rowCallback: (row, data, index) => {
  const stripeColor = this.options.stripeColor;

  if (index % 2 == 0) {
    $(row).removeClass(''odd-row even-row'');
    $(row).addClass(''odd-row'');

    if (!!this.options.stripe) {
      $(row).css({ background: ''transparent'' })
    }
  } else {

    $(row).removeClass(''odd-row even-row'');
    $(row).addClass(''even-row'');

    if (!!this.options.stripe) {
      $(row).css({ background: stripeColor })
    }
  }
},