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