1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="columns">
<name>columns.createdCell</name>
<summary>Cell created callback to allow DOM manipulation</summary>
<since>1.10</since>
<type type="function">
<signature>createdCell( cell, cellData, rowData, rowIndex, colIndex )</signature>
<parameter type="node" name="cell">
The `tag TD` node that has been created
</parameter>
<parameter type="*" name="cellData">
Cell data. If you use `dt-init columns.render` to 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.
</parameter>
<parameter type="*" name="rowData">
Data source object / array for the whole row
</parameter>
<parameter type="integer" name="rowIndex">
DataTables' internal index for the row
</parameter>
<parameter type="integer" name="colIndex">
DataTables' internal index for the column
</parameter>
<scope>HTML table element</scope>
</type>
<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 `dt-init 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 `dt-init deferRender` is enabled, or if rows are dynamically added using the API (`dt-api rows.add()`).
This is the counterpart callback for rows, which use the `dt-init createdRow` option.
</description>
<example title="Using `createdCell` manipulate the DOM with `dt-init columnDefs`"><![CDATA[
$('#example').dataTable( {
"columnDefs": [ {
"targets": 3,
"createdCell": function (td, cellData, rowData, row, col) {
if ( cellData < 1 ) {
$(td).css('color', 'red')
}
}
} ]
} );
]]></example>
<related type="option">createdRow</related>
<related type="option">deferRender</related>
</dt-option>
|
