| 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> |
Parent Directory
| 
Revision Log