Assegnazione di classi personalizzate a ciascun TD per lo stile - Datatables & jQuery

Question

Sto utilizzando datatables per visualizzare i dati lato server nelle tabelle.

Tuttavia, non è possibile selezionare e assegnare uno stile alle singole celle (<TD>). Cerco un po 'e l'ho trovato potrebbe essere possibile con:

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

... ma io non sono del tutto sicuro di come, perché ho un tavolo pochi e non tutti hanno lo stesso numero di colonne e righe. Voglio dare una classe comune a tutti TDs di una 'colonna'.

Answer 1

È possibile utilizzare il parametro sClass in Definizione colonne. Ad esempio, se si dispone di 3 colonne e vuole passare classe personalizzata per la seconda e terza colonna, è possibile:

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

È possibile controllare datatables documentation

Answer 2

Per coloro che pensano che questa domanda durante la ricerca di fnRowCallback e vogliono aggiungere lo styling in base al contenuto delle cellule piuttosto che utilizzare classi CSS statici, utilizzando il fnRowCallback farà il trucco:

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

Spero che questo può essere utile per un futuro visitatore :-)

Answer 3

È possibile utilizzare columnDefs per definire le classi per ogni colonna.

Esempio in CoffeeScript:

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

Questo è usare nuovo 1.10+ API.

Answer 4

Se si vuole indirizzare la riga o una singola cella in un callback:

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

non ero in grado di ottenere il parametro 'createdCells' di lavorare in modo doveva farlo attraverso la fila.

Answer 5

Ecco come farlo utilizzando createdCell, utilizzando DataTables 1.10+ syntax. Il vantaggio di questo approccio è che puoi condizionare le celle in modo condizionale.

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