javascript - llenar - Dando clases personalizadas a cada TD para diseñar-Datatables & jQuery

llenar datatable con json

Question

Estoy usando datatables para mostrar datos del lado del servidor en tablas.

Sin embargo, no puedo apuntar y diseñar células individuales ( <TD> ). Busco un poco y descubrí que podría ser posible con:

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
....
}

... pero no estoy muy seguro de cómo porque tengo algunas tablas y no todas tienen la misma cantidad de columnas y filas. Quiero dar clase común a todos los TDs de una ''columna''.

Answer 1

Aquí le mostramos cómo hacerlo usando createdCell , usando la sintaxis DataTables 1.10+ . El beneficio de este enfoque es que puede aplicar un estilo condicional a las celdas.

"columnDefs": [
{
"targets": [16],
"createdCell": function(td, cellData, rowData, row, col) {
switch(cellData) {
case "Pending":
$(td).addClass(''pending'');
break;
case "Rejected":
$(td).addClass(''rejected'');
break;
case "Approved":
$(td).addClass(''approved'');
break;
case "SAP":
$(td).addClass(''sap'');
break;
case "Reconciled":
$(td).addClass(''reconciled'');
break;
}
}
}
],

Answer 2

Para aquellos que encontraron esta pregunta al buscar fnRowCallback y desean agregar un estilo basado en el contenido de la celda en lugar de usar clases de CSS estáticas, usar fnRowCallback hará el truco:

oTable = $(''#matrix'').dataTable({
...
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
for (var i in aData) {
// Check if a cell contains data in the following format:
// ''[state] content''
if (aData[i].substring(0,1)==''['') {
// remove the state part from the content and use the given state as CSS class
var stateName= aData[i].substring(1,aData[i].indexOf('']''));
var content= aData[i].substring(aData[i].indexOf('']'')+1);
$(''td:eq(''+i+'')'', nRow).html(content).addClass(stateName);
}
}
}
});

Espero que esto pueda ser útil para un futuro visitante :-)

Answer 3

Puede usar columnDefs para definir clases para cada columna.

Ejemplo en coffeescript :

$(''table'').dataTable(
columnDefs: [
{
targets: -1 # targets last column, use 0 for first column
className: ''last-column''
}
]
);

Esto está usando la nueva API 1.10+.

Answer 4

Puede usar el parámetro sClass en la definición de Columnas. Por ejemplo, si tiene 3 columnas y desea pasar clases personalizadas para la segunda y tercera columna, puede:

"aoColumns": [
null,
{ "sWidth": "95px", "sClass": "datatables_action" },
{ "sWidth": "45px", "sClass": "datatables_action" }
]

Puede verificar la documentación de tablas de datos

Answer 5

Si desea orientar la fila o una celda individual en una devolución de llamada:

var table = $(''#order-history-table'').DataTable(
{
"ajax": url,
"pageLength": 20,
"createdRow": function( row, data, dataIndex ) {
// Add a class to the cell in the second column
$(row).children('':nth-child(2)'').addClass(''text-justify'');
// Add a class to the row
$(row).addClass(''important'');
}
}
);

No pude hacer funcionar el parámetro ''createdCells'', así que tuve que hacerlo a través de la fila.

Answer 6

var table = $(''#order-history-table'').DataTable(
{
"ajax": url,
"pageLength": 20,
"createdRow": function( row, data, dataIndex ) {
// Add a class to the cell in the second column
$(row).children('':nth-child(2)'').addClass(''text-justify'');
// Add a class to the row
$(row).addClass(''important'');
}
}
);