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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
<?xml version="1.0" encoding="UTF-8" ?>
<dt-type group="dt">
<name>cell-selector</name>
<summary>Selector options for cells.</summary>
<description>
< that operates on the `dt-tag td` and `dt-tag th` elements in the table's `dt-tag tbody`. For full information about the options available for jQuery selectors, please refer to the [jQuery selector documentation](http://api.jquery.com/category/selectors/).
Note that just like jQuery selector, is it possible to supply multiple selectors using comma separated notation (i.e. just separate by a comma) when the selector is provided as a string.
###### Get data from a single cell by id:
```js
var table = $('#example').DataTable();
var data = table.cell('#cell-2-42').data();
```
###### Select cells by class name:
```js
var table = $('#example').DataTable();
var cells = table.cells('.priority');
```
###### Select cells by two class name selectors:
```js
var table = $('#example').DataTable();
var cells = table.cells('.important, .intermediate');
```
## node
`dt-tag td` and `dt-tag th` DOM elements can be given as a cell selector to select a cell in the DataTabels API from that DOM element. This can be useful for getting data from a cell directly, or performing other cell based operations, when you have only the DOM node for reference, for example in an event handler.
###### Get the data for a cell that was clicked upon:
```js
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'td', function () {
var cellData = table.cell( this ).data();
// ... do something with `cellData`
} );
```
## Function
< # Version requirement
<
< Using a function as a cell selector requires DataTables 1.10.3 or newer.
For complete control over which cells are selected, it is possible to provide a function with logic you've defined to perform the selection. That logic can be as simple or as complex as you wish, performing the selection by simply returning `true` if the cell should be included in the selected results and `false` if not.
That can be particularly useful for finding cells based on the data they contain, or based on properties of the cell node.
The function receives three parameters:
1. Cell index - see `dt-api cell().index()`
2. Cell data - see `dt-api cell().data()`. Note that this is the original data for the cell, not the rendered data if you are using `dt-init columns.render`
3. Cell node - see `dt-api cell().node()`. Note that this may be `null` if you are using `dt-init deferRender`.
The function is called once for every cell that can be selected, based on the `dt-type selector-modifier` options, which also defines the order of the cells for the called function.
###### Get the nodes for all cells that contain `1`:
```js
var table = $('#example').DataTable();
var ones = table
.cells( function ( idx, data, node ) {
return data == 1 ?
true : false;
} )
.nodes();
// Add a class to the cells
ones.to$().addClass('highlight');
```
## jQuery
Very similar to the above `node` type (since a jQuery object is an _array-like_ list of DOM nodes), a jQuery instance can be given as a cell selector, with any nodes which are selected by jQuery and match those available in the table's `dt-tag tbody` selected.
###### Get data from cells in a jQuery instance:
```js
var cells = $('td.immediate');
var table = $('#example').DataTable();
var cellData = table.cells( cells ).data();
## Object
Similar to the `dt-type row-selector` and `dt-type column-selector`, `dt-type cell-selector` can also use indexes to select individual cells, but in this case an object is used which has `row` and `column` properties, each of which is set to the row and column index, respectively, for the cell to be selected.
Although not particularly useful as a primary selector method, this can be very useful for selecting individual cells based on a `dt-api cells()` call - see the example below.
###### Loop over all cells, adding a class if the data for the cell is greater than a given value.
```js
table.cells().every( function () {
if ( this.data() > 10 ) {
$(this.node()).addClass( 'important' );
}
} );
```
## array
Any combination of the above options can be given as selector together, providing a method to select multiple cells, or to mix selector types, by simply providing the selector options you want in an array.
###### Get the data for two cells, based on id:
```js
var table = $('#example').DataTable();
var data = table.cells( ['#cell-1-42', '#cell-1-91'] ).data();
```
###### Mix `cell-selector` types - id and class selector
```js
var table = $('#example').DataTable();
var data = table.cells( ['#cell-1-42', '.important'] ).data();
```
]]>
</description>
</dt-type>
|
