DataTables: cómo configurar clases para celdas de fila de tabla (¡pero no para celdas de encabezado de tabla!)

Question

tengo un estilo realmente agradable para mis tablas.

{enlaces siento no más de trabajo}

he tenido que añadir Sclass para que las nuevas filas (agregadas por fnAddData) reciben las clases correctas.

Desafortunadamente eso arruina mi diseño, ¡porque estas clases también se agregan a mis celdas de encabezado de tabla!

{enlaces siento no más de trabajo}

¿Cómo puedo configurar Sclass aplicar sólo para las células TBODY?

Para aclarar:

var rolesTable = $('#roles').dataTable({ 
     "aoColumns": [ 
     { "mDataProp": "id", "sClass": "avo-lime-h avo-heading-white" }, 
     { "mDataProp": "name", "sClass": "avo-light" }, 
     { "mDataProp": "module", "sClass": "avo-light" }, 
     { "mDataProp": "description", "sClass": "avo-light" }, 
     { "mDataProp": null, "bSearchable": false, "bSortable": false, 
      "sDefaultContent": '<button type="button" name="add" class="btn"><i class="icon-plus icon-white"></i></button>' }, 
     ], 
    }); // end od dataTable 

De esta manera cuando llamo

rolesTable.fnAddData({ 
    "id": 10, 
    "name": "testname", 
    "module": "testmodule", 
    "description": "testdescription" 
}); 

entonces la fila añadida es así:

<tr> 
    <td class="avo-lime-h avo-heading-white">10</td> 
    <td class="avo-light">testname</td> 
    <td class="avo-light">testmodule</td> 
    <td class="avo-light">testdescription</td> 
    <td></td> 
</tr> 

y que es perfectamente OK

** ** el problema es que este ajuste también se suma a estas clases:

<thead> 
    <tr> (...) </tr> 
</thead> 

células cabeza mesa ... lo que no quiero

Answer 1

solución a mi problema era: utilizando fnRowCallback en lugar de sClass para establecer clases en nuevas filas.

var rolesTable = $('#roles').dataTable({ 
     "aoColumns": [ 
     { "mDataProp": "id" }, 
     { "mDataProp": "name" }, 
     { "mDataProp": "module" }, 
     { "mDataProp": "description" }, 
     { "mDataProp": null, "bSearchable": false, "bSortable": false, 
      "sDefaultContent": '<button type="button" name="add" class="btn btn-round"><i class="icon-plus icon-white"></i></button>' }, 
     ], 
     "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
      $('td:eq(0)', nRow).addClass("avo-lime-h avo-heading-white"); 
      $('td:eq(1),td:eq(2),td:eq(3)', nRow).addClass("avo-light"); 
     } 
    }); // end od dataTable 

Answer 2

Establezca antes las clases predeterminadas.

$.fn.dataTableExt.oStdClasses.sStripeOdd = ''; 

$.fn.dataTableExt.oStdClasses.sStripeEven = ''; 

Para más referencias ver aquí http://www.datatables.net/styling/custom_classes

Answer 3

Dado que sólo está utilizando Sclass a aplicar un estilo a la mesa de la simple solución a su problema consiste en modificar el CSS sí a aplicarse únicamente a los elementos td.

viejo estilo CSS:

.avo-light { 
    color: blue; 
} 

nuevo estilo CSS:

td.avo-light { 
    color: blue; 
} 

De esta manera la CSS solo tendrá efecto en las células de su interés en aplicar el estilo a pesar de Sclass siendo aplicada a th elementos también.

Me doy cuenta de que esta pregunta es un poco antigua, pero me parece mucho más modular que la mejor solución.

Answer 4

let table = $("#myTable").dataTable(); 
    table.rows().every(function(rowIdx, tableLoop, rowLoop){ 
    $(this.node().cells[0]).addClass('red'); 
    $(this.node().cells[1]).addClass('blue'); 
    } 

Después de que se pronuncie la mesa, iterar a través de todas las filas con el selector de JavaScript de cada fila y hacer los cambios que desea. Esto aborda las preocupaciones de rendimiento planteadas por gamliela en la respuesta de Loostr. DataTables rows().every() documentation