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