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
|
<?xml version="1.0" encoding="UTF-8" ?>
<dt-api group="columns">
<name>columns().every()</name>
<summary>Iterate over each selected column, with the function context set to be the column in question.</summary>
<since>1.10.6</since>
<type type="function">
<signature>columns().every( fn )</signature>
<description>Iterate over each selected columns</description>
<parameter type="function" name="fn">
Function to execute for every column selected. The function's content is set to be an API instance for the column in question.
As of DataTables 1.10.8 the function is passed the following parameters:
1. Column index
2. Table loop counter
3. Column loop counter
4. Undefined (present only for consistency)
No return value is expected or acted upon.
</parameter>
<returns type="DataTables.Api">DataTables API instance of the selected columns.</returns>
</type>
<description>
A typical operation with the DataTable API is to perform an operation on a collection of columns - a common action is performed on each column, adding event handlers, updating data, etc. This iteration of the columns can be performed a number of ways in DataTables, each with its own advantages:
* `dt-api columns().every()`
* `dt-api iterator()`
* `dt-api each()`
This `dt-api columns().every()` method is likely to be the most useful in the majority of cases as it sets the context of the callback function to be the `dt-api column()` instance for the column in question (normally a callback in the DataTables API has its context set to be at the top level API hierarchy). In simple terms this means you have the methods such as `dt-api column().data()` available as `this.data()` in the callback given to this method.
Consider the following example using `dt-api each()`, which iterates over the column indexes that have been selected - we are required to get the `dt-api column()` object for each column to be able to work with it directly:
```js
table.columns().eq(0).each( function ( index ) {
var column = table.column( index );
var data = column.data();
// ... do something with data(), or column.nodes(), etc
} );
```
Using `dt-api columns().every()` this can be rewritten as:
```js
table.columns().every( function () {
var data = this.data();
// ... do something with data(), or this.nodes(), etc
} );
```
Although a relatively simple optimisation in terms of code presentation, it can make the code much more readable and intuitive.
The other advantage is that the table context is automatically handled - in the first example above where `dt-api each()` is used, the `dt-api eq()` method is used to select the information from the first table in the API's context only, introducing complexity if multiple tables are used. In `dt-api columns().every()` the table context is automatically set to the appropriate table for each column that has been selected.
</description>
<example title="Add a filter for each column in the table to the footer"><![CDATA[
var table = $('#example').DataTable();
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
} );
} );
]]></example>
<example title="Build a search for each column with a `select-filter` class."><![CDATA[
var table = $('#example').DataTable();
table.columns( '.select-filter' ).every( function () {
var that = this;
// Create the select list and search operation
var select = $('<select />')
.appendTo(
this.footer()
)
.on( 'change', function () {
that
.search( $(this).val() )
.draw();
} );
// Get the search data for the first column and add to the select list
this
.cache( 'search' )
.sort()
.unique()
.each( function ( d ) {
select.append( $('<option value="'+d+'">'+d+'</option>') );
} );
} );
]]></example>
<example title="Sum all columns which have a class of `.sum` and put the sum into its footer cell"><![CDATA[
var table = $('#example').DataTable();
table.columns( '.sum' ).every( function () {
var sum = this
.data()
.reduce( function (a,b) {
return a + b;
} );
$(el).html( 'Sum: '+sum );
} );
]]></example>
<related type="api">cells().every()</related>
<related type="api">each()</related>
<related type="api">iterator()</related>
<related type="api">rows().every()</related>
</dt-api>
|
