columns.createdCell
Cell created callback to allow DOM manipulation.
Description
This is a callback function that is executed whenever a cell is created (Ajax source, etc) or read from a DOM source. It can be used as a complement to columns.render allowing modification of the cell's DOM element (add background colour for example) when the element is created (cells may not be immediately created on table initialisation if deferRender is enabled, or if rows are dynamically added using the API (rows.add()).
This is the counterpart callback for rows, which use the createdRow option.
Type
function createdCell( cell, cellData, rowData, rowIndex, colIndex )
- Parameters:
Name Type Optional 1 cellNo The
TDnode that has been created2 cellDataAnyNo Cell data. If you use
columns.renderto modify the data, use$(cell).html()to get and modify the rendered data. The information given here is the original and unmodified data from the data source.3 rowDataAnyNo Data source object / array for the whole row
4 rowIndexNo DataTables' internal index for the row
5 colIndexNo DataTables' internal index for the column
Example
Using createdCell manipulate the DOM with columnDefs:
new DataTable('#myTable', {
columnDefs: [
{
targets: 3,
createdCell: function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).css('color', 'red');
}
}
}
]
});Related
The following options are directly related and may also be useful in your application development.