|
0
|
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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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> |
