Mercurial > repos > saskia-hiltemann > ireport_devel

comparison DataTables-1.9.4/docs/DataTable.defaults.columns.html @ 0:3c160414da2e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initial upload
author shiltemann
date Thu, 26 Feb 2015 14:05:23 +0100
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:3c160414da2e
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5 <title>Namespace: columns - documentation</title>
6
7 <style type="text/css" media="screen">
8 @import "media/css/doc.css";
9 @import "media/css/shCore.css";
10 @import "media/css/shThemeDataTables.css";
11 </style>
12
13 <script type="text/javascript" src="media/js/shCore.js"></script>
14 <script type="text/javascript" src="media/js/shBrushJScript.js"></script>
15 <script type="text/javascript" src="media/js/jquery.js"></script>
16 <script type="text/javascript" src="media/js/doc.js"></script>
17 </head>
18 <body>
19 <div class="fw_container">
20
21 <a name="top"></a>
22 <div class="fw_header">
23 <h1 class="page-title">Namespace: columns</h1>
24 <h2 class="ancestors">Ancestry: <span class="ancestors"><a href="DataTable.html">DataTable</a> » <a href="DataTable.defaults.html">.defaults</a>.</span> » columns</h2>
25 <div class="page-info">
26 DataTables v1.9.4 documentation
27 </div>
28 </div>
29
30
31
32 <div class="fw_nav">
33 <h2>Navigation</h2>
34 <ul>
35 <li><a href="#top">Overview</a></li>
36 <li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (21)</a></td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (21)</a></td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
37 <div style="margin-top: 10px;">
38 <input type="hidden" name="show_private" value="0">
39 <span id="private_label">Hiding</span> private elements
40 (<a id="private_toggle" href="">toggle</a>)
41 </span>
42 </div>
43 <div>
44 <input type="hidden" name="show_extended" value="1">
45 <span id="extended_label">Showing</span> extended elements
46 (<a id="extended_toggle" href="">toggle</a>)
47 </span>
48 </div>
49 </div>
50
51 <div class="fw_content">
52 <a name="overview"></a>
53 <div class="doc_overview">
54 <div class="nav_blocker"></div>
55 <p>Column options that can be given to DataTables at initialisation time.</p><dl class="details">
56
57 </dl>
58
59 </div>
60
61
62 <div class="doc_summary">
63 <a name="summary"></a>
64 <h2>Summary</h2>
65
66 <div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
67
68 <dl>
69 <dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aDataSort">aDataSort</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Allows a column's sorting to take multiple columns into account when
70 doing a sort. For example first name / last name columns make sense to
71 do a multi-column sort over the two columns.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#asSorting">asSorting</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>You can control the default sorting direction, and even alter the behaviour
72 of the sort handler (i.e. only allow ascending sorting etc) using this
73 parameter.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSearchable">bSearchable</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable filtering on the data in this column.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSortable">bSortable</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable sorting on this column.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bUseRendered">bUseRendered</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p><code>Deprecated</code> When using fnRender() for a column, you may wish
74 to use the original data (before rendering) for sorting and filtering
75 (the default is to used the rendered data that the user can see). This
76 may be useful for dates etc. [<a href-"#bUseRendered">...</a>] </p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bVisible">bVisible</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable the display of this column.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnCreatedCell">fnCreatedCell</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>Developer definable function that is called whenever a cell is created (Ajax source,
77 etc) or processed for input (DOM source). This can be used as a compliment to mRender
78 allowing you to modify the DOM element (add background colour for example) when the
79 element is available.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnRender">fnRender</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p><code>Deprecated</code> Custom display function that will be called for the
80 display of each cell in this column. [<a href-"#fnRender">...</a>] </p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iDataSort">iDataSort</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" even"><p>The column index (starting from 0!) that you wish a sort to be performed
81 upon when this column is selected for sorting. This can be used for sorting
82 on hidden columns for example.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#mData">mData</a></span><span class="type-sig"><span class="type-signature"> :string|int|function|null</span></span></dt><dd class=" odd"><p>This property can be used to read data from any JSON data source property,
83 including deeply nested objects / properties. mData can be given in a
84 number of different ways which effect its behaviour:
85 <ul>
86 <li>integer - treated as an array index for the data source. This is the
87 default that DataTables uses (incrementally increased for each column).</li>
88 <li>string - read an object property from the data source. Note that you can
89 use Javascript dotted notation to read deep properties / arrays from the
90 data source.</li>
91 <li>null - the sDefaultContent option will be used for the cell (null
92 by default, so you will need to specify the default content you want -
93 typically an empty string). This can be useful on generated columns such
94 as edit / delete action columns.</li>
95 <li>function - the function given will be executed whenever DataTables
96 needs to set or get the data for a cell in the column. The function
97 takes three parameters:
98 <ul>
99 <li>{array|object} The data source for the row</li>
100 <li>{string} The type call data requested - this will be 'set' when
101 setting data or 'filter', 'display', 'type', 'sort' or undefined when
102 gathering data. Note that when <i>undefined</i> is given for the type
103 DataTables expects to get the raw data for the object back</li>
104 <li>{*} Data to set when the second parameter is 'set'.</li>
105 </ul>
106 The return value from the function is not required when 'set' is the type
107 of call, but otherwise the return is what will be used for the data
108 requested.</li>
109 </ul> [<a href-"#mData">...</a>] </p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#mDataProp">mDataProp</a></span><span class="type-sig"><span class="type-signature"></span></span></dt><dd class=" even"><p>This parameter has been replaced by mData in DataTables to ensure naming
110 consistency. mDataProp can still be used, as there is backwards compatibility
111 in DataTables for this option, but it is strongly recommended that you use
112 mData in preference to mDataProp.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#mRender">mRender</a></span><span class="type-sig"><span class="type-signature"> :string|int|function|null</span></span></dt><dd class=" odd"><p>This property is the rendering partner to mData and it is suggested that
113 when you want to manipulate data for display (including filtering, sorting etc)
114 but not altering the underlying data for the table, use this property. mData
115 can actually do everything this property can and more, but this parameter is
116 easier to use since there is no 'set' option. Like mData is can be given
117 in a number of different ways to effect its behaviour, with the addition of
118 supporting array syntax for easy outputting of arrays (including arrays of
119 objects):
120 <ul>
121 <li>integer - treated as an array index for the data source. This is the
122 default that DataTables uses (incrementally increased for each column).</li>
123 <li>string - read an object property from the data source. Note that you can
124 use Javascript dotted notation to read deep properties / arrays from the
125 data source and also array brackets to indicate that the data reader should
126 loop over the data source array. When characters are given between the array
127 brackets, these characters are used to join the data source array together.
128 For example: "accounts[, ].name" would result in a comma separated list with
129 the 'name' value from the 'accounts' array of objects.</li>
130 <li>function - the function given will be executed whenever DataTables
131 needs to set or get the data for a cell in the column. The function
132 takes three parameters:
133 <ul>
134 <li>{array|object} The data source for the row (based on mData)</li>
135 <li>{string} The type call data requested - this will be 'filter', 'display',
136 'type' or 'sort'.</li>
137 <li>{array|object} The full data source for the row (not based on mData)</li>
138 </ul>
139 The return value from the function is what will be used for the data
140 requested.</li>
141 </ul></p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sCellType">sCellType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Change the cell type created for the column - either TD cells or TH cells. This
142 can be useful as TH cells have semantic meaning in the table body, allowing them
143 to act as a header for a row (you may wish to add scope='row' to the TH elements).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sClass">sClass</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Class to give to each cell in this column.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sContentPadding">sContentPadding</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>When DataTables calculates the column widths to assign to each column,
144 it finds the longest string in each column and then constructs a
145 temporary table and reads the widths from that. The problem with this
146 is that "mmm" is much wider then "iiii", but the latter is a longer
147 string - thus the calculation can go wrong (doing it properly and putting
148 it into an DOM object and measuring that is horribly(!) slow). Thus as
149 a "work around" we provide this option. It will append its value to the
150 text that is found to be the longest string for the column - i.e. padding.
151 Generally you shouldn't need this, and it is not documented on the
152 general DataTables.net documentation</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sDefaultContent">sDefaultContent</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Allows a default value to be given for a column's data, and will be used
153 whenever a null data source is encountered (this can be because mData
154 is set to null, or because the data source itself is null).</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sName">sName</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>This parameter is only used in DataTables' server-side processing. It can
155 be exceptionally useful to know what columns are being displayed on the
156 client side, and to map these to database fields. When defined, the names
157 also allow DataTables to reorder information from the server if it comes
158 back in an unexpected order (i.e. if you switch your columns around on the
159 client-side, your server-side code does not also need updating).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sSortDataType">sSortDataType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Defines a data source type for the sorting which can be used to read
160 real-time information from the table (updating the internally cached
161 version) prior to sorting. This allows sorting to occur on user editable
162 elements such as form inputs.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sTitle">sTitle</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>The title of this column.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sType">sType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>The type allows you to specify how the data for this column will be sorted.
163 Four types (string, numeric, date and html (which will strip HTML tags
164 before sorting)) are currently available. Note that only date formats
165 understood by Javascript's Date() object will be accepted as type date. For
166 example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric',
167 'date' or 'html' (by default). Further types can be adding through
168 plug-ins.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sWidth">sWidth</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Defining the width of the column, this parameter may take any CSS value
169 (3em, 20px etc). DataTables apples 'smart' widths to columns which have not
170 been given a specific width through this interface ensuring that the table
171 remains readable.</p></dd>
172 </dl></div>
173 </div>
174
175
176
177
178 <div class="doc_details">
179 <a name="details"></a>
180 <h2>Details</h2>
181 <div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
182 <dl>
183 <dt class=" even"><a name="aDataSort"></a><a name="aDataSort_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aDataSort">aDataSort</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Allows a column's sorting to take multiple columns into account when
184 doing a sort. For example first name / last name columns make sense to
185 do a multi-column sort over the two columns.</p><div class="collapse_details"><dl class="details">
186
187 </dl>
188 <h5>Examples</h5>
189 <div class="example-code">
190 <pre class="brush: js"> // Using aoColumnDefs
191 $(document).ready( function() {
192 $('#example').dataTable( {
193 "aoColumnDefs": [
194 { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },
195 { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },
196 { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }
197 ]
198 } );
199 } );
200
201 </pre>
202 </div>
203
204 <div class="example-code">
205 <pre class="brush: js"> // Using aoColumns
206 $(document).ready( function() {
207 $('#example').dataTable( {
208 "aoColumns": [
209 { "aDataSort": [ 0, 1 ] },
210 { "aDataSort": [ 1, 0 ] },
211 { "aDataSort": [ 2, 3, 4 ] },
212 null,
213 null
214 ]
215 } );
216 } );</pre>
217 </div>
218 </div></dd><dt class=" odd"><a name="asSorting"></a><a name="asSorting_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#asSorting">asSorting</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>You can control the default sorting direction, and even alter the behaviour
219 of the sort handler (i.e. only allow ascending sorting etc) using this
220 parameter.</p><div class="collapse_details"><dl class="details">
221
222 </dl>
223 <h5>Examples</h5>
224 <div class="example-code">
225 <pre class="brush: js"> // Using aoColumnDefs
226 $(document).ready( function() {
227 $('#example').dataTable( {
228 "aoColumnDefs": [
229 { "asSorting": [ "asc" ], "aTargets": [ 1 ] },
230 { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },
231 { "asSorting": [ "desc" ], "aTargets": [ 3 ] }
232 ]
233 } );
234 } );
235
236 </pre>
237 </div>
238
239 <div class="example-code">
240 <pre class="brush: js"> // Using aoColumns
241 $(document).ready( function() {
242 $('#example').dataTable( {
243 "aoColumns": [
244 null,
245 { "asSorting": [ "asc" ] },
246 { "asSorting": [ "desc", "asc", "asc" ] },
247 { "asSorting": [ "desc" ] },
248 null
249 ]
250 } );
251 } );</pre>
252 </div>
253 </div></dd><dt class=" even"><a name="bSearchable"></a><a name="bSearchable_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSearchable">bSearchable</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable filtering on the data in this column.</p><div class="collapse_details"><dl class="details">
254
255 </dl>
256 <h5>Examples</h5>
257 <div class="example-code">
258 <pre class="brush: js"> // Using aoColumnDefs
259 $(document).ready( function() {
260 $('#example').dataTable( {
261 "aoColumnDefs": [
262 { "bSearchable": false, "aTargets": [ 0 ] }
263 ] } );
264 } );
265
266 </pre>
267 </div>
268
269 <div class="example-code">
270 <pre class="brush: js"> // Using aoColumns
271 $(document).ready( function() {
272 $('#example').dataTable( {
273 "aoColumns": [
274 { "bSearchable": false },
275 null,
276 null,
277 null,
278 null
279 ] } );
280 } );</pre>
281 </div>
282 </div></dd><dt class=" odd"><a name="bSortable"></a><a name="bSortable_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSortable">bSortable</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable sorting on this column.</p><div class="collapse_details"><dl class="details">
283
284 </dl>
285 <h5>Examples</h5>
286 <div class="example-code">
287 <pre class="brush: js"> // Using aoColumnDefs
288 $(document).ready( function() {
289 $('#example').dataTable( {
290 "aoColumnDefs": [
291 { "bSortable": false, "aTargets": [ 0 ] }
292 ] } );
293 } );
294
295 </pre>
296 </div>
297
298 <div class="example-code">
299 <pre class="brush: js"> // Using aoColumns
300 $(document).ready( function() {
301 $('#example').dataTable( {
302 "aoColumns": [
303 { "bSortable": false },
304 null,
305 null,
306 null,
307 null
308 ] } );
309 } );</pre>
310 </div>
311 </div></dd><dt class=" even"><a name="bUseRendered"></a><a name="bUseRendered_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bUseRendered">bUseRendered</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p><code>Deprecated</code> When using fnRender() for a column, you may wish
312 to use the original data (before rendering) for sorting and filtering
313 (the default is to used the rendered data that the user can see). This
314 may be useful for dates etc.</p>
315
316 <p>Please note that this option has now been deprecated and will be removed
317 in the next version of DataTables. Please use mRender / mData rather than
318 fnRender.</p><div class="collapse_details"><dl class="details">
319 <dt class="important">Deprecated</dt><dd class="yes-def">Yes</dd>
320 </dl>
321 </div></dd><dt class=" odd"><a name="bVisible"></a><a name="bVisible_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bVisible">bVisible</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable the display of this column.</p><div class="collapse_details"><dl class="details">
322
323 </dl>
324 <h5>Examples</h5>
325 <div class="example-code">
326 <pre class="brush: js"> // Using aoColumnDefs
327 $(document).ready( function() {
328 $('#example').dataTable( {
329 "aoColumnDefs": [
330 { "bVisible": false, "aTargets": [ 0 ] }
331 ] } );
332 } );
333
334 </pre>
335 </div>
336
337 <div class="example-code">
338 <pre class="brush: js"> // Using aoColumns
339 $(document).ready( function() {
340 $('#example').dataTable( {
341 "aoColumns": [
342 { "bVisible": false },
343 null,
344 null,
345 null,
346 null
347 ] } );
348 } );</pre>
349 </div>
350 </div></dd><dt id="DataTable.defaults.columns.fnCreatedCell" class=" even"><a name="fnCreatedCell"></a><a name="fnCreatedCell_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnCreatedCell</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>Developer definable function that is called whenever a cell is created (Ajax source,
351 etc) or processed for input (DOM source). This can be used as a compliment to mRender
352 allowing you to modify the DOM element (add background colour for example) when the
353 element is available.</p><div class="collapse_details"><dl class="details">
354
355 </dl>
356 <h5>Parameters:</h5>
357
358 <table class="params">
359 <thead>
360 <tr>
361 <th width="20"></th>
362 <th width="12%" class="bottom_border name">Name</th>
363 <th width="10%" class="bottom_border">Type</th>
364 <th width="10%" class="bottom_border">Attributes</th>
365 <th width="10%" class="bottom_border">Default</th>
366 <th class="last bottom_border">Description</th>
367 </tr>
368 </thead>
369
370 <tbody>
371 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTd</td><td class="type type-param">element</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The TD node that has been created</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">sData</td><td class="type type-param">*</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The Data for the cell</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">oData</td><td class="type type-param">array | object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The data for the whole row</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">iRow</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The row index for the aoData data store</p></td></tr><tr class="even"><td class="number right_border"><div>5</div></td><td class="name">iCol</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The column index for aoColumns</p></td></tr>
372 </tbody>
373 </table><h5>Example:</h5>
374 <div class="example-code">
375 <pre class="brush: js"> $(document).ready( function() {
376 $('#example').dataTable( {
377 "aoColumnDefs": [ {
378 "aTargets": [3],
379 "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
380 if ( sData == "1.7" ) {
381 $(nTd).css('color', 'blue')
382 }
383 }
384 } ]
385 });
386 } );</pre>
387 </div>
388 </div>
389 <dt id="DataTable.defaults.columns.fnRender" class=" odd"><a name="fnRender"></a><a name="fnRender_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnRender</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p><code>Deprecated</code> Custom display function that will be called for the
390 display of each cell in this column.</p>
391
392 <p>Please note that this option has now been deprecated and will be removed
393 in the next version of DataTables. Please use mRender / mData rather than
394 fnRender.</p><div class="collapse_details"><dl class="details">
395 <dt class="important">Deprecated</dt><dd class="yes-def">Yes</dd>
396 </dl>
397 <h5>Parameters:</h5>
398
399 <table class="params">
400 <thead>
401 <tr>
402 <th width="20"></th>
403 <th width="12%" class="bottom_border name">Name</th>
404 <th width="10%" class="bottom_border">Type</th>
405 <th width="10%" class="bottom_border">Attributes</th>
406 <th width="10%" class="bottom_border">Default</th>
407 <th class="last bottom_border">Description</th>
408 </tr>
409 </thead>
410
411 <tbody>
412 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Object with the following parameters:</p></td></tr><tr><td class="number right_border"></td><td class="name">o.iDataRow</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The row in aoData</p></td></tr><tr><td class="number right_border"></td><td class="name">o.iDataColumn</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The column in question</p></td></tr><tr><td class="number right_border"></td><td class="name">o.aData</td><td class="type type-param">array</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The data for the row in question</p></td></tr><tr><td class="number right_border"></td><td class="name">o.oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The settings object for this DataTables instance</p></td></tr><tr><td class="number right_border"></td><td class="name">o.mDataProp</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The data property used for this column</p></td></tr><tr class="even"><td class="number right_border"><div>7</div></td><td class="name">val</td><td class="type type-param">*</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The current cell value</p></td></tr>
413 </tbody>
414 </table><h5>Returns:</h5><p class="returns"><p>The string you which to use in the display</p></p></div>
415 <dt class=" even"><a name="iDataSort"></a><a name="iDataSort_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iDataSort">iDataSort</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" even"><p>The column index (starting from 0!) that you wish a sort to be performed
416 upon when this column is selected for sorting. This can be used for sorting
417 on hidden columns for example.</p><div class="collapse_details"><dl class="details">
418
419 </dl>
420 <h5>Examples</h5>
421 <div class="example-code">
422 <pre class="brush: js"> // Using aoColumnDefs
423 $(document).ready( function() {
424 $('#example').dataTable( {
425 "aoColumnDefs": [
426 { "iDataSort": 1, "aTargets": [ 0 ] }
427 ]
428 } );
429 } );
430
431 </pre>
432 </div>
433
434 <div class="example-code">
435 <pre class="brush: js"> // Using aoColumns
436 $(document).ready( function() {
437 $('#example').dataTable( {
438 "aoColumns": [
439 { "iDataSort": 1 },
440 null,
441 null,
442 null,
443 null
444 ]
445 } );
446 } );</pre>
447 </div>
448 </div></dd><dt class=" odd"><a name="mData"></a><a name="mData_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#mData">mData</a></span><span class="type-sig"><span class="type-signature"> :string|int|function|null</span></span></dt><dd class=" odd"><p>This property can be used to read data from any JSON data source property,
449 including deeply nested objects / properties. mData can be given in a
450 number of different ways which effect its behaviour:
451 <ul>
452 <li>integer - treated as an array index for the data source. This is the
453 default that DataTables uses (incrementally increased for each column).</li>
454 <li>string - read an object property from the data source. Note that you can
455 use Javascript dotted notation to read deep properties / arrays from the
456 data source.</li>
457 <li>null - the sDefaultContent option will be used for the cell (null
458 by default, so you will need to specify the default content you want -
459 typically an empty string). This can be useful on generated columns such
460 as edit / delete action columns.</li>
461 <li>function - the function given will be executed whenever DataTables
462 needs to set or get the data for a cell in the column. The function
463 takes three parameters:
464 <ul>
465 <li>{array|object} The data source for the row</li>
466 <li>{string} The type call data requested - this will be 'set' when
467 setting data or 'filter', 'display', 'type', 'sort' or undefined when
468 gathering data. Note that when <i>undefined</i> is given for the type
469 DataTables expects to get the raw data for the object back</li>
470 <li>{*} Data to set when the second parameter is 'set'.</li>
471 </ul>
472 The return value from the function is not required when 'set' is the type
473 of call, but otherwise the return is what will be used for the data
474 requested.</li>
475 </ul></p>
476
477 <p>Note that prior to DataTables 1.9.2 mData was called mDataProp. The name change
478 reflects the flexibility of this property and is consistent with the naming of
479 mRender. If 'mDataProp' is given, then it will still be used by DataTables, as
480 it automatically maps the old name to the new if required.</p><div class="collapse_details"><dl class="details">
481
482 </dl>
483 <h5>Examples</h5>
484 <div class="example-code">
485 <pre class="brush: js"> // Read table data from objects
486 $(document).ready( function() {
487 var oTable = $('#example').dataTable( {
488 "sAjaxSource": "sources/deep.txt",
489 "aoColumns": [
490 { "mData": "engine" },
491 { "mData": "browser" },
492 { "mData": "platform.inner" },
493 { "mData": "platform.details.0" },
494 { "mData": "platform.details.1" }
495 ]
496 } );
497 } );
498
499 </pre>
500 </div>
501
502 <div class="example-code">
503 <pre class="brush: js"> // Using mData as a function to provide different information for
504 // sorting, filtering and display. In this case, currency (price)
505 $(document).ready( function() {
506 var oTable = $('#example').dataTable( {
507 "aoColumnDefs": [ {
508 "aTargets": [ 0 ],
509 "mData": function ( source, type, val ) {
510 if (type === 'set') {
511 source.price = val;
512 // Store the computed dislay and filter values for efficiency
513 source.price_display = val=="" ? "" : "$"+numberFormat(val);
514 source.price_filter = val=="" ? "" : "$"+numberFormat(val)+" "+val;
515 return;
516 }
517 else if (type === 'display') {
518 return source.price_display;
519 }
520 else if (type === 'filter') {
521 return source.price_filter;
522 }
523 // 'sort', 'type' and undefined all just use the integer
524 return source.price;
525 }
526 } ]
527 } );
528 } );</pre>
529 </div>
530 </div></dd><dt class=" even"><a name="mDataProp"></a><a name="mDataProp_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#mDataProp">mDataProp</a></span><span class="type-sig"><span class="type-signature"></span></span></dt><dd class=" even"><p>This parameter has been replaced by mData in DataTables to ensure naming
531 consistency. mDataProp can still be used, as there is backwards compatibility
532 in DataTables for this option, but it is strongly recommended that you use
533 mData in preference to mDataProp.</p><div class="collapse_details"><dl class="details">
534
535 </dl>
536 </div></dd><dt class=" odd"><a name="mRender"></a><a name="mRender_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#mRender">mRender</a></span><span class="type-sig"><span class="type-signature"> :string|int|function|null</span></span></dt><dd class=" odd"><p>This property is the rendering partner to mData and it is suggested that
537 when you want to manipulate data for display (including filtering, sorting etc)
538 but not altering the underlying data for the table, use this property. mData
539 can actually do everything this property can and more, but this parameter is
540 easier to use since there is no 'set' option. Like mData is can be given
541 in a number of different ways to effect its behaviour, with the addition of
542 supporting array syntax for easy outputting of arrays (including arrays of
543 objects):
544 <ul>
545 <li>integer - treated as an array index for the data source. This is the
546 default that DataTables uses (incrementally increased for each column).</li>
547 <li>string - read an object property from the data source. Note that you can
548 use Javascript dotted notation to read deep properties / arrays from the
549 data source and also array brackets to indicate that the data reader should
550 loop over the data source array. When characters are given between the array
551 brackets, these characters are used to join the data source array together.
552 For example: "accounts[, ].name" would result in a comma separated list with
553 the 'name' value from the 'accounts' array of objects.</li>
554 <li>function - the function given will be executed whenever DataTables
555 needs to set or get the data for a cell in the column. The function
556 takes three parameters:
557 <ul>
558 <li>{array|object} The data source for the row (based on mData)</li>
559 <li>{string} The type call data requested - this will be 'filter', 'display',
560 'type' or 'sort'.</li>
561 <li>{array|object} The full data source for the row (not based on mData)</li>
562 </ul>
563 The return value from the function is what will be used for the data
564 requested.</li>
565 </ul></p><div class="collapse_details"><dl class="details">
566
567 </dl>
568 <h5>Examples</h5>
569 <div class="example-code">
570 <pre class="brush: js"> // Create a comma separated list from an array of objects
571 $(document).ready( function() {
572 var oTable = $('#example').dataTable( {
573 "sAjaxSource": "sources/deep.txt",
574 "aoColumns": [
575 { "mData": "engine" },
576 { "mData": "browser" },
577 {
578 "mData": "platform",
579 "mRender": "[, ].name"
580 }
581 ]
582 } );
583 } );
584
585 </pre>
586 </div>
587
588 <div class="example-code">
589 <pre class="brush: js"> // Use as a function to create a link from the data source
590 $(document).ready( function() {
591 var oTable = $('#example').dataTable( {
592 "aoColumnDefs": [
593 {
594 "aTargets": [ 0 ],
595 "mData": "download_link",
596 "mRender": function ( data, type, full ) {
597 return '<a href="'+data+'">Download</a>';
598 }
599 ]
600 } );
601 } );</pre>
602 </div>
603 </div></dd><dt class=" even"><a name="sCellType"></a><a name="sCellType_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sCellType">sCellType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Change the cell type created for the column - either TD cells or TH cells. This
604 can be useful as TH cells have semantic meaning in the table body, allowing them
605 to act as a header for a row (you may wish to add scope='row' to the TH elements).</p><div class="collapse_details"><dl class="details">
606
607 </dl>
608 <h5>Example</h5>
609 <div class="example-code">
610 <pre class="brush: js"> // Make the first column use TH cells
611 $(document).ready( function() {
612 var oTable = $('#example').dataTable( {
613 "aoColumnDefs": [ {
614 "aTargets": [ 0 ],
615 "sCellType": "th"
616 } ]
617 } );
618 } );</pre>
619 </div>
620 </div></dd><dt class=" odd"><a name="sClass"></a><a name="sClass_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sClass">sClass</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Class to give to each cell in this column.</p><div class="collapse_details"><dl class="details">
621
622 </dl>
623 <h5>Examples</h5>
624 <div class="example-code">
625 <pre class="brush: js"> // Using aoColumnDefs
626 $(document).ready( function() {
627 $('#example').dataTable( {
628 "aoColumnDefs": [
629 { "sClass": "my_class", "aTargets": [ 0 ] }
630 ]
631 } );
632 } );
633
634 </pre>
635 </div>
636
637 <div class="example-code">
638 <pre class="brush: js"> // Using aoColumns
639 $(document).ready( function() {
640 $('#example').dataTable( {
641 "aoColumns": [
642 { "sClass": "my_class" },
643 null,
644 null,
645 null,
646 null
647 ]
648 } );
649 } );</pre>
650 </div>
651 </div></dd><dt class=" even"><a name="sContentPadding"></a><a name="sContentPadding_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sContentPadding">sContentPadding</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>When DataTables calculates the column widths to assign to each column,
652 it finds the longest string in each column and then constructs a
653 temporary table and reads the widths from that. The problem with this
654 is that "mmm" is much wider then "iiii", but the latter is a longer
655 string - thus the calculation can go wrong (doing it properly and putting
656 it into an DOM object and measuring that is horribly(!) slow). Thus as
657 a "work around" we provide this option. It will append its value to the
658 text that is found to be the longest string for the column - i.e. padding.
659 Generally you shouldn't need this, and it is not documented on the
660 general DataTables.net documentation</p><div class="collapse_details"><dl class="details">
661
662 </dl>
663 <h5>Example</h5>
664 <div class="example-code">
665 <pre class="brush: js"> // Using aoColumns
666 $(document).ready( function() {
667 $('#example').dataTable( {
668 "aoColumns": [
669 null,
670 null,
671 null,
672 {
673 "sContentPadding": "mmm"
674 }
675 ]
676 } );
677 } );</pre>
678 </div>
679 </div></dd><dt class=" odd"><a name="sDefaultContent"></a><a name="sDefaultContent_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sDefaultContent">sDefaultContent</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Allows a default value to be given for a column's data, and will be used
680 whenever a null data source is encountered (this can be because mData
681 is set to null, or because the data source itself is null).</p><div class="collapse_details"><dl class="details">
682
683 </dl>
684 <h5>Examples</h5>
685 <div class="example-code">
686 <pre class="brush: js"> // Using aoColumnDefs
687 $(document).ready( function() {
688 $('#example').dataTable( {
689 "aoColumnDefs": [
690 {
691 "mData": null,
692 "sDefaultContent": "Edit",
693 "aTargets": [ -1 ]
694 }
695 ]
696 } );
697 } );
698
699 </pre>
700 </div>
701
702 <div class="example-code">
703 <pre class="brush: js"> // Using aoColumns
704 $(document).ready( function() {
705 $('#example').dataTable( {
706 "aoColumns": [
707 null,
708 null,
709 null,
710 {
711 "mData": null,
712 "sDefaultContent": "Edit"
713 }
714 ]
715 } );
716 } );</pre>
717 </div>
718 </div></dd><dt class=" even"><a name="sName"></a><a name="sName_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sName">sName</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>This parameter is only used in DataTables' server-side processing. It can
719 be exceptionally useful to know what columns are being displayed on the
720 client side, and to map these to database fields. When defined, the names
721 also allow DataTables to reorder information from the server if it comes
722 back in an unexpected order (i.e. if you switch your columns around on the
723 client-side, your server-side code does not also need updating).</p><div class="collapse_details"><dl class="details">
724
725 </dl>
726 <h5>Examples</h5>
727 <div class="example-code">
728 <pre class="brush: js"> // Using aoColumnDefs
729 $(document).ready( function() {
730 $('#example').dataTable( {
731 "aoColumnDefs": [
732 { "sName": "engine", "aTargets": [ 0 ] },
733 { "sName": "browser", "aTargets": [ 1 ] },
734 { "sName": "platform", "aTargets": [ 2 ] },
735 { "sName": "version", "aTargets": [ 3 ] },
736 { "sName": "grade", "aTargets": [ 4 ] }
737 ]
738 } );
739 } );
740
741 </pre>
742 </div>
743
744 <div class="example-code">
745 <pre class="brush: js"> // Using aoColumns
746 $(document).ready( function() {
747 $('#example').dataTable( {
748 "aoColumns": [
749 { "sName": "engine" },
750 { "sName": "browser" },
751 { "sName": "platform" },
752 { "sName": "version" },
753 { "sName": "grade" }
754 ]
755 } );
756 } );</pre>
757 </div>
758 </div></dd><dt class=" odd"><a name="sSortDataType"></a><a name="sSortDataType_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sSortDataType">sSortDataType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Defines a data source type for the sorting which can be used to read
759 real-time information from the table (updating the internally cached
760 version) prior to sorting. This allows sorting to occur on user editable
761 elements such as form inputs.</p><div class="collapse_details"><dl class="details">
762
763 </dl>
764 <h5>Examples</h5>
765 <div class="example-code">
766 <pre class="brush: js"> // Using aoColumnDefs
767 $(document).ready( function() {
768 $('#example').dataTable( {
769 "aoColumnDefs": [
770 { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },
771 { "sType": "numeric", "aTargets": [ 3 ] },
772 { "sSortDataType": "dom-select", "aTargets": [ 4 ] },
773 { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }
774 ]
775 } );
776 } );
777
778 </pre>
779 </div>
780
781 <div class="example-code">
782 <pre class="brush: js"> // Using aoColumns
783 $(document).ready( function() {
784 $('#example').dataTable( {
785 "aoColumns": [
786 null,
787 null,
788 { "sSortDataType": "dom-text" },
789 { "sSortDataType": "dom-text", "sType": "numeric" },
790 { "sSortDataType": "dom-select" },
791 { "sSortDataType": "dom-checkbox" }
792 ]
793 } );
794 } );</pre>
795 </div>
796 </div></dd><dt class=" even"><a name="sTitle"></a><a name="sTitle_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sTitle">sTitle</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>The title of this column.</p><div class="collapse_details"><dl class="details">
797
798 </dl>
799 <h5>Examples</h5>
800 <div class="example-code">
801 <pre class="brush: js"> // Using aoColumnDefs
802 $(document).ready( function() {
803 $('#example').dataTable( {
804 "aoColumnDefs": [
805 { "sTitle": "My column title", "aTargets": [ 0 ] }
806 ]
807 } );
808 } );
809
810 </pre>
811 </div>
812
813 <div class="example-code">
814 <pre class="brush: js"> // Using aoColumns
815 $(document).ready( function() {
816 $('#example').dataTable( {
817 "aoColumns": [
818 { "sTitle": "My column title" },
819 null,
820 null,
821 null,
822 null
823 ]
824 } );
825 } );</pre>
826 </div>
827 </div></dd><dt class=" odd"><a name="sType"></a><a name="sType_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sType">sType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>The type allows you to specify how the data for this column will be sorted.
828 Four types (string, numeric, date and html (which will strip HTML tags
829 before sorting)) are currently available. Note that only date formats
830 understood by Javascript's Date() object will be accepted as type date. For
831 example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric',
832 'date' or 'html' (by default). Further types can be adding through
833 plug-ins.</p><div class="collapse_details"><dl class="details">
834
835 </dl>
836 <h5>Examples</h5>
837 <div class="example-code">
838 <pre class="brush: js"> // Using aoColumnDefs
839 $(document).ready( function() {
840 $('#example').dataTable( {
841 "aoColumnDefs": [
842 { "sType": "html", "aTargets": [ 0 ] }
843 ]
844 } );
845 } );
846
847 </pre>
848 </div>
849
850 <div class="example-code">
851 <pre class="brush: js"> // Using aoColumns
852 $(document).ready( function() {
853 $('#example').dataTable( {
854 "aoColumns": [
855 { "sType": "html" },
856 null,
857 null,
858 null,
859 null
860 ]
861 } );
862 } );</pre>
863 </div>
864 </div></dd><dt class=" even"><a name="sWidth"></a><a name="sWidth_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sWidth">sWidth</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Defining the width of the column, this parameter may take any CSS value
865 (3em, 20px etc). DataTables apples 'smart' widths to columns which have not
866 been given a specific width through this interface ensuring that the table
867 remains readable.</p><div class="collapse_details"><dl class="details">
868
869 </dl>
870 <h5>Examples</h5>
871 <div class="example-code">
872 <pre class="brush: js"> // Using aoColumnDefs
873 $(document).ready( function() {
874 $('#example').dataTable( {
875 "aoColumnDefs": [
876 { "sWidth": "20%", "aTargets": [ 0 ] }
877 ]
878 } );
879 } );
880
881 </pre>
882 </div>
883
884 <div class="example-code">
885 <pre class="brush: js"> // Using aoColumns
886 $(document).ready( function() {
887 $('#example').dataTable( {
888 "aoColumns": [
889 { "sWidth": "20%" },
890 null,
891 null,
892 null,
893 null
894 ]
895 } );
896 } );</pre>
897 </div>
898 </div></dd>
899 </dl></div>
900 </div>
901
902 </div>
903
904 <div class="fw_footer">
905 DataTables: Copyright 2008-2012 Allan Jardine, all rights reserved<br>
906
907 Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
908 23th Sep 2012 - 14:27
909 with the <a href="http://datatables.net/">DataTables</a> template.
910 </div>
911 </body>
912 </html>