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: ext - 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: ext</h1>
|
|
24 <h2 class="ancestors">Ancestry: <span class="ancestors"><a href="DataTable.html">DataTable</a> » <a href="DataTable.models.html">.models</a>.</span> » ext</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 (14)</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 (14)</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>DataTables extension options and plug-ins. This namespace acts as a collection "area"
|
|
56 for plug-ins that can be used to extend the default DataTables behaviour - indeed many
|
|
57 of the build in methods use this method to provide their own capabilities (sorting methods
|
|
58 for example).</p>
|
|
59
|
|
60 <p>Note that this namespace is aliased to jQuery.fn.dataTableExt so it can be readily accessed
|
|
61 and modified by plug-ins.</p><dl class="details">
|
|
62
|
|
63 </dl>
|
|
64
|
|
65 </div>
|
|
66
|
|
67
|
|
68 <div class="doc_summary">
|
|
69 <a name="summary"></a>
|
|
70 <h2>Summary</h2>
|
|
71
|
|
72 <div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
|
|
73
|
|
74 <dl>
|
|
75 <dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#afnFiltering">afnFiltering</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Plug-in filtering functions - this method of filtering is complimentary to the default
|
|
76 type based filtering, and a lot more comprehensive as it allows you complete control
|
|
77 over the filtering logic. Each element in this array is a function (parameters
|
|
78 described below) that is called for every row in the table, and your logic decides if
|
|
79 it should be included in the filtered data set or not.
|
|
80 <ul>
|
|
81 <li>
|
|
82 Function input parameters:
|
|
83 <ul>
|
|
84 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
85 <li>{array|object} Data for the row to be processed (same as the original format
|
|
86 that was passed in as the data source, or an array from a DOM data source</li>
|
|
87 <li>{int} Row index in aoData (<a href="DataTable.models.oSettings.html#aoData">DataTable.models.oSettings.aoData</a>), which can
|
|
88 be useful to retrieve the TR element if you need DOM interaction.</li>
|
|
89 </ul>
|
|
90 </li>
|
|
91 <li>
|
|
92 Function return:
|
|
93 <ul>
|
|
94 <li>{boolean} Include the row in the filtered result set (true) or not (false)</li>
|
|
95 </ul>
|
|
96 </il>
|
|
97 </ul></p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#afnSortData">afnSortData</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>Plug-in sorting functions - this method of sorting is complimentary to the default type
|
|
98 based sorting that DataTables does automatically, allowing much greater control over the
|
|
99 the data that is being used to sort a column. This is useful if you want to do sorting
|
|
100 based on live data (for example the contents of an 'input' element) rather than just the
|
|
101 static string that DataTables knows of. The way these plug-ins work is that you create
|
|
102 an array of the values you wish to be sorted for the column in question and then return
|
|
103 that array. Which pre-sorting function is run here depends on the sSortDataType parameter
|
|
104 that is used for the column (if any). This is the corollary of <i>ofnSearch</i> for sort
|
|
105 data.
|
|
106 <ul>
|
|
107 <li>
|
|
108 Function input parameters:
|
|
109 <ul>
|
|
110 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
111 <li>{int} Target column index</li>
|
|
112 </ul>
|
|
113 </li>
|
|
114 <li>
|
|
115 Function return:
|
|
116 <ul>
|
|
117 <li>{array} Data for the column to be sorted upon</li>
|
|
118 </ul>
|
|
119 </il>
|
|
120 </ul> [<a href-"#afnSortData">...</a>] </p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#aoFeatures">aoFeatures</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Feature plug-ins - This is an array of objects which describe the feature plug-ins that are
|
|
121 available to DataTables. These feature plug-ins are accessible through the sDom initialisation
|
|
122 option. As such, each feature plug-in must describe a function that is used to initialise
|
|
123 itself (fnInit), a character so the feature can be enabled by sDom (cFeature) and the name
|
|
124 of the feature (sFeature). Thus the objects attached to this method must provide:
|
|
125 <ul>
|
|
126 <li>{function} fnInit Initialisation of the plug-in
|
|
127 <ul>
|
|
128 <li>
|
|
129 Function input parameters:
|
|
130 <ul>
|
|
131 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
132 </ul>
|
|
133 </li>
|
|
134 <li>
|
|
135 Function return:
|
|
136 <ul>
|
|
137 <li>{node|null} The element which contains your feature. Note that the return
|
|
138 may also be void if your plug-in does not require to inject any DOM elements
|
|
139 into DataTables control (sDom) - for example this might be useful when
|
|
140 developing a plug-in which allows table control via keyboard entry.</li>
|
|
141 </ul>
|
|
142 </il>
|
|
143 </ul>
|
|
144 </li>
|
|
145 <li>{character} cFeature Character that will be matched in sDom - case sensitive</li>
|
|
146 <li>{string} sFeature Feature name</li>
|
|
147 </ul></p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#aTypes">aTypes</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>Type detection plug-in functions - DataTables utilises types to define how sorting and
|
|
148 filtering behave, and types can be either be defined by the developer (sType for the
|
|
149 column) or they can be automatically detected by the methods in this array. The functions
|
|
150 defined in the array are quite simple, taking a single parameter (the data to analyse)
|
|
151 and returning the type if it is a known type, or null otherwise.
|
|
152 <ul>
|
|
153 <li>
|
|
154 Function input parameters:
|
|
155 <ul>
|
|
156 <li>{*} Data from the column cell to be analysed</li>
|
|
157 </ul>
|
|
158 </li>
|
|
159 <li>
|
|
160 Function return:
|
|
161 <ul>
|
|
162 <li>{string|null} Data type detected, or null if unknown (and thus pass it
|
|
163 on to the other type detection functions.</li>
|
|
164 </ul>
|
|
165 </il>
|
|
166 </ul></p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#fnVersionCheck">fnVersionCheck</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>Provide a common method for plug-ins to check the version of DataTables being used,
|
|
167 in order to ensure compatibility.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#iApiIndex">iApiIndex</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" odd"><p>Index for what 'this' index API functions should use</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oApi">oApi</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" even"><p>Container for all private functions in DataTables so they can be exposed externally</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#ofnSearch">ofnSearch</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" odd"><p>Pre-processing of filtering data plug-ins - When you assign the sType for a column
|
|
168 (or have it automatically detected for you by DataTables or a type detection plug-in),
|
|
169 you will typically be using this for custom sorting, but it can also be used to provide
|
|
170 custom filtering by allowing you to pre-processing the data and returning the data in
|
|
171 the format that should be filtered upon. This is done by adding functions this object
|
|
172 with a parameter name which matches the sType for that target column. This is the
|
|
173 corollary of <i>afnSortData</i> for filtering data.
|
|
174 <ul>
|
|
175 <li>
|
|
176 Function input parameters:
|
|
177 <ul>
|
|
178 <li>{*} Data from the column cell to be prepared for filtering</li>
|
|
179 </ul>
|
|
180 </li>
|
|
181 <li>
|
|
182 Function return:
|
|
183 <ul>
|
|
184 <li>{string|null} Formatted string that will be used for the filtering.</li>
|
|
185 </ul>
|
|
186 </il>
|
|
187 </ul> [<a href-"#ofnSearch">...</a>] </p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oJUIClasses">oJUIClasses</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" even"><p>Storage for the various classes that DataTables uses - jQuery UI suitable</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oPagination">oPagination</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" odd"><p>Pagination plug-in methods - The style and controls of the pagination can significantly
|
|
188 impact on how the end user interacts with the data in your table, and DataTables allows
|
|
189 the addition of pagination controls by extending this object, which can then be enabled
|
|
190 through the <i>sPaginationType</i> initialisation parameter. Each pagination type that
|
|
191 is added is an object (the property name of which is what <i>sPaginationType</i> refers
|
|
192 to) that has two properties, both methods that are used by DataTables to update the
|
|
193 control's state.
|
|
194 <ul>
|
|
195 <li>
|
|
196 fnInit - Initialisation of the paging controls. Called only during initialisation
|
|
197 of the table. It is expected that this function will add the required DOM elements
|
|
198 to the page for the paging controls to work. The element pointer
|
|
199 'oSettings.aanFeatures.p' array is provided by DataTables to contain the paging
|
|
200 controls (note that this is a 2D array to allow for multiple instances of each
|
|
201 DataTables DOM element). It is suggested that you add the controls to this element
|
|
202 as children
|
|
203 <ul>
|
|
204 <li>
|
|
205 Function input parameters:
|
|
206 <ul>
|
|
207 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
208 <li>{node} Container into which the pagination controls must be inserted</li>
|
|
209 <li>{function} Draw callback function - whenever the controls cause a page
|
|
210 change, this method must be called to redraw the table.</li>
|
|
211 </ul>
|
|
212 </li>
|
|
213 <li>
|
|
214 Function return:
|
|
215 <ul>
|
|
216 <li>No return required</li>
|
|
217 </ul>
|
|
218 </il>
|
|
219 </ul>
|
|
220 </il>
|
|
221 <li>
|
|
222 fnInit - This function is called whenever the paging status of the table changes and is
|
|
223 typically used to update classes and/or text of the paging controls to reflex the new
|
|
224 status.
|
|
225 <ul>
|
|
226 <li>
|
|
227 Function input parameters:
|
|
228 <ul>
|
|
229 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
230 <li>{function} Draw callback function - in case you need to redraw the table again
|
|
231 or attach new event listeners</li>
|
|
232 </ul>
|
|
233 </li>
|
|
234 <li>
|
|
235 Function return:
|
|
236 <ul>
|
|
237 <li>No return required</li>
|
|
238 </ul>
|
|
239 </il>
|
|
240 </ul>
|
|
241 </il>
|
|
242 </ul></p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oSort">oSort</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" even"><p>Sorting plug-in methods - Sorting in DataTables is based on the detected type of the
|
|
243 data column (you can add your own type detection functions, or override automatic
|
|
244 detection using sType). With this specific type given to the column, DataTables will
|
|
245 apply the required sort from the functions in the object. Each sort type must provide
|
|
246 two mandatory methods, one each for ascending and descending sorting, and can optionally
|
|
247 provide a pre-formatting method that will help speed up sorting by allowing DataTables
|
|
248 to pre-format the sort data only once (rather than every time the actual sort functions
|
|
249 are run). The two sorting functions are typical Javascript sort methods:
|
|
250 <ul>
|
|
251 <li>
|
|
252 Function input parameters:
|
|
253 <ul>
|
|
254 <li>{<em>} Data to compare to the second parameter</li>
|
|
255 <li>{</em>} Data to compare to the first parameter</li>
|
|
256 </ul>
|
|
257 </li>
|
|
258 <li>
|
|
259 Function return:
|
|
260 <ul>
|
|
261 <li>{int} Sorting match: <0 if first parameter should be sorted lower than
|
|
262 the second parameter, ===0 if the two parameters are equal and >0 if
|
|
263 the first parameter should be sorted height than the second parameter.</li>
|
|
264 </ul>
|
|
265 </il>
|
|
266 </ul></p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oStdClasses">oStdClasses</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" odd"><p>Storage for the various classes that DataTables uses</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sErrMode">sErrMode</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>How should DataTables report an error. Can take the value 'alert' or 'throw'</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sVersion">sVersion</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Version string for plug-ins to check compatibility. Allowed format is
|
|
267 a.b.c.d.e where: a:int, b:int, c:int, d:string(dev|beta), e:int. d and
|
|
268 e are optional</p></dd>
|
|
269 </dl></div>
|
|
270 </div>
|
|
271
|
|
272
|
|
273
|
|
274
|
|
275 <div class="doc_details">
|
|
276 <a name="details"></a>
|
|
277 <h2>Details</h2>
|
|
278 <div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
|
|
279 <dl>
|
|
280 <dt class=" even"><a name="afnFiltering"></a><a name="afnFiltering_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#afnFiltering">afnFiltering</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Plug-in filtering functions - this method of filtering is complimentary to the default
|
|
281 type based filtering, and a lot more comprehensive as it allows you complete control
|
|
282 over the filtering logic. Each element in this array is a function (parameters
|
|
283 described below) that is called for every row in the table, and your logic decides if
|
|
284 it should be included in the filtered data set or not.
|
|
285 <ul>
|
|
286 <li>
|
|
287 Function input parameters:
|
|
288 <ul>
|
|
289 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
290 <li>{array|object} Data for the row to be processed (same as the original format
|
|
291 that was passed in as the data source, or an array from a DOM data source</li>
|
|
292 <li>{int} Row index in aoData (<a href="DataTable.models.oSettings.html#aoData">DataTable.models.oSettings.aoData</a>), which can
|
|
293 be useful to retrieve the TR element if you need DOM interaction.</li>
|
|
294 </ul>
|
|
295 </li>
|
|
296 <li>
|
|
297 Function return:
|
|
298 <ul>
|
|
299 <li>{boolean} Include the row in the filtered result set (true) or not (false)</li>
|
|
300 </ul>
|
|
301 </il>
|
|
302 </ul></p><div class="collapse_details"><dl class="details">
|
|
303
|
|
304 </dl>
|
|
305 <h5>Example</h5>
|
|
306 <div class="example-code">
|
|
307 <pre class="brush: js"> // The following example shows custom filtering being applied to the fourth column (i.e.
|
|
308 // the aData[3] index) based on two input values from the end-user, matching the data in
|
|
309 // a certain range.
|
|
310 $.fn.dataTableExt.afnFiltering.push(
|
|
311 function( oSettings, aData, iDataIndex ) {
|
|
312 var iMin = document.getElementById('min').value * 1;
|
|
313 var iMax = document.getElementById('max').value * 1;
|
|
314 var iVersion = aData[3] == "-" ? 0 : aData[3]*1;
|
|
315 if ( iMin == "" && iMax == "" ) {
|
|
316 return true;
|
|
317 }
|
|
318 else if ( iMin == "" && iVersion < iMax ) {
|
|
319 return true;
|
|
320 }
|
|
321 else if ( iMin < iVersion && "" == iMax ) {
|
|
322 return true;
|
|
323 }
|
|
324 else if ( iMin < iVersion && iVersion < iMax ) {
|
|
325 return true;
|
|
326 }
|
|
327 return false;
|
|
328 }
|
|
329 );</pre>
|
|
330 </div>
|
|
331 </div></dd><dt class=" odd"><a name="afnSortData"></a><a name="afnSortData_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#afnSortData">afnSortData</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>Plug-in sorting functions - this method of sorting is complimentary to the default type
|
|
332 based sorting that DataTables does automatically, allowing much greater control over the
|
|
333 the data that is being used to sort a column. This is useful if you want to do sorting
|
|
334 based on live data (for example the contents of an 'input' element) rather than just the
|
|
335 static string that DataTables knows of. The way these plug-ins work is that you create
|
|
336 an array of the values you wish to be sorted for the column in question and then return
|
|
337 that array. Which pre-sorting function is run here depends on the sSortDataType parameter
|
|
338 that is used for the column (if any). This is the corollary of <i>ofnSearch</i> for sort
|
|
339 data.
|
|
340 <ul>
|
|
341 <li>
|
|
342 Function input parameters:
|
|
343 <ul>
|
|
344 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
345 <li>{int} Target column index</li>
|
|
346 </ul>
|
|
347 </li>
|
|
348 <li>
|
|
349 Function return:
|
|
350 <ul>
|
|
351 <li>{array} Data for the column to be sorted upon</li>
|
|
352 </ul>
|
|
353 </il>
|
|
354 </ul></p>
|
|
355
|
|
356 <p>Note that as of v1.9, it is typically preferable to use <i>mData</i> to prepare data for
|
|
357 the different uses that DataTables can put the data to. Specifically <i>mData</i> when
|
|
358 used as a function will give you a 'type' (sorting, filtering etc) that you can use to
|
|
359 prepare the data as required for the different types. As such, this method is deprecated.</p><div class="collapse_details"><dl class="details">
|
|
360 <dt class="important">Deprecated</dt><dd class="yes-def">Yes</dd>
|
|
361 </dl>
|
|
362 <h5>Example</h5>
|
|
363 <div class="example-code">
|
|
364 <pre class="brush: js"> // Updating the cached sorting information with user entered values in HTML input elements
|
|
365 jQuery.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
|
|
366 {
|
|
367 var aData = [];
|
|
368 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
|
|
369 aData.push( this.value );
|
|
370 } );
|
|
371 return aData;
|
|
372 }</pre>
|
|
373 </div>
|
|
374 </div></dd><dt class=" even"><a name="aoFeatures"></a><a name="aoFeatures_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#aoFeatures">aoFeatures</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Feature plug-ins - This is an array of objects which describe the feature plug-ins that are
|
|
375 available to DataTables. These feature plug-ins are accessible through the sDom initialisation
|
|
376 option. As such, each feature plug-in must describe a function that is used to initialise
|
|
377 itself (fnInit), a character so the feature can be enabled by sDom (cFeature) and the name
|
|
378 of the feature (sFeature). Thus the objects attached to this method must provide:
|
|
379 <ul>
|
|
380 <li>{function} fnInit Initialisation of the plug-in
|
|
381 <ul>
|
|
382 <li>
|
|
383 Function input parameters:
|
|
384 <ul>
|
|
385 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
386 </ul>
|
|
387 </li>
|
|
388 <li>
|
|
389 Function return:
|
|
390 <ul>
|
|
391 <li>{node|null} The element which contains your feature. Note that the return
|
|
392 may also be void if your plug-in does not require to inject any DOM elements
|
|
393 into DataTables control (sDom) - for example this might be useful when
|
|
394 developing a plug-in which allows table control via keyboard entry.</li>
|
|
395 </ul>
|
|
396 </il>
|
|
397 </ul>
|
|
398 </li>
|
|
399 <li>{character} cFeature Character that will be matched in sDom - case sensitive</li>
|
|
400 <li>{string} sFeature Feature name</li>
|
|
401 </ul></p><div class="collapse_details"><dl class="details">
|
|
402
|
|
403 </dl>
|
|
404 <h5>Example</h5>
|
|
405 <div class="example-code">
|
|
406 <pre class="brush: js"> // How TableTools initialises itself.
|
|
407 $.fn.dataTableExt.aoFeatures.push( {
|
|
408 "fnInit": function( oSettings ) {
|
|
409 return new TableTools( { "oDTSettings": oSettings } );
|
|
410 },
|
|
411 "cFeature": "T",
|
|
412 "sFeature": "TableTools"
|
|
413 } );</pre>
|
|
414 </div>
|
|
415 </div></dd><dt class=" odd"><a name="aTypes"></a><a name="aTypes_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#aTypes">aTypes</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>Type detection plug-in functions - DataTables utilises types to define how sorting and
|
|
416 filtering behave, and types can be either be defined by the developer (sType for the
|
|
417 column) or they can be automatically detected by the methods in this array. The functions
|
|
418 defined in the array are quite simple, taking a single parameter (the data to analyse)
|
|
419 and returning the type if it is a known type, or null otherwise.
|
|
420 <ul>
|
|
421 <li>
|
|
422 Function input parameters:
|
|
423 <ul>
|
|
424 <li>{*} Data from the column cell to be analysed</li>
|
|
425 </ul>
|
|
426 </li>
|
|
427 <li>
|
|
428 Function return:
|
|
429 <ul>
|
|
430 <li>{string|null} Data type detected, or null if unknown (and thus pass it
|
|
431 on to the other type detection functions.</li>
|
|
432 </ul>
|
|
433 </il>
|
|
434 </ul></p><div class="collapse_details"><dl class="details">
|
|
435
|
|
436 </dl>
|
|
437 <h5>Example</h5>
|
|
438 <div class="example-code">
|
|
439 <pre class="brush: js"> // Currency type detection plug-in:
|
|
440 jQuery.fn.dataTableExt.aTypes.push(
|
|
441 function ( sData ) {
|
|
442 var sValidChars = "0123456789.-";
|
|
443 var Char;
|
|
444
|
|
445 // Check the numeric part
|
|
446 for ( i=1 ; i<sData.length ; i++ ) {
|
|
447 Char = sData.charAt(i);
|
|
448 if (sValidChars.indexOf(Char) == -1) {
|
|
449 return null;
|
|
450 }
|
|
451 }
|
|
452
|
|
453 // Check prefixed by currency
|
|
454 if ( sData.charAt(0) == '$' || sData.charAt(0) == '£' ) {
|
|
455 return 'currency';
|
|
456 }
|
|
457 return null;
|
|
458 }
|
|
459 );</pre>
|
|
460 </div>
|
|
461 </div></dd><dt id="DataTable.models.ext.fnVersionCheck" class=" even"><a name="fnVersionCheck"></a><a name="fnVersionCheck_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a>fnVersionCheck</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>Provide a common method for plug-ins to check the version of DataTables being used,
|
|
462 in order to ensure compatibility.</p><div class="collapse_details"><dl class="details">
|
|
463
|
|
464 </dl>
|
|
465 <h5>Parameters:</h5>
|
|
466
|
|
467 <table class="params">
|
|
468 <thead>
|
|
469 <tr>
|
|
470 <th width="20"></th>
|
|
471 <th width="12%" class="bottom_border name">Name</th>
|
|
472 <th width="10%" class="bottom_border">Type</th>
|
|
473 <th width="10%" class="bottom_border">Attributes</th>
|
|
474 <th width="10%" class="bottom_border">Default</th>
|
|
475 <th class="last bottom_border">Description</th>
|
|
476 </tr>
|
|
477 </thead>
|
|
478
|
|
479 <tbody>
|
|
480 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sVersion</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Version string to check for, in the format "X.Y.Z". Note
|
|
481 that the formats "X" and "X.Y" are also acceptable.</p></td></tr>
|
|
482 </tbody>
|
|
483 </table><h5>Returns:</h5><p class="returns"><p>true if this version of DataTables is greater or equal to the
|
|
484 required version, or false if this version of DataTales is not suitable</p></p><h5>Example:</h5>
|
|
485 <div class="example-code">
|
|
486 <pre class="brush: js"> $(document).ready(function() {
|
|
487 var oTable = $('#example').dataTable();
|
|
488 alert( oTable.fnVersionCheck( '1.9.0' ) );
|
|
489 } );</pre>
|
|
490 </div>
|
|
491 </div>
|
|
492 <dt class=" odd"><a name="iApiIndex"></a><a name="iApiIndex_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#iApiIndex">iApiIndex</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" odd"><p>Index for what 'this' index API functions should use</p><div class="collapse_details"><dl class="details">
|
|
493
|
|
494 </dl>
|
|
495 </div></dd><dt class=" even"><a name="oApi"></a><a name="oApi_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oApi">oApi</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" even"><p>Container for all private functions in DataTables so they can be exposed externally</p><div class="collapse_details"><dl class="details">
|
|
496
|
|
497 </dl>
|
|
498 </div></dd><dt class=" odd"><a name="ofnSearch"></a><a name="ofnSearch_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#ofnSearch">ofnSearch</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" odd"><p>Pre-processing of filtering data plug-ins - When you assign the sType for a column
|
|
499 (or have it automatically detected for you by DataTables or a type detection plug-in),
|
|
500 you will typically be using this for custom sorting, but it can also be used to provide
|
|
501 custom filtering by allowing you to pre-processing the data and returning the data in
|
|
502 the format that should be filtered upon. This is done by adding functions this object
|
|
503 with a parameter name which matches the sType for that target column. This is the
|
|
504 corollary of <i>afnSortData</i> for filtering data.
|
|
505 <ul>
|
|
506 <li>
|
|
507 Function input parameters:
|
|
508 <ul>
|
|
509 <li>{*} Data from the column cell to be prepared for filtering</li>
|
|
510 </ul>
|
|
511 </li>
|
|
512 <li>
|
|
513 Function return:
|
|
514 <ul>
|
|
515 <li>{string|null} Formatted string that will be used for the filtering.</li>
|
|
516 </ul>
|
|
517 </il>
|
|
518 </ul></p>
|
|
519
|
|
520 <p>Note that as of v1.9, it is typically preferable to use <i>mData</i> to prepare data for
|
|
521 the different uses that DataTables can put the data to. Specifically <i>mData</i> when
|
|
522 used as a function will give you a 'type' (sorting, filtering etc) that you can use to
|
|
523 prepare the data as required for the different types. As such, this method is deprecated.</p><div class="collapse_details"><dl class="details">
|
|
524 <dt class="important">Deprecated</dt><dd class="yes-def">Yes</dd>
|
|
525 </dl>
|
|
526 <h5>Example</h5>
|
|
527 <div class="example-code">
|
|
528 <pre class="brush: js"> $.fn.dataTableExt.ofnSearch['title-numeric'] = function ( sData ) {
|
|
529 return sData.replace(/\n/g," ").replace( /<.*?>/g, "" );
|
|
530 }</pre>
|
|
531 </div>
|
|
532 </div></dd><dt class=" even"><a name="oJUIClasses"></a><a name="oJUIClasses_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oJUIClasses">oJUIClasses</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" even"><p>Storage for the various classes that DataTables uses - jQuery UI suitable</p><div class="collapse_details"><dl class="details">
|
|
533
|
|
534 </dl>
|
|
535 </div></dd><dt class=" odd"><a name="oPagination"></a><a name="oPagination_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oPagination">oPagination</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" odd"><p>Pagination plug-in methods - The style and controls of the pagination can significantly
|
|
536 impact on how the end user interacts with the data in your table, and DataTables allows
|
|
537 the addition of pagination controls by extending this object, which can then be enabled
|
|
538 through the <i>sPaginationType</i> initialisation parameter. Each pagination type that
|
|
539 is added is an object (the property name of which is what <i>sPaginationType</i> refers
|
|
540 to) that has two properties, both methods that are used by DataTables to update the
|
|
541 control's state.
|
|
542 <ul>
|
|
543 <li>
|
|
544 fnInit - Initialisation of the paging controls. Called only during initialisation
|
|
545 of the table. It is expected that this function will add the required DOM elements
|
|
546 to the page for the paging controls to work. The element pointer
|
|
547 'oSettings.aanFeatures.p' array is provided by DataTables to contain the paging
|
|
548 controls (note that this is a 2D array to allow for multiple instances of each
|
|
549 DataTables DOM element). It is suggested that you add the controls to this element
|
|
550 as children
|
|
551 <ul>
|
|
552 <li>
|
|
553 Function input parameters:
|
|
554 <ul>
|
|
555 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
556 <li>{node} Container into which the pagination controls must be inserted</li>
|
|
557 <li>{function} Draw callback function - whenever the controls cause a page
|
|
558 change, this method must be called to redraw the table.</li>
|
|
559 </ul>
|
|
560 </li>
|
|
561 <li>
|
|
562 Function return:
|
|
563 <ul>
|
|
564 <li>No return required</li>
|
|
565 </ul>
|
|
566 </il>
|
|
567 </ul>
|
|
568 </il>
|
|
569 <li>
|
|
570 fnInit - This function is called whenever the paging status of the table changes and is
|
|
571 typically used to update classes and/or text of the paging controls to reflex the new
|
|
572 status.
|
|
573 <ul>
|
|
574 <li>
|
|
575 Function input parameters:
|
|
576 <ul>
|
|
577 <li>{object} DataTables settings object: see <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>.</li>
|
|
578 <li>{function} Draw callback function - in case you need to redraw the table again
|
|
579 or attach new event listeners</li>
|
|
580 </ul>
|
|
581 </li>
|
|
582 <li>
|
|
583 Function return:
|
|
584 <ul>
|
|
585 <li>No return required</li>
|
|
586 </ul>
|
|
587 </il>
|
|
588 </ul>
|
|
589 </il>
|
|
590 </ul></p><div class="collapse_details"><dl class="details">
|
|
591
|
|
592 </dl>
|
|
593 <h5>Example</h5>
|
|
594 <div class="example-code">
|
|
595 <pre class="brush: js"> $.fn.dataTableExt.oPagination.four_button = {
|
|
596 "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) {
|
|
597 nFirst = document.createElement( 'span' );
|
|
598 nPrevious = document.createElement( 'span' );
|
|
599 nNext = document.createElement( 'span' );
|
|
600 nLast = document.createElement( 'span' );
|
|
601
|
|
602 nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) );
|
|
603 nPrevious.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sPrevious ) );
|
|
604 nNext.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sNext ) );
|
|
605 nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) );
|
|
606
|
|
607 nFirst.className = "paginate_button first";
|
|
608 nPrevious.className = "paginate_button previous";
|
|
609 nNext.className="paginate_button next";
|
|
610 nLast.className = "paginate_button last";
|
|
611
|
|
612 nPaging.appendChild( nFirst );
|
|
613 nPaging.appendChild( nPrevious );
|
|
614 nPaging.appendChild( nNext );
|
|
615 nPaging.appendChild( nLast );
|
|
616
|
|
617 $(nFirst).click( function () {
|
|
618 oSettings.oApi._fnPageChange( oSettings, "first" );
|
|
619 fnCallbackDraw( oSettings );
|
|
620 } );
|
|
621
|
|
622 $(nPrevious).click( function() {
|
|
623 oSettings.oApi._fnPageChange( oSettings, "previous" );
|
|
624 fnCallbackDraw( oSettings );
|
|
625 } );
|
|
626
|
|
627 $(nNext).click( function() {
|
|
628 oSettings.oApi._fnPageChange( oSettings, "next" );
|
|
629 fnCallbackDraw( oSettings );
|
|
630 } );
|
|
631
|
|
632 $(nLast).click( function() {
|
|
633 oSettings.oApi._fnPageChange( oSettings, "last" );
|
|
634 fnCallbackDraw( oSettings );
|
|
635 } );
|
|
636
|
|
637 $(nFirst).bind( 'selectstart', function () { return false; } );
|
|
638 $(nPrevious).bind( 'selectstart', function () { return false; } );
|
|
639 $(nNext).bind( 'selectstart', function () { return false; } );
|
|
640 $(nLast).bind( 'selectstart', function () { return false; } );
|
|
641 },
|
|
642
|
|
643 "fnUpdate": function ( oSettings, fnCallbackDraw ) {
|
|
644 if ( !oSettings.aanFeatures.p ) {
|
|
645 return;
|
|
646 }
|
|
647
|
|
648 // Loop over each instance of the pager
|
|
649 var an = oSettings.aanFeatures.p;
|
|
650 for ( var i=0, iLen=an.length ; i<iLen ; i++ ) {
|
|
651 var buttons = an[i].getElementsByTagName('span');
|
|
652 if ( oSettings._iDisplayStart === 0 ) {
|
|
653 buttons[0].className = "paginate_disabled_previous";
|
|
654 buttons[1].className = "paginate_disabled_previous";
|
|
655 }
|
|
656 else {
|
|
657 buttons[0].className = "paginate_enabled_previous";
|
|
658 buttons[1].className = "paginate_enabled_previous";
|
|
659 }
|
|
660
|
|
661 if ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) {
|
|
662 buttons[2].className = "paginate_disabled_next";
|
|
663 buttons[3].className = "paginate_disabled_next";
|
|
664 }
|
|
665 else {
|
|
666 buttons[2].className = "paginate_enabled_next";
|
|
667 buttons[3].className = "paginate_enabled_next";
|
|
668 }
|
|
669 }
|
|
670 }
|
|
671 };</pre>
|
|
672 </div>
|
|
673 </div></dd><dt class=" even"><a name="oSort"></a><a name="oSort_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oSort">oSort</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" even"><p>Sorting plug-in methods - Sorting in DataTables is based on the detected type of the
|
|
674 data column (you can add your own type detection functions, or override automatic
|
|
675 detection using sType). With this specific type given to the column, DataTables will
|
|
676 apply the required sort from the functions in the object. Each sort type must provide
|
|
677 two mandatory methods, one each for ascending and descending sorting, and can optionally
|
|
678 provide a pre-formatting method that will help speed up sorting by allowing DataTables
|
|
679 to pre-format the sort data only once (rather than every time the actual sort functions
|
|
680 are run). The two sorting functions are typical Javascript sort methods:
|
|
681 <ul>
|
|
682 <li>
|
|
683 Function input parameters:
|
|
684 <ul>
|
|
685 <li>{<em>} Data to compare to the second parameter</li>
|
|
686 <li>{</em>} Data to compare to the first parameter</li>
|
|
687 </ul>
|
|
688 </li>
|
|
689 <li>
|
|
690 Function return:
|
|
691 <ul>
|
|
692 <li>{int} Sorting match: <0 if first parameter should be sorted lower than
|
|
693 the second parameter, ===0 if the two parameters are equal and >0 if
|
|
694 the first parameter should be sorted height than the second parameter.</li>
|
|
695 </ul>
|
|
696 </il>
|
|
697 </ul></p><div class="collapse_details"><dl class="details">
|
|
698
|
|
699 </dl>
|
|
700 <h5>Examples</h5>
|
|
701 <div class="example-code">
|
|
702 <pre class="brush: js"> // Case-sensitive string sorting, with no pre-formatting method
|
|
703 $.extend( $.fn.dataTableExt.oSort, {
|
|
704 "string-case-asc": function(x,y) {
|
|
705 return ((x < y) ? -1 : ((x > y) ? 1 : 0));
|
|
706 },
|
|
707 "string-case-desc": function(x,y) {
|
|
708 return ((x < y) ? 1 : ((x > y) ? -1 : 0));
|
|
709 }
|
|
710 } );
|
|
711
|
|
712 </pre>
|
|
713 </div>
|
|
714
|
|
715 <div class="example-code">
|
|
716 <pre class="brush: js"> // Case-insensitive string sorting, with pre-formatting
|
|
717 $.extend( $.fn.dataTableExt.oSort, {
|
|
718 "string-pre": function(x) {
|
|
719 return x.toLowerCase();
|
|
720 },
|
|
721 "string-asc": function(x,y) {
|
|
722 return ((x < y) ? -1 : ((x > y) ? 1 : 0));
|
|
723 },
|
|
724 "string-desc": function(x,y) {
|
|
725 return ((x < y) ? 1 : ((x > y) ? -1 : 0));
|
|
726 }
|
|
727 } );</pre>
|
|
728 </div>
|
|
729 </div></dd><dt class=" odd"><a name="oStdClasses"></a><a name="oStdClasses_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#oStdClasses">oStdClasses</a></span><span class="type-sig"><span class="type-signature"> :object</span></span></dt><dd class=" odd"><p>Storage for the various classes that DataTables uses</p><div class="collapse_details"><dl class="details">
|
|
730
|
|
731 </dl>
|
|
732 </div></dd><dt class=" even"><a name="sErrMode"></a><a name="sErrMode_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sErrMode">sErrMode</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>How should DataTables report an error. Can take the value 'alert' or 'throw'</p><div class="collapse_details"><dl class="details">
|
|
733
|
|
734 </dl>
|
|
735 </div></dd><dt class=" odd"><a name="sVersion"></a><a name="sVersion_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sVersion">sVersion</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Version string for plug-ins to check compatibility. Allowed format is
|
|
736 a.b.c.d.e where: a:int, b:int, c:int, d:string(dev|beta), e:int. d and
|
|
737 e are optional</p><div class="collapse_details"><dl class="details">
|
|
738
|
|
739 </dl>
|
|
740 </div></dd>
|
|
741 </dl></div>
|
|
742 </div>
|
|
743
|
|
744 </div>
|
|
745
|
|
746 <div class="fw_footer">
|
|
747 DataTables: Copyright 2008-2012 Allan Jardine, all rights reserved<br>
|
|
748
|
|
749 Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
|
750 23th Sep 2012 - 14:27
|
|
751 with the <a href="http://datatables.net/">DataTables</a> template.
|
|
752 </div>
|
|
753 </body>
|
|
754 </html> |