comparison DataTables-1.9.4/docs/DataTable.defaults.html @ 0:ac5f9272033b draft

first upload
author saskia-hiltemann
date Tue, 01 Jul 2014 11:42:23 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:ac5f9272033b
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: defaults - 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: defaults</h1>
24 <h2 class="ancestors">Ancestry: <span class="ancestors"><a href="DataTable.html">DataTable</a>.</span> ยป defaults</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><a href="#summary_namespaces">Namespaces (3)</a></td></tr><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (58)</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 (58)</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>Initialisation options that can be given to DataTables at initialisation
56 time.</p><dl class="details">
57
58 </dl>
59
60 </div>
61
62
63 <div class="doc_summary">
64 <a name="summary"></a>
65 <h2>Summary</h2>
66
67 <div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3>
68 <dl>
69 <dt class="even"><span class="type-name"><a href="DataTable.defaults.columns.html">columns</a></span></dt><dd class="even"><p>Column options that can be given to DataTables at initialisation time.</p></dd><dt class="odd"><span class="type-name"><a href="DataTable.defaults.oLanguage.html">oLanguage</a></span></dt><dd class="odd"><p>All strings that DataTables uses in the user interface that it creates
70 are defined in this object, allowing you to modified them individually or
71 completely replace them all as required.</p></dd><dt class="even"><span class="type-name"><a href="DataTable.defaults.oSearch.html">oSearch</a></span></dt><dd class="even"><p>This parameter allows you to have define the global filtering state at
72 initialisation time. As an object the "sSearch" parameter must be
73 defined, but all other parameters are optional. When "bRegex" is true,
74 the search string will be treated as a regular expression, when false
75 (default) it will be treated as a straight string. When "bSmart"
76 DataTables will use it's smart filtering methods (to word match at
77 any point in the data), when false this will not be done.</p></dd>
78 </dl></div><div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
79
80 <dl>
81 <dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aaData">aaData</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>An array of data to use for the table, passed in at initialisation which
82 will be used in preference to any data which is already in the DOM. This is
83 particularly useful for constructing tables purely in Javascript, for
84 example with a custom Ajax call.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aaSorting">aaSorting</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>If sorting is enabled, then DataTables will perform a first pass sort on
85 initialisation. You can define which column(s) the sort is performed upon,
86 and the sorting direction, with this variable. The aaSorting array should
87 contain an array for each column to be sorted initially containing the
88 column's index and a direction string ('asc' or 'desc').</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aaSortingFixed">aaSortingFixed</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>This parameter is basically identical to the aaSorting parameter, but
89 cannot be overridden by user interaction with the table. What this means
90 is that you could have a column (visible or hidden) which the sorting will
91 always be forced on first - any sorting after that (from the user) will
92 then be performed as required. This can be useful for grouping rows
93 together.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aLengthMenu">aLengthMenu</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>This parameter allows you to readily specify the entries in the length drop
94 down menu that DataTables shows when pagination is enabled. It can be
95 either a 1D array of options which will be used for both the displayed
96 option and the value, or a 2D array which will use the array in the first
97 position as the value, and the array in the second position as the
98 displayed options (useful for language strings such as 'All').</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aoColumnDefs">aoColumnDefs</a></span><span class="type-sig"><span class="type-signature"></span></span></dt><dd class=" even"><p>Very similar to aoColumns, aoColumnDefs allows you to target a specific
99 column, multiple columns, or all columns, using the aTargets property of
100 each object in the array. This allows great flexibility when creating
101 tables, as the aoColumnDefs arrays can be of any length, targeting the
102 columns you specifically want. aoColumnDefs may use any of the column
103 options available: <a href="DataTable.defaults.columns.html">DataTable.defaults.columns</a>, but it <em>must</em>
104 have aTargets defined in each object in the array. Values in the aTargets
105 array may be:
106 <ul>
107 <li>a string - class name will be matched on the TH for the column</li>
108 <li>0 or a positive integer - column index counting from the left</li>
109 <li>a negative integer - column index counting from the right</li>
110 <li>the string "_all" - all columns (i.e. assign a default)</li>
111 </ul></p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aoColumns">aoColumns</a></span><span class="type-sig"><span class="type-signature"></span></span></dt><dd class=" odd"><p>The aoColumns option in the initialisation parameter allows you to define
112 details about the way individual columns behave. For a full list of
113 column options that can be set, please see
114 <a href="DataTable.defaults.columns.html">DataTable.defaults.columns</a>. Note that if you use aoColumns to
115 define your columns, you must have an entry in the array for every single
116 column that you have in your table (these can be null if you don't which
117 to specify any options).</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aoSearchCols">aoSearchCols</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Basically the same as oSearch, this parameter defines the individual column
118 filtering state at initialisation time. The array must be of the same size
119 as the number of columns, and each element be an object with the parameters
120 "sSearch" and "bEscapeRegex" (the latter is optional). 'null' is also
121 accepted and the default will be used.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#asStripeClasses">asStripeClasses</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>An array of CSS classes that should be applied to displayed rows. This
122 array may be of any length, and DataTables will apply each class
123 sequentially, looping when required.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bAutoWidth">bAutoWidth</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable automatic column width calculation. This can be disabled
124 as an optimisation (it takes some time to calculate the widths) if the
125 tables widths are passed in using aoColumns.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bDeferRender">bDeferRender</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Deferred rendering can provide DataTables with a huge speed boost when you
126 are using an Ajax or JS data source for the table. This option, when set to
127 true, will cause DataTables to defer the creation of the table elements for
128 each row until they are needed for a draw - saving a significant amount of
129 time.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bDestroy">bDestroy</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Replace a DataTable which matches the given selector and replace it with
130 one which has the properties of the new initialisation object passed. If no
131 table matches the selector, then the new DataTable will be constructed as
132 per normal.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bFilter">bFilter</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable filtering of data. Filtering in DataTables is "smart" in
133 that it allows the end user to input multiple words (space separated) and
134 will match a row containing those words, even if not in the order that was
135 specified (this allow matching across multiple columns). Note that if you
136 wish to use filtering in DataTables this must remain 'true' - to remove the
137 default filtering input box and retain filtering abilities, please use
138 <a href="DataTable.defaults.html#sDom">DataTable.defaults.sDom</a>.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bInfo">bInfo</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable the table information display. This shows information
139 about the data that is currently visible on the page, including information
140 about filtered data if that action is being performed.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bJQueryUI">bJQueryUI</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable jQuery UI ThemeRoller support (required as ThemeRoller requires some
141 slightly different and additional mark-up from what DataTables has
142 traditionally used).</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bLengthChange">bLengthChange</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Allows the end user to select the size of a formatted page from a select
143 menu (sizes are 10, 25, 50 and 100). Requires pagination (bPaginate).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bPaginate">bPaginate</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable pagination.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bProcessing">bProcessing</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable the display of a 'processing' indicator when the table is
144 being processed (e.g. a sort). This is particularly useful for tables with
145 large amounts of data where it can take a noticeable amount of time to sort
146 the entries.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bRetrieve">bRetrieve</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Retrieve the DataTables object for the given selector. Note that if the
147 table has already been initialised, this parameter will cause DataTables
148 to simply return the object that has already been set up - it will not take
149 account of any changes you might have made to the initialisation object
150 passed to DataTables (setting this parameter to true is an acknowledgement
151 that you understand this). bDestroy can be used to reinitialise a table if
152 you need.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bScrollAutoCss">bScrollAutoCss</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Indicate if DataTables should be allowed to set the padding / margin
153 etc for the scrolling header elements or not. Typically you will want
154 this.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bScrollCollapse">bScrollCollapse</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>When vertical (y) scrolling is enabled, DataTables will force the height of
155 the table's viewport to the given height at all times (useful for layout).
156 However, this can look odd when filtering data down to a small data set,
157 and the footer is left "floating" further down. This parameter (when
158 enabled) will cause DataTables to collapse the table's viewport down when
159 the result set will fit within the given Y height.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bScrollInfinite">bScrollInfinite</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable infinite scrolling for DataTables (to be used in combination with
160 sScrollY). Infinite scrolling means that DataTables will continually load
161 data as a user scrolls through a table, which is very useful for large
162 dataset. This cannot be used with pagination, which is automatically
163 disabled. Note - the Scroller extra for DataTables is recommended in
164 in preference to this option.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bServerSide">bServerSide</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Configure DataTables to use server-side processing. Note that the
165 sAjaxSource parameter must also be given in order to give DataTables a
166 source to obtain the required data for each draw.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSort">bSort</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable sorting of columns. Sorting of individual columns can be
167 disabled by the "bSortable" option for each column.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSortCellsTop">bSortCellsTop</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Allows control over whether DataTables should use the top (true) unique
168 cell that is found for a single column, or the bottom (false - default).
169 This is useful when using complex headers.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSortClasses">bSortClasses</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable the addition of the classes 'sorting_1', 'sorting_2' and
170 'sorting_3' to the columns which are currently being sorted on. This is
171 presented as a feature switch as it can increase processing time (while
172 classes are removed and added) so for large data sets you might want to
173 turn this off.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bStateSave">bStateSave</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable state saving. When enabled a cookie will be used to save
174 table display information such as pagination information, display length,
175 filtering and sorting. As such when the end user reloads the page the
176 display display will match what thy had previously set up.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnCookieCallback">fnCookieCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>Customise the cookie and / or the parameters being stored when using
177 DataTables with state saving enabled. This function is called whenever
178 the cookie is modified, and it expects a fully formed cookie string to be
179 returned. Note that the data object passed in is a Javascript object which
180 must be converted to a string (JSON.stringify for example).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnCreatedRow">fnCreatedRow</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p>This function is called when a TR element is created (and all TD child
181 elements have been inserted), or registered if using a DOM source, allowing
182 manipulation of the TR element (adding classes etc).</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnDrawCallback">fnDrawCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>This function is called on every 'draw' event, and allows you to
183 dynamically modify any aspect you want about the created DOM.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnFooterCallback">fnFooterCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p>Identical to fnHeaderCallback() but for the table footer this function
184 allows you to modify the table footer on every 'draw' even.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnFormatNumber">fnFormatNumber</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>When rendering large numbers in the information element for the table
185 (i.e. "Showing 1 to 10 of 57 entries") DataTables will render large numbers
186 to have a comma separator for the 'thousands' units (e.g. 1 million is
187 rendered as "1,000,000") to help readability for the end user. This
188 function will override the default method DataTables uses.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnHeaderCallback">fnHeaderCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p>This function is called on every 'draw' event, and allows you to
189 dynamically modify the header row. This can be used to calculate and
190 display useful information about the table.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnInfoCallback">fnInfoCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>The information element can be used to convey information about the current
191 state of the table. Although the internationalisation options presented by
192 DataTables are quite capable of dealing with most customisations, there may
193 be times where you wish to customise the string further. This callback
194 allows you to do exactly that.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnInitComplete">fnInitComplete</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p>Called when the table has been initialised. Normally DataTables will
195 initialise sequentially and there will be no need for this function,
196 however, this does not hold true when using external language information
197 since that is obtained using an async XHR call.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnPreDrawCallback">fnPreDrawCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>Called at the very start of each table draw and can be used to cancel the
198 draw by returning false, any other return (including undefined) results in
199 the full draw occurring).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnRowCallback">fnRowCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p>This function allows you to 'post process' each row after it have been
200 generated for each table draw, but before it is rendered on screen. This
201 function might be used for setting the row class name etc.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnServerData">fnServerData</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>This parameter allows you to override the default function which obtains
202 the data from the server ($.getJSON) so something more suitable for your
203 application. For example you could use POST data, or pull information from
204 a Gears or AIR database.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnServerParams">fnServerParams</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p>It is often useful to send extra data to the server when making an Ajax
205 request - for example custom filtering information, and this callback
206 function makes it trivial to send extra information to the server. The
207 passed in parameter is the data set that has been constructed by
208 DataTables, and you can add to this or modify it as you require.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnStateLoad">fnStateLoad</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>Load the table state. With this function you can define from where, and how, the
209 state of a table is loaded. By default DataTables will load from its state saving
210 cookie, but you might wish to use local storage (HTML5) or a server-side database.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnStateLoaded">fnStateLoaded</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p>Callback that is called when the state has been loaded from the state saving method
211 and the DataTables settings object has been modified as a result of the loaded state.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnStateLoadParams">fnStateLoadParams</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>Callback which allows modification of the saved state prior to loading that state.
212 This callback is called when the table is loading state from the stored data, but
213 prior to the settings object being modified by the saved state. Note that for
214 plug-in authors, you should use the 'stateLoadParams' event to load parameters for
215 a plug-in.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnStateSave">fnStateSave</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p>Save the table state. This function allows you to define where and how the state
216 information for the table is stored - by default it will use a cookie, but you
217 might want to use local storage (HTML5) or a server-side database.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnStateSaveParams">fnStateSaveParams</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>Callback which allows modification of the state to be saved. Called when the table
218 has changed state a new state save is required. This method allows modification of
219 the state saving object prior to actually doing the save, including addition or
220 other state properties or modification. Note that for plug-in authors, you should
221 use the 'stateSaveParams' event to save parameters for a plug-in.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iCookieDuration">iCookieDuration</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" odd"><p>Duration of the cookie which is used for storing session information. This
222 value is given in seconds.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iDeferLoading">iDeferLoading</a></span><span class="type-sig"><span class="type-signature"> :int|array</span></span></dt><dd class=" even"><p>When enabled DataTables will not make a request to the server for the first
223 page draw - rather it will use the data already on the page (no sorting etc
224 will be applied to it), thus saving on an XHR at load time. iDeferLoading
225 is used to indicate that deferred loading is required, but it is also used
226 to tell DataTables how many records there are in the full table (allowing
227 the information element and pagination to be displayed correctly). In the case
228 where a filtering is applied to the table on initial load, this can be
229 indicated by giving the parameter as an array, where the first element is
230 the number of records available after filtering and the second element is the
231 number of records without filtering (allowing the table information element
232 to be shown correctly).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iDisplayLength">iDisplayLength</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" odd"><p>Number of rows to display on a single page when using pagination. If
233 feature enabled (bLengthChange) then the end user will be able to override
234 this to a custom setting using a pop-up menu.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iDisplayStart">iDisplayStart</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" even"><p>Define the starting point for data display when using DataTables with
235 pagination. Note that this parameter is the number of records, rather than
236 the page number, so if you have 10 records per page and want to start on
237 the third page, it should be "20".</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iScrollLoadGap">iScrollLoadGap</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" odd"><p>The scroll gap is the amount of scrolling that is left to go before
238 DataTables will load the next 'page' of data automatically. You typically
239 want a gap which is big enough that the scrolling will be smooth for the
240 user, while not so large that it will load more data than need.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iTabIndex">iTabIndex</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" even"><p>By default DataTables allows keyboard navigation of the table (sorting, paging,
241 and filtering) by adding a tabindex attribute to the required elements. This
242 allows you to tab through the controls and press the enter key to activate them.
243 The tabindex is default 0, meaning that the tab follows the flow of the document.
244 You can overrule this using this parameter if you wish. Use a value of -1 to
245 disable built-in keyboard navigation.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sAjaxDataProp">sAjaxDataProp</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>By default DataTables will look for the property 'aaData' when obtaining
246 data from an Ajax source or for server-side processing - this parameter
247 allows that property to be changed. You can use Javascript dotted object
248 notation to get a data source for multiple levels of nesting.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sAjaxSource">sAjaxSource</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>You can instruct DataTables to load data from an external source using this
249 parameter (use aData if you want to pass data in you already have). Simply
250 provide a url a JSON object can be obtained from. This object must include
251 the parameter 'aaData' which is the data source for the table.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sCookiePrefix">sCookiePrefix</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>This parameter can be used to override the default prefix that DataTables
252 assigns to a cookie when state saving is enabled.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sDom">sDom</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>This initialisation variable allows you to specify exactly where in the
253 DOM you want DataTables to inject the various controls it adds to the page
254 (for example you might want the pagination controls at the top of the
255 table). DIV elements (with or without a custom class) can also be added to
256 aid styling. The follow syntax is used:
257 <ul>
258 <li>The following options are allowed: <br />
259 <ul>
260 <li>'l' - Length changing</li
261 <li>'f' - Filtering input</li>
262 <li>'t' - The table!</li>
263 <li>'i' - Information</li>
264 <li>'p' - Pagination</li>
265 <li>'r' - pRocessing</li>
266 </ul>
267 </li>
268 <li>The following constants are allowed:
269 <ul>
270 <li>'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')</li>
271 <li>'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')</li>
272 </ul>
273 </li>
274 <li>The following syntax is expected:
275 <ul>
276 <li>'&lt;' and '&gt;' - div elements</li>
277 <li>'&lt;"class" and '&gt;' - div with a class</li>
278 <li>'&lt;"#id" and '&gt;' - div with an ID</li>
279 </ul>
280 </li>
281 <li>Examples:
282 <ul>
283 <li>'&lt;"wrapper"flipt&gt;'</li>
284 <li>'&lt;lf&lt;t&gt;ip&gt;'</li>
285 </ul>
286 </li>
287 </ul></p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sPaginationType">sPaginationType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>DataTables features two different built-in pagination interaction methods
288 ('two_button' or 'full_numbers') which present different page controls to
289 the end user. Further methods can be added using the API (see below).</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sScrollX">sScrollX</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Enable horizontal scrolling. When a table is too wide to fit into a certain
290 layout, or you have a large number of columns in the table, you can enable
291 x-scrolling to show the table in a viewport, which can be scrolled. This
292 property can be any CSS unit, or a number (in which case it will be treated
293 as a pixel measurement).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sScrollXInner">sScrollXInner</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>This property can be used to force a DataTable to use more width than it
294 might otherwise do when x-scrolling is enabled. For example if you have a
295 table which requires to be well spaced, this parameter is useful for
296 "over-sizing" the table, and thus forcing scrolling. This property can by
297 any CSS unit, or a number (in which case it will be treated as a pixel
298 measurement).</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sScrollY">sScrollY</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Enable vertical scrolling. Vertical scrolling will constrain the DataTable
299 to the given height, and enable scrolling for any data which overflows the
300 current viewport. This can be used as an alternative to paging to display
301 a lot of data in a small area (although paging and scrolling can both be
302 enabled at the same time). This property can be any CSS unit, or a number
303 (in which case it will be treated as a pixel measurement).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sServerMethod">sServerMethod</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Set the HTTP method that is used to make the Ajax call for server-side
304 processing or Ajax sourced data.</p></dd>
305 </dl></div>
306 </div>
307
308
309
310
311 <div class="doc_details">
312 <a name="details"></a>
313 <h2>Details</h2>
314 <div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
315 <dl>
316 <dt class=" even"><a name="aaData"></a><a name="aaData_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aaData">aaData</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>An array of data to use for the table, passed in at initialisation which
317 will be used in preference to any data which is already in the DOM. This is
318 particularly useful for constructing tables purely in Javascript, for
319 example with a custom Ajax call.</p><div class="collapse_details"><dl class="details">
320
321 </dl>
322 <h5>Examples</h5>
323 <div class="example-code">
324 <pre class="brush: js"> // Using a 2D array data source
325 $(document).ready( function () {
326 $('#example').dataTable( {
327 "aaData": [
328 ['Trident', 'Internet Explorer 4.0', 'Win 95+', 4, 'X'],
329 ['Trident', 'Internet Explorer 5.0', 'Win 95+', 5, 'C'],
330 ],
331 "aoColumns": [
332 { "sTitle": "Engine" },
333 { "sTitle": "Browser" },
334 { "sTitle": "Platform" },
335 { "sTitle": "Version" },
336 { "sTitle": "Grade" }
337 ]
338 } );
339 } );
340
341 </pre>
342 </div>
343
344 <div class="example-code">
345 <pre class="brush: js"> // Using an array of objects as a data source (mData)
346 $(document).ready( function () {
347 $('#example').dataTable( {
348 "aaData": [
349 {
350 "engine": "Trident",
351 "browser": "Internet Explorer 4.0",
352 "platform": "Win 95+",
353 "version": 4,
354 "grade": "X"
355 },
356 {
357 "engine": "Trident",
358 "browser": "Internet Explorer 5.0",
359 "platform": "Win 95+",
360 "version": 5,
361 "grade": "C"
362 }
363 ],
364 "aoColumns": [
365 { "sTitle": "Engine", "mData": "engine" },
366 { "sTitle": "Browser", "mData": "browser" },
367 { "sTitle": "Platform", "mData": "platform" },
368 { "sTitle": "Version", "mData": "version" },
369 { "sTitle": "Grade", "mData": "grade" }
370 ]
371 } );
372 } );</pre>
373 </div>
374 </div></dd><dt class=" odd"><a name="aaSorting"></a><a name="aaSorting_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aaSorting">aaSorting</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>If sorting is enabled, then DataTables will perform a first pass sort on
375 initialisation. You can define which column(s) the sort is performed upon,
376 and the sorting direction, with this variable. The aaSorting array should
377 contain an array for each column to be sorted initially containing the
378 column's index and a direction string ('asc' or 'desc').</p><div class="collapse_details"><dl class="details">
379
380 </dl>
381 <h5>Example</h5>
382 <div class="example-code">
383 <pre class="brush: js"> // Sort by 3rd column first, and then 4th column
384 $(document).ready( function() {
385 $('#example').dataTable( {
386 "aaSorting": [[2,'asc'], [3,'desc']]
387 } );
388 } );
389
390 // No initial sorting
391 $(document).ready( function() {
392 $('#example').dataTable( {
393 "aaSorting": []
394 } );
395 } );</pre>
396 </div>
397 </div></dd><dt class=" even"><a name="aaSortingFixed"></a><a name="aaSortingFixed_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aaSortingFixed">aaSortingFixed</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>This parameter is basically identical to the aaSorting parameter, but
398 cannot be overridden by user interaction with the table. What this means
399 is that you could have a column (visible or hidden) which the sorting will
400 always be forced on first - any sorting after that (from the user) will
401 then be performed as required. This can be useful for grouping rows
402 together.</p><div class="collapse_details"><dl class="details">
403
404 </dl>
405 <h5>Example</h5>
406 <div class="example-code">
407 <pre class="brush: js"> $(document).ready( function() {
408 $('#example').dataTable( {
409 "aaSortingFixed": [[0,'asc']]
410 } );
411 } )</pre>
412 </div>
413 </div></dd><dt class=" odd"><a name="aLengthMenu"></a><a name="aLengthMenu_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aLengthMenu">aLengthMenu</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>This parameter allows you to readily specify the entries in the length drop
414 down menu that DataTables shows when pagination is enabled. It can be
415 either a 1D array of options which will be used for both the displayed
416 option and the value, or a 2D array which will use the array in the first
417 position as the value, and the array in the second position as the
418 displayed options (useful for language strings such as 'All').</p><div class="collapse_details"><dl class="details">
419
420 </dl>
421 <h5>Examples</h5>
422 <div class="example-code">
423 <pre class="brush: js"> $(document).ready( function() {
424 $('#example').dataTable( {
425 "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
426 } );
427 } );
428
429 </pre>
430 </div>
431
432 <div class="example-code">
433 <pre class="brush: js"> // Setting the default display length as well as length menu
434 // This is likely to be wanted if you remove the '10' option which
435 // is the iDisplayLength default.
436 $(document).ready( function() {
437 $('#example').dataTable( {
438 "iDisplayLength": 25,
439 "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]
440 } );
441 } );</pre>
442 </div>
443 </div></dd><dt class=" even"><a name="aoColumnDefs"></a><a name="aoColumnDefs_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aoColumnDefs">aoColumnDefs</a></span><span class="type-sig"><span class="type-signature"></span></span></dt><dd class=" even"><p>Very similar to aoColumns, aoColumnDefs allows you to target a specific
444 column, multiple columns, or all columns, using the aTargets property of
445 each object in the array. This allows great flexibility when creating
446 tables, as the aoColumnDefs arrays can be of any length, targeting the
447 columns you specifically want. aoColumnDefs may use any of the column
448 options available: <a href="DataTable.defaults.columns.html">DataTable.defaults.columns</a>, but it <em>must</em>
449 have aTargets defined in each object in the array. Values in the aTargets
450 array may be:
451 <ul>
452 <li>a string - class name will be matched on the TH for the column</li>
453 <li>0 or a positive integer - column index counting from the left</li>
454 <li>a negative integer - column index counting from the right</li>
455 <li>the string "_all" - all columns (i.e. assign a default)</li>
456 </ul></p><div class="collapse_details"><dl class="details">
457
458 </dl>
459 </div></dd><dt class=" odd"><a name="aoColumns"></a><a name="aoColumns_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aoColumns">aoColumns</a></span><span class="type-sig"><span class="type-signature"></span></span></dt><dd class=" odd"><p>The aoColumns option in the initialisation parameter allows you to define
460 details about the way individual columns behave. For a full list of
461 column options that can be set, please see
462 <a href="DataTable.defaults.columns.html">DataTable.defaults.columns</a>. Note that if you use aoColumns to
463 define your columns, you must have an entry in the array for every single
464 column that you have in your table (these can be null if you don't which
465 to specify any options).</p><div class="collapse_details"><dl class="details">
466
467 </dl>
468 </div></dd><dt class=" even"><a name="aoSearchCols"></a><a name="aoSearchCols_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aoSearchCols">aoSearchCols</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Basically the same as oSearch, this parameter defines the individual column
469 filtering state at initialisation time. The array must be of the same size
470 as the number of columns, and each element be an object with the parameters
471 "sSearch" and "bEscapeRegex" (the latter is optional). 'null' is also
472 accepted and the default will be used.</p><div class="collapse_details"><dl class="details">
473
474 </dl>
475 <h5>Example</h5>
476 <div class="example-code">
477 <pre class="brush: js"> $(document).ready( function() {
478 $('#example').dataTable( {
479 "aoSearchCols": [
480 null,
481 { "sSearch": "My filter" },
482 null,
483 { "sSearch": "^[0-9]", "bEscapeRegex": false }
484 ]
485 } );
486 } )</pre>
487 </div>
488 </div></dd><dt class=" odd"><a name="asStripeClasses"></a><a name="asStripeClasses_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#asStripeClasses">asStripeClasses</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>An array of CSS classes that should be applied to displayed rows. This
489 array may be of any length, and DataTables will apply each class
490 sequentially, looping when required.</p><div class="collapse_details"><dl class="details">
491
492 </dl>
493 <h5>Example</h5>
494 <div class="example-code">
495 <pre class="brush: js"> $(document).ready( function() {
496 $('#example').dataTable( {
497 "asStripeClasses": [ 'strip1', 'strip2', 'strip3' ]
498 } );
499 } )</pre>
500 </div>
501 </div></dd><dt class=" even"><a name="bAutoWidth"></a><a name="bAutoWidth_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bAutoWidth">bAutoWidth</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable automatic column width calculation. This can be disabled
502 as an optimisation (it takes some time to calculate the widths) if the
503 tables widths are passed in using aoColumns.</p><div class="collapse_details"><dl class="details">
504
505 </dl>
506 <h5>Example</h5>
507 <div class="example-code">
508 <pre class="brush: js"> $(document).ready( function () {
509 $('#example').dataTable( {
510 "bAutoWidth": false
511 } );
512 } );</pre>
513 </div>
514 </div></dd><dt class=" odd"><a name="bDeferRender"></a><a name="bDeferRender_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bDeferRender">bDeferRender</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Deferred rendering can provide DataTables with a huge speed boost when you
515 are using an Ajax or JS data source for the table. This option, when set to
516 true, will cause DataTables to defer the creation of the table elements for
517 each row until they are needed for a draw - saving a significant amount of
518 time.</p><div class="collapse_details"><dl class="details">
519
520 </dl>
521 <h5>Example</h5>
522 <div class="example-code">
523 <pre class="brush: js"> $(document).ready( function() {
524 var oTable = $('#example').dataTable( {
525 "sAjaxSource": "sources/arrays.txt",
526 "bDeferRender": true
527 } );
528 } );</pre>
529 </div>
530 </div></dd><dt class=" even"><a name="bDestroy"></a><a name="bDestroy_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bDestroy">bDestroy</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Replace a DataTable which matches the given selector and replace it with
531 one which has the properties of the new initialisation object passed. If no
532 table matches the selector, then the new DataTable will be constructed as
533 per normal.</p><div class="collapse_details"><dl class="details">
534
535 </dl>
536 <h5>Example</h5>
537 <div class="example-code">
538 <pre class="brush: js"> $(document).ready( function() {
539 $('#example').dataTable( {
540 "sScrollY": "200px",
541 "bPaginate": false
542 } );
543
544 // Some time later....
545 $('#example').dataTable( {
546 "bFilter": false,
547 "bDestroy": true
548 } );
549 } );</pre>
550 </div>
551 </div></dd><dt class=" odd"><a name="bFilter"></a><a name="bFilter_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bFilter">bFilter</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable filtering of data. Filtering in DataTables is "smart" in
552 that it allows the end user to input multiple words (space separated) and
553 will match a row containing those words, even if not in the order that was
554 specified (this allow matching across multiple columns). Note that if you
555 wish to use filtering in DataTables this must remain 'true' - to remove the
556 default filtering input box and retain filtering abilities, please use
557 <a href="DataTable.defaults.html#sDom">DataTable.defaults.sDom</a>.</p><div class="collapse_details"><dl class="details">
558
559 </dl>
560 <h5>Example</h5>
561 <div class="example-code">
562 <pre class="brush: js"> $(document).ready( function () {
563 $('#example').dataTable( {
564 "bFilter": false
565 } );
566 } );</pre>
567 </div>
568 </div></dd><dt class=" even"><a name="bInfo"></a><a name="bInfo_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bInfo">bInfo</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable the table information display. This shows information
569 about the data that is currently visible on the page, including information
570 about filtered data if that action is being performed.</p><div class="collapse_details"><dl class="details">
571
572 </dl>
573 <h5>Example</h5>
574 <div class="example-code">
575 <pre class="brush: js"> $(document).ready( function () {
576 $('#example').dataTable( {
577 "bInfo": false
578 } );
579 } );</pre>
580 </div>
581 </div></dd><dt class=" odd"><a name="bJQueryUI"></a><a name="bJQueryUI_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bJQueryUI">bJQueryUI</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable jQuery UI ThemeRoller support (required as ThemeRoller requires some
582 slightly different and additional mark-up from what DataTables has
583 traditionally used).</p><div class="collapse_details"><dl class="details">
584
585 </dl>
586 <h5>Example</h5>
587 <div class="example-code">
588 <pre class="brush: js"> $(document).ready( function() {
589 $('#example').dataTable( {
590 "bJQueryUI": true
591 } );
592 } );</pre>
593 </div>
594 </div></dd><dt class=" even"><a name="bLengthChange"></a><a name="bLengthChange_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bLengthChange">bLengthChange</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Allows the end user to select the size of a formatted page from a select
595 menu (sizes are 10, 25, 50 and 100). Requires pagination (bPaginate).</p><div class="collapse_details"><dl class="details">
596
597 </dl>
598 <h5>Example</h5>
599 <div class="example-code">
600 <pre class="brush: js"> $(document).ready( function () {
601 $('#example').dataTable( {
602 "bLengthChange": false
603 } );
604 } );</pre>
605 </div>
606 </div></dd><dt class=" odd"><a name="bPaginate"></a><a name="bPaginate_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bPaginate">bPaginate</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable pagination.</p><div class="collapse_details"><dl class="details">
607
608 </dl>
609 <h5>Example</h5>
610 <div class="example-code">
611 <pre class="brush: js"> $(document).ready( function () {
612 $('#example').dataTable( {
613 "bPaginate": false
614 } );
615 } );</pre>
616 </div>
617 </div></dd><dt class=" even"><a name="bProcessing"></a><a name="bProcessing_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bProcessing">bProcessing</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable the display of a 'processing' indicator when the table is
618 being processed (e.g. a sort). This is particularly useful for tables with
619 large amounts of data where it can take a noticeable amount of time to sort
620 the entries.</p><div class="collapse_details"><dl class="details">
621
622 </dl>
623 <h5>Example</h5>
624 <div class="example-code">
625 <pre class="brush: js"> $(document).ready( function () {
626 $('#example').dataTable( {
627 "bProcessing": true
628 } );
629 } );</pre>
630 </div>
631 </div></dd><dt class=" odd"><a name="bRetrieve"></a><a name="bRetrieve_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bRetrieve">bRetrieve</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Retrieve the DataTables object for the given selector. Note that if the
632 table has already been initialised, this parameter will cause DataTables
633 to simply return the object that has already been set up - it will not take
634 account of any changes you might have made to the initialisation object
635 passed to DataTables (setting this parameter to true is an acknowledgement
636 that you understand this). bDestroy can be used to reinitialise a table if
637 you need.</p><div class="collapse_details"><dl class="details">
638
639 </dl>
640 <h5>Example</h5>
641 <div class="example-code">
642 <pre class="brush: js"> $(document).ready( function() {
643 initTable();
644 tableActions();
645 } );
646
647 function initTable ()
648 {
649 return $('#example').dataTable( {
650 "sScrollY": "200px",
651 "bPaginate": false,
652 "bRetrieve": true
653 } );
654 }
655
656 function tableActions ()
657 {
658 var oTable = initTable();
659 // perform API operations with oTable
660 }</pre>
661 </div>
662 </div></dd><dt class=" even"><a name="bScrollAutoCss"></a><a name="bScrollAutoCss_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bScrollAutoCss">bScrollAutoCss</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Indicate if DataTables should be allowed to set the padding / margin
663 etc for the scrolling header elements or not. Typically you will want
664 this.</p><div class="collapse_details"><dl class="details">
665
666 </dl>
667 <h5>Example</h5>
668 <div class="example-code">
669 <pre class="brush: js"> $(document).ready( function() {
670 $('#example').dataTable( {
671 "bScrollAutoCss": false,
672 "sScrollY": "200px"
673 } );
674 } );</pre>
675 </div>
676 </div></dd><dt class=" odd"><a name="bScrollCollapse"></a><a name="bScrollCollapse_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bScrollCollapse">bScrollCollapse</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>When vertical (y) scrolling is enabled, DataTables will force the height of
677 the table's viewport to the given height at all times (useful for layout).
678 However, this can look odd when filtering data down to a small data set,
679 and the footer is left "floating" further down. This parameter (when
680 enabled) will cause DataTables to collapse the table's viewport down when
681 the result set will fit within the given Y height.</p><div class="collapse_details"><dl class="details">
682
683 </dl>
684 <h5>Example</h5>
685 <div class="example-code">
686 <pre class="brush: js"> $(document).ready( function() {
687 $('#example').dataTable( {
688 "sScrollY": "200",
689 "bScrollCollapse": true
690 } );
691 } );</pre>
692 </div>
693 </div></dd><dt class=" even"><a name="bScrollInfinite"></a><a name="bScrollInfinite_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bScrollInfinite">bScrollInfinite</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable infinite scrolling for DataTables (to be used in combination with
694 sScrollY). Infinite scrolling means that DataTables will continually load
695 data as a user scrolls through a table, which is very useful for large
696 dataset. This cannot be used with pagination, which is automatically
697 disabled. Note - the Scroller extra for DataTables is recommended in
698 in preference to this option.</p><div class="collapse_details"><dl class="details">
699
700 </dl>
701 <h5>Example</h5>
702 <div class="example-code">
703 <pre class="brush: js"> $(document).ready( function() {
704 $('#example').dataTable( {
705 "bScrollInfinite": true,
706 "bScrollCollapse": true,
707 "sScrollY": "200px"
708 } );
709 } );</pre>
710 </div>
711 </div></dd><dt class=" odd"><a name="bServerSide"></a><a name="bServerSide_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bServerSide">bServerSide</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Configure DataTables to use server-side processing. Note that the
712 sAjaxSource parameter must also be given in order to give DataTables a
713 source to obtain the required data for each draw.</p><div class="collapse_details"><dl class="details">
714
715 </dl>
716 <h5>Example</h5>
717 <div class="example-code">
718 <pre class="brush: js"> $(document).ready( function () {
719 $('#example').dataTable( {
720 "bServerSide": true,
721 "sAjaxSource": "xhr.php"
722 } );
723 } );</pre>
724 </div>
725 </div></dd><dt class=" even"><a name="bSort"></a><a name="bSort_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSort">bSort</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable sorting of columns. Sorting of individual columns can be
726 disabled by the "bSortable" option for each column.</p><div class="collapse_details"><dl class="details">
727
728 </dl>
729 <h5>Example</h5>
730 <div class="example-code">
731 <pre class="brush: js"> $(document).ready( function () {
732 $('#example').dataTable( {
733 "bSort": false
734 } );
735 } );</pre>
736 </div>
737 </div></dd><dt class=" odd"><a name="bSortCellsTop"></a><a name="bSortCellsTop_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSortCellsTop">bSortCellsTop</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Allows control over whether DataTables should use the top (true) unique
738 cell that is found for a single column, or the bottom (false - default).
739 This is useful when using complex headers.</p><div class="collapse_details"><dl class="details">
740
741 </dl>
742 <h5>Example</h5>
743 <div class="example-code">
744 <pre class="brush: js"> $(document).ready( function() {
745 $('#example').dataTable( {
746 "bSortCellsTop": true
747 } );
748 } );</pre>
749 </div>
750 </div></dd><dt class=" even"><a name="bSortClasses"></a><a name="bSortClasses_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bSortClasses">bSortClasses</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable the addition of the classes 'sorting_1', 'sorting_2' and
751 'sorting_3' to the columns which are currently being sorted on. This is
752 presented as a feature switch as it can increase processing time (while
753 classes are removed and added) so for large data sets you might want to
754 turn this off.</p><div class="collapse_details"><dl class="details">
755
756 </dl>
757 <h5>Example</h5>
758 <div class="example-code">
759 <pre class="brush: js"> $(document).ready( function () {
760 $('#example').dataTable( {
761 "bSortClasses": false
762 } );
763 } );</pre>
764 </div>
765 </div></dd><dt class=" odd"><a name="bStateSave"></a><a name="bStateSave_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#bStateSave">bStateSave</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable state saving. When enabled a cookie will be used to save
766 table display information such as pagination information, display length,
767 filtering and sorting. As such when the end user reloads the page the
768 display display will match what thy had previously set up.</p><div class="collapse_details"><dl class="details">
769
770 </dl>
771 <h5>Example</h5>
772 <div class="example-code">
773 <pre class="brush: js"> $(document).ready( function () {
774 $('#example').dataTable( {
775 "bStateSave": true
776 } );
777 } );</pre>
778 </div>
779 </div></dd><dt id="DataTable.defaults.fnCookieCallback" class=" even"><a name="fnCookieCallback"></a><a name="fnCookieCallback_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnCookieCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>Customise the cookie and / or the parameters being stored when using
780 DataTables with state saving enabled. This function is called whenever
781 the cookie is modified, and it expects a fully formed cookie string to be
782 returned. Note that the data object passed in is a Javascript object which
783 must be converted to a string (JSON.stringify for example).</p><div class="collapse_details"><dl class="details">
784
785 </dl>
786 <h5>Parameters:</h5>
787
788 <table class="params">
789 <thead>
790 <tr>
791 <th width="20"></th>
792 <th width="12%" class="bottom_border name">Name</th>
793 <th width="10%" class="bottom_border">Type</th>
794 <th width="10%" class="bottom_border">Attributes</th>
795 <th width="10%" class="bottom_border">Default</th>
796 <th class="last bottom_border">Description</th>
797 </tr>
798 </thead>
799
800 <tbody>
801 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sName</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Name of the cookie defined by DataTables</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oData</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Data to be stored in the cookie</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">sExpires</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Cookie expires string</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">sPath</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Path of the cookie to set</p></td></tr>
802 </tbody>
803 </table><h5>Returns:</h5><p class="returns"><p>Cookie formatted string (which should be encoded by
804 using encodeURIComponent())</p></p><h5>Example:</h5>
805 <div class="example-code">
806 <pre class="brush: js"> $(document).ready( function () {
807 $('#example').dataTable( {
808 "fnCookieCallback": function (sName, oData, sExpires, sPath) {
809 // Customise oData or sName or whatever else here
810 return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
811 }
812 } );
813 } );</pre>
814 </div>
815 </div>
816 <dt id="DataTable.defaults.fnCreatedRow" class=" odd"><a name="fnCreatedRow"></a><a name="fnCreatedRow_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnCreatedRow</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p>This function is called when a TR element is created (and all TD child
817 elements have been inserted), or registered if using a DOM source, allowing
818 manipulation of the TR element (adding classes etc).</p><div class="collapse_details"><dl class="details">
819
820 </dl>
821 <h5>Parameters:</h5>
822
823 <table class="params">
824 <thead>
825 <tr>
826 <th width="20"></th>
827 <th width="12%" class="bottom_border name">Name</th>
828 <th width="10%" class="bottom_border">Type</th>
829 <th width="10%" class="bottom_border">Attributes</th>
830 <th width="10%" class="bottom_border">Default</th>
831 <th class="last bottom_border">Description</th>
832 </tr>
833 </thead>
834
835 <tbody>
836 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nRow</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>"TR" element for the current row</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">aData</td><td class="type type-param">array</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Raw data array for this row</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">iDataIndex</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The index of this row in aoData</p></td></tr>
837 </tbody>
838 </table><h5>Example:</h5>
839 <div class="example-code">
840 <pre class="brush: js"> $(document).ready( function() {
841 $('#example').dataTable( {
842 "fnCreatedRow": function( nRow, aData, iDataIndex ) {
843 // Bold the grade for all 'A' grade browsers
844 if ( aData[4] == "A" )
845 {
846 $('td:eq(4)', nRow).html( '<b>A</b>' );
847 }
848 }
849 } );
850 } );</pre>
851 </div>
852 </div>
853 <dt id="DataTable.defaults.fnDrawCallback" class=" even"><a name="fnDrawCallback"></a><a name="fnDrawCallback_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnDrawCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>This function is called on every 'draw' event, and allows you to
854 dynamically modify any aspect you want about the created DOM.</p><div class="collapse_details"><dl class="details">
855
856 </dl>
857 <h5>Parameters:</h5>
858
859 <table class="params">
860 <thead>
861 <tr>
862 <th width="20"></th>
863 <th width="12%" class="bottom_border name">Name</th>
864 <th width="10%" class="bottom_border">Type</th>
865 <th width="10%" class="bottom_border">Attributes</th>
866 <th width="10%" class="bottom_border">Default</th>
867 <th class="last bottom_border">Description</th>
868 </tr>
869 </thead>
870
871 <tbody>
872 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr>
873 </tbody>
874 </table><h5>Example:</h5>
875 <div class="example-code">
876 <pre class="brush: js"> $(document).ready( function() {
877 $('#example').dataTable( {
878 "fnDrawCallback": function( oSettings ) {
879 alert( 'DataTables has redrawn the table' );
880 }
881 } );
882 } );</pre>
883 </div>
884 </div>
885 <dt id="DataTable.defaults.fnFooterCallback" class=" odd"><a name="fnFooterCallback"></a><a name="fnFooterCallback_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnFooterCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p>Identical to fnHeaderCallback() but for the table footer this function
886 allows you to modify the table footer on every 'draw' even.</p><div class="collapse_details"><dl class="details">
887
888 </dl>
889 <h5>Parameters:</h5>
890
891 <table class="params">
892 <thead>
893 <tr>
894 <th width="20"></th>
895 <th width="12%" class="bottom_border name">Name</th>
896 <th width="10%" class="bottom_border">Type</th>
897 <th width="10%" class="bottom_border">Attributes</th>
898 <th width="10%" class="bottom_border">Default</th>
899 <th class="last bottom_border">Description</th>
900 </tr>
901 </thead>
902
903 <tbody>
904 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nFoot</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>"TR" element for the footer</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">aData</td><td class="type type-param">array</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Full table data (as derived from the original HTML)</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">iStart</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Index for the current display starting point in the
905 display array</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">iEnd</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Index for the current display ending point in the
906 display array</p></td></tr><tr class="even"><td class="number right_border"><div>5</div></td><td class="name">aiDisplay</td><td class="type type-param">array int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Index array to translate the visual position
907 to the full data array</p></td></tr>
908 </tbody>
909 </table><h5>Example:</h5>
910 <div class="example-code">
911 <pre class="brush: js"> $(document).ready( function() {
912 $('#example').dataTable( {
913 "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) {
914 nFoot.getElementsByTagName('th')[0].innerHTML = "Starting index is "+iStart;
915 }
916 } );
917 } )</pre>
918 </div>
919 </div>
920 <dt id="DataTable.defaults.fnFormatNumber" class=" even"><a name="fnFormatNumber"></a><a name="fnFormatNumber_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnFormatNumber</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>When rendering large numbers in the information element for the table
921 (i.e. "Showing 1 to 10 of 57 entries") DataTables will render large numbers
922 to have a comma separator for the 'thousands' units (e.g. 1 million is
923 rendered as "1,000,000") to help readability for the end user. This
924 function will override the default method DataTables uses.</p><div class="collapse_details"><dl class="details">
925
926 </dl>
927 <h5>Parameters:</h5>
928
929 <table class="params">
930 <thead>
931 <tr>
932 <th width="20"></th>
933 <th width="12%" class="bottom_border name">Name</th>
934 <th width="10%" class="bottom_border">Type</th>
935 <th width="10%" class="bottom_border">Attributes</th>
936 <th width="10%" class="bottom_border">Default</th>
937 <th class="last bottom_border">Description</th>
938 </tr>
939 </thead>
940
941 <tbody>
942 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iIn</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>number to be formatted</p></td></tr>
943 </tbody>
944 </table><h5>Returns:</h5><p class="returns"><p>formatted string for DataTables to show the number</p></p><h5>Example:</h5>
945 <div class="example-code">
946 <pre class="brush: js"> $(document).ready( function() {
947 $('#example').dataTable( {
948 "fnFormatNumber": function ( iIn ) {
949 if ( iIn &lt; 1000 ) {
950 return iIn;
951 } else {
952 var
953 s=(iIn+""),
954 a=s.split(""), out="",
955 iLen=s.length;
956
957 for ( var i=0 ; i&lt;iLen ; i++ ) {
958 if ( i%3 === 0 &amp;&amp; i !== 0 ) {
959 out = "'"+out;
960 }
961 out = a[iLen-i-1]+out;
962 }
963 }
964 return out;
965 };
966 } );
967 } );</pre>
968 </div>
969 </div>
970 <dt id="DataTable.defaults.fnHeaderCallback" class=" odd"><a name="fnHeaderCallback"></a><a name="fnHeaderCallback_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnHeaderCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p>This function is called on every 'draw' event, and allows you to
971 dynamically modify the header row. This can be used to calculate and
972 display useful information about the table.</p><div class="collapse_details"><dl class="details">
973
974 </dl>
975 <h5>Parameters:</h5>
976
977 <table class="params">
978 <thead>
979 <tr>
980 <th width="20"></th>
981 <th width="12%" class="bottom_border name">Name</th>
982 <th width="10%" class="bottom_border">Type</th>
983 <th width="10%" class="bottom_border">Attributes</th>
984 <th width="10%" class="bottom_border">Default</th>
985 <th class="last bottom_border">Description</th>
986 </tr>
987 </thead>
988
989 <tbody>
990 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nHead</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>"TR" element for the header</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">aData</td><td class="type type-param">array</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Full table data (as derived from the original HTML)</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">iStart</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Index for the current display starting point in the
991 display array</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">iEnd</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Index for the current display ending point in the
992 display array</p></td></tr><tr class="even"><td class="number right_border"><div>5</div></td><td class="name">aiDisplay</td><td class="type type-param">array int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Index array to translate the visual position
993 to the full data array</p></td></tr>
994 </tbody>
995 </table><h5>Example:</h5>
996 <div class="example-code">
997 <pre class="brush: js"> $(document).ready( function() {
998 $('#example').dataTable( {
999 "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
1000 nHead.getElementsByTagName('th')[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";
1001 }
1002 } );
1003 } )</pre>
1004 </div>
1005 </div>
1006 <dt id="DataTable.defaults.fnInfoCallback" class=" even"><a name="fnInfoCallback"></a><a name="fnInfoCallback_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnInfoCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>The information element can be used to convey information about the current
1007 state of the table. Although the internationalisation options presented by
1008 DataTables are quite capable of dealing with most customisations, there may
1009 be times where you wish to customise the string further. This callback
1010 allows you to do exactly that.</p><div class="collapse_details"><dl class="details">
1011
1012 </dl>
1013 <h5>Parameters:</h5>
1014
1015 <table class="params">
1016 <thead>
1017 <tr>
1018 <th width="20"></th>
1019 <th width="12%" class="bottom_border name">Name</th>
1020 <th width="10%" class="bottom_border">Type</th>
1021 <th width="10%" class="bottom_border">Attributes</th>
1022 <th width="10%" class="bottom_border">Default</th>
1023 <th class="last bottom_border">Description</th>
1024 </tr>
1025 </thead>
1026
1027 <tbody>
1028 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">iStart</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Starting position in data for the draw</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">iEnd</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>End position in data for the draw</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">iMax</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Total number of rows in the table (regardless of
1029 filtering)</p></td></tr><tr class="even"><td class="number right_border"><div>5</div></td><td class="name">iTotal</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Total number of rows in the data set, after filtering</p></td></tr><tr class="odd"><td class="number right_border"><div>6</div></td><td class="name">sPre</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The string that DataTables has formatted using it's
1030 own rules</p></td></tr>
1031 </tbody>
1032 </table><h5>Returns:</h5><p class="returns"><p>The string to be displayed in the information element.</p></p><h5>Example:</h5>
1033 <div class="example-code">
1034 <pre class="brush: js"> $('#example').dataTable( {
1035 "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
1036 return iStart +" to "+ iEnd;
1037 }
1038 } );</pre>
1039 </div>
1040 </div>
1041 <dt id="DataTable.defaults.fnInitComplete" class=" odd"><a name="fnInitComplete"></a><a name="fnInitComplete_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnInitComplete</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p>Called when the table has been initialised. Normally DataTables will
1042 initialise sequentially and there will be no need for this function,
1043 however, this does not hold true when using external language information
1044 since that is obtained using an async XHR call.</p><div class="collapse_details"><dl class="details">
1045
1046 </dl>
1047 <h5>Parameters:</h5>
1048
1049 <table class="params">
1050 <thead>
1051 <tr>
1052 <th width="20"></th>
1053 <th width="12%" class="bottom_border name">Name</th>
1054 <th width="10%" class="bottom_border">Type</th>
1055 <th width="10%" class="bottom_border">Attributes</th>
1056 <th width="10%" class="bottom_border">Default</th>
1057 <th class="last bottom_border">Description</th>
1058 </tr>
1059 </thead>
1060
1061 <tbody>
1062 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">json</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The JSON object request from the server - only
1063 present if client-side Ajax sourced data is used</p></td></tr>
1064 </tbody>
1065 </table><h5>Example:</h5>
1066 <div class="example-code">
1067 <pre class="brush: js"> $(document).ready( function() {
1068 $('#example').dataTable( {
1069 "fnInitComplete": function(oSettings, json) {
1070 alert( 'DataTables has finished its initialisation.' );
1071 }
1072 } );
1073 } )</pre>
1074 </div>
1075 </div>
1076 <dt id="DataTable.defaults.fnPreDrawCallback" class=" even"><a name="fnPreDrawCallback"></a><a name="fnPreDrawCallback_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnPreDrawCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>Called at the very start of each table draw and can be used to cancel the
1077 draw by returning false, any other return (including undefined) results in
1078 the full draw occurring).</p><div class="collapse_details"><dl class="details">
1079
1080 </dl>
1081 <h5>Parameters:</h5>
1082
1083 <table class="params">
1084 <thead>
1085 <tr>
1086 <th width="20"></th>
1087 <th width="12%" class="bottom_border name">Name</th>
1088 <th width="10%" class="bottom_border">Type</th>
1089 <th width="10%" class="bottom_border">Attributes</th>
1090 <th width="10%" class="bottom_border">Default</th>
1091 <th class="last bottom_border">Description</th>
1092 </tr>
1093 </thead>
1094
1095 <tbody>
1096 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr>
1097 </tbody>
1098 </table><h5>Returns:</h5><p class="returns"><p>False will cancel the draw, anything else (including no
1099 return) will allow it to complete.</p></p><h5>Example:</h5>
1100 <div class="example-code">
1101 <pre class="brush: js"> $(document).ready( function() {
1102 $('#example').dataTable( {
1103 "fnPreDrawCallback": function( oSettings ) {
1104 if ( $('#test').val() == 1 ) {
1105 return false;
1106 }
1107 }
1108 } );
1109 } );</pre>
1110 </div>
1111 </div>
1112 <dt id="DataTable.defaults.fnRowCallback" class=" odd"><a name="fnRowCallback"></a><a name="fnRowCallback_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnRowCallback</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p>This function allows you to 'post process' each row after it have been
1113 generated for each table draw, but before it is rendered on screen. This
1114 function might be used for setting the row class name etc.</p><div class="collapse_details"><dl class="details">
1115
1116 </dl>
1117 <h5>Parameters:</h5>
1118
1119 <table class="params">
1120 <thead>
1121 <tr>
1122 <th width="20"></th>
1123 <th width="12%" class="bottom_border name">Name</th>
1124 <th width="10%" class="bottom_border">Type</th>
1125 <th width="10%" class="bottom_border">Attributes</th>
1126 <th width="10%" class="bottom_border">Default</th>
1127 <th class="last bottom_border">Description</th>
1128 </tr>
1129 </thead>
1130
1131 <tbody>
1132 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nRow</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>"TR" element for the current row</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">aData</td><td class="type type-param">array</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Raw data array for this row</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">iDisplayIndex</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The display index for the current table draw</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">iDisplayIndexFull</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The index of the data in the full list of
1133 rows (after filtering)</p></td></tr>
1134 </tbody>
1135 </table><h5>Example:</h5>
1136 <div class="example-code">
1137 <pre class="brush: js"> $(document).ready( function() {
1138 $('#example').dataTable( {
1139 "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
1140 // Bold the grade for all 'A' grade browsers
1141 if ( aData[4] == "A" )
1142 {
1143 $('td:eq(4)', nRow).html( '<b>A</b>' );
1144 }
1145 }
1146 } );
1147 } );</pre>
1148 </div>
1149 </div>
1150 <dt id="DataTable.defaults.fnServerData" class=" even"><a name="fnServerData"></a><a name="fnServerData_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnServerData</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>This parameter allows you to override the default function which obtains
1151 the data from the server ($.getJSON) so something more suitable for your
1152 application. For example you could use POST data, or pull information from
1153 a Gears or AIR database.</p><div class="collapse_details"><dl class="details">
1154
1155 </dl>
1156 <h5>Parameters:</h5>
1157
1158 <table class="params">
1159 <thead>
1160 <tr>
1161 <th width="20"></th>
1162 <th width="12%" class="bottom_border name">Name</th>
1163 <th width="10%" class="bottom_border">Type</th>
1164 <th width="10%" class="bottom_border">Attributes</th>
1165 <th width="10%" class="bottom_border">Default</th>
1166 <th class="last bottom_border">Description</th>
1167 </tr>
1168 </thead>
1169
1170 <tbody>
1171 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sSource</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>HTTP source to obtain the data from (sAjaxSource)</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">aoData</td><td class="type type-param">array</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>A key/value pair object containing the data to send
1172 to the server</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">fnCallback</td><td class="type type-param">function</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>to be called on completion of the data get
1173 process that will draw the data on the page.</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr>
1174 </tbody>
1175 </table><h5>Example:</h5>
1176 <div class="example-code">
1177 <pre class="brush: js"> // POST data to server
1178 $(document).ready( function() {
1179 $('#example').dataTable( {
1180 "bProcessing": true,
1181 "bServerSide": true,
1182 "sAjaxSource": "xhr.php",
1183 "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
1184 oSettings.jqXHR = $.ajax( {
1185 "dataType": 'json',
1186 "type": "POST",
1187 "url": sSource,
1188 "data": aoData,
1189 "success": fnCallback
1190 } );
1191 }
1192 } );
1193 } );</pre>
1194 </div>
1195 </div>
1196 <dt id="DataTable.defaults.fnServerParams" class=" odd"><a name="fnServerParams"></a><a name="fnServerParams_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnServerParams</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p>It is often useful to send extra data to the server when making an Ajax
1197 request - for example custom filtering information, and this callback
1198 function makes it trivial to send extra information to the server. The
1199 passed in parameter is the data set that has been constructed by
1200 DataTables, and you can add to this or modify it as you require.</p><div class="collapse_details"><dl class="details">
1201
1202 </dl>
1203 <h5>Parameters:</h5>
1204
1205 <table class="params">
1206 <thead>
1207 <tr>
1208 <th width="20"></th>
1209 <th width="12%" class="bottom_border name">Name</th>
1210 <th width="10%" class="bottom_border">Type</th>
1211 <th width="10%" class="bottom_border">Attributes</th>
1212 <th width="10%" class="bottom_border">Default</th>
1213 <th class="last bottom_border">Description</th>
1214 </tr>
1215 </thead>
1216
1217 <tbody>
1218 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">aoData</td><td class="type type-param">array</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Data array (array of objects which are name/value
1219 pairs) that has been constructed by DataTables and will be sent to the
1220 server. In the case of Ajax sourced data with server-side processing
1221 this will be an empty array, for server-side processing there will be a
1222 significant number of parameters!</p></td></tr>
1223 </tbody>
1224 </table><h5>Returns:</h5><p class="returns"><p>Ensure that you modify the aoData array passed in,
1225 as this is passed by reference.</p></p><h5>Example:</h5>
1226 <div class="example-code">
1227 <pre class="brush: js"> $(document).ready( function() {
1228 $('#example').dataTable( {
1229 "bProcessing": true,
1230 "bServerSide": true,
1231 "sAjaxSource": "scripts/server_processing.php",
1232 "fnServerParams": function ( aoData ) {
1233 aoData.push( { "name": "more_data", "value": "my_value" } );
1234 }
1235 } );
1236 } );</pre>
1237 </div>
1238 </div>
1239 <dt id="DataTable.defaults.fnStateLoad" class=" even"><a name="fnStateLoad"></a><a name="fnStateLoad_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnStateLoad</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>Load the table state. With this function you can define from where, and how, the
1240 state of a table is loaded. By default DataTables will load from its state saving
1241 cookie, but you might wish to use local storage (HTML5) or a server-side database.</p><div class="collapse_details"><dl class="details">
1242
1243 </dl>
1244 <h5>Parameters:</h5>
1245
1246 <table class="params">
1247 <thead>
1248 <tr>
1249 <th width="20"></th>
1250 <th width="12%" class="bottom_border name">Name</th>
1251 <th width="10%" class="bottom_border">Type</th>
1252 <th width="10%" class="bottom_border">Attributes</th>
1253 <th width="10%" class="bottom_border">Default</th>
1254 <th class="last bottom_border">Description</th>
1255 </tr>
1256 </thead>
1257
1258 <tbody>
1259 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr>
1260 </tbody>
1261 </table><h5>Returns:</h5><p class="returns"><p>The DataTables state object to be loaded</p></p><h5>Example:</h5>
1262 <div class="example-code">
1263 <pre class="brush: js"> $(document).ready( function() {
1264 $('#example').dataTable( {
1265 "bStateSave": true,
1266 "fnStateLoad": function (oSettings) {
1267 var o;
1268
1269 // Send an Ajax request to the server to get the data. Note that
1270 // this is a synchronous request.
1271 $.ajax( {
1272 "url": "/state_load",
1273 "async": false,
1274 "dataType": "json",
1275 "success": function (json) {
1276 o = json;
1277 }
1278 } );
1279
1280 return o;
1281 }
1282 } );
1283 } );</pre>
1284 </div>
1285 </div>
1286 <dt id="DataTable.defaults.fnStateLoaded" class=" odd"><a name="fnStateLoaded"></a><a name="fnStateLoaded_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnStateLoaded</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p>Callback that is called when the state has been loaded from the state saving method
1287 and the DataTables settings object has been modified as a result of the loaded state.</p><div class="collapse_details"><dl class="details">
1288
1289 </dl>
1290 <h5>Parameters:</h5>
1291
1292 <table class="params">
1293 <thead>
1294 <tr>
1295 <th width="20"></th>
1296 <th width="12%" class="bottom_border name">Name</th>
1297 <th width="10%" class="bottom_border">Type</th>
1298 <th width="10%" class="bottom_border">Attributes</th>
1299 <th width="10%" class="bottom_border">Default</th>
1300 <th class="last bottom_border">Description</th>
1301 </tr>
1302 </thead>
1303
1304 <tbody>
1305 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oData</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The state object that was loaded</p></td></tr>
1306 </tbody>
1307 </table><h5>Example:</h5>
1308 <div class="example-code">
1309 <pre class="brush: js"> // Show an alert with the filtering value that was saved
1310 $(document).ready( function() {
1311 $('#example').dataTable( {
1312 "bStateSave": true,
1313 "fnStateLoaded": function (oSettings, oData) {
1314 alert( 'Saved filter was: '+oData.oSearch.sSearch );
1315 }
1316 } );
1317 } );</pre>
1318 </div>
1319 </div>
1320 <dt id="DataTable.defaults.fnStateLoadParams" class=" even"><a name="fnStateLoadParams"></a><a name="fnStateLoadParams_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnStateLoadParams</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>Callback which allows modification of the saved state prior to loading that state.
1321 This callback is called when the table is loading state from the stored data, but
1322 prior to the settings object being modified by the saved state. Note that for
1323 plug-in authors, you should use the 'stateLoadParams' event to load parameters for
1324 a plug-in.</p><div class="collapse_details"><dl class="details">
1325
1326 </dl>
1327 <h5>Parameters:</h5>
1328
1329 <table class="params">
1330 <thead>
1331 <tr>
1332 <th width="20"></th>
1333 <th width="12%" class="bottom_border name">Name</th>
1334 <th width="10%" class="bottom_border">Type</th>
1335 <th width="10%" class="bottom_border">Attributes</th>
1336 <th width="10%" class="bottom_border">Default</th>
1337 <th class="last bottom_border">Description</th>
1338 </tr>
1339 </thead>
1340
1341 <tbody>
1342 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oData</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The state object that is to be loaded</p></td></tr>
1343 </tbody>
1344 </table><h5>Examples:</h5>
1345 <div class="example-code">
1346 <pre class="brush: js"> // Remove a saved filter, so filtering is never loaded
1347 $(document).ready( function() {
1348 $('#example').dataTable( {
1349 "bStateSave": true,
1350 "fnStateLoadParams": function (oSettings, oData) {
1351 oData.oSearch.sSearch = "";
1352 }
1353 } );
1354 } );
1355
1356 </pre>
1357 </div>
1358
1359 <div class="example-code">
1360 <pre class="brush: js"> // Disallow state loading by returning false
1361 $(document).ready( function() {
1362 $('#example').dataTable( {
1363 "bStateSave": true,
1364 "fnStateLoadParams": function (oSettings, oData) {
1365 return false;
1366 }
1367 } );
1368 } );</pre>
1369 </div>
1370 </div>
1371 <dt id="DataTable.defaults.fnStateSave" class=" odd"><a name="fnStateSave"></a><a name="fnStateSave_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnStateSave</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p>Save the table state. This function allows you to define where and how the state
1372 information for the table is stored - by default it will use a cookie, but you
1373 might want to use local storage (HTML5) or a server-side database.</p><div class="collapse_details"><dl class="details">
1374
1375 </dl>
1376 <h5>Parameters:</h5>
1377
1378 <table class="params">
1379 <thead>
1380 <tr>
1381 <th width="20"></th>
1382 <th width="12%" class="bottom_border name">Name</th>
1383 <th width="10%" class="bottom_border">Type</th>
1384 <th width="10%" class="bottom_border">Attributes</th>
1385 <th width="10%" class="bottom_border">Default</th>
1386 <th class="last bottom_border">Description</th>
1387 </tr>
1388 </thead>
1389
1390 <tbody>
1391 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oData</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The state object to be saved</p></td></tr>
1392 </tbody>
1393 </table><h5>Example:</h5>
1394 <div class="example-code">
1395 <pre class="brush: js"> $(document).ready( function() {
1396 $('#example').dataTable( {
1397 "bStateSave": true,
1398 "fnStateSave": function (oSettings, oData) {
1399 // Send an Ajax request to the server with the state object
1400 $.ajax( {
1401 "url": "/state_save",
1402 "data": oData,
1403 "dataType": "json",
1404 "method": "POST"
1405 "success": function () {}
1406 } );
1407 }
1408 } );
1409 } );</pre>
1410 </div>
1411 </div>
1412 <dt id="DataTable.defaults.fnStateSaveParams" class=" even"><a name="fnStateSaveParams"></a><a name="fnStateSaveParams_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnStateSaveParams</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>Callback which allows modification of the state to be saved. Called when the table
1413 has changed state a new state save is required. This method allows modification of
1414 the state saving object prior to actually doing the save, including addition or
1415 other state properties or modification. Note that for plug-in authors, you should
1416 use the 'stateSaveParams' event to save parameters for a plug-in.</p><div class="collapse_details"><dl class="details">
1417
1418 </dl>
1419 <h5>Parameters:</h5>
1420
1421 <table class="params">
1422 <thead>
1423 <tr>
1424 <th width="20"></th>
1425 <th width="12%" class="bottom_border name">Name</th>
1426 <th width="10%" class="bottom_border">Type</th>
1427 <th width="10%" class="bottom_border">Attributes</th>
1428 <th width="10%" class="bottom_border">Default</th>
1429 <th class="last bottom_border">Description</th>
1430 </tr>
1431 </thead>
1432
1433 <tbody>
1434 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oData</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The state object to be saved</p></td></tr>
1435 </tbody>
1436 </table><h5>Example:</h5>
1437 <div class="example-code">
1438 <pre class="brush: js"> // Remove a saved filter, so filtering is never saved
1439 $(document).ready( function() {
1440 $('#example').dataTable( {
1441 "bStateSave": true,
1442 "fnStateSaveParams": function (oSettings, oData) {
1443 oData.oSearch.sSearch = "";
1444 }
1445 } );
1446 } );</pre>
1447 </div>
1448 </div>
1449 <dt class=" odd"><a name="iCookieDuration"></a><a name="iCookieDuration_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iCookieDuration">iCookieDuration</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" odd"><p>Duration of the cookie which is used for storing session information. This
1450 value is given in seconds.</p><div class="collapse_details"><dl class="details">
1451
1452 </dl>
1453 <h5>Example</h5>
1454 <div class="example-code">
1455 <pre class="brush: js"> $(document).ready( function() {
1456 $('#example').dataTable( {
1457 "iCookieDuration": 60*60*24; // 1 day
1458 } );
1459 } )</pre>
1460 </div>
1461 </div></dd><dt class=" even"><a name="iDeferLoading"></a><a name="iDeferLoading_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iDeferLoading">iDeferLoading</a></span><span class="type-sig"><span class="type-signature"> :int|array</span></span></dt><dd class=" even"><p>When enabled DataTables will not make a request to the server for the first
1462 page draw - rather it will use the data already on the page (no sorting etc
1463 will be applied to it), thus saving on an XHR at load time. iDeferLoading
1464 is used to indicate that deferred loading is required, but it is also used
1465 to tell DataTables how many records there are in the full table (allowing
1466 the information element and pagination to be displayed correctly). In the case
1467 where a filtering is applied to the table on initial load, this can be
1468 indicated by giving the parameter as an array, where the first element is
1469 the number of records available after filtering and the second element is the
1470 number of records without filtering (allowing the table information element
1471 to be shown correctly).</p><div class="collapse_details"><dl class="details">
1472
1473 </dl>
1474 <h5>Examples</h5>
1475 <div class="example-code">
1476 <pre class="brush: js"> // 57 records available in the table, no filtering applied
1477 $(document).ready( function() {
1478 $('#example').dataTable( {
1479 "bServerSide": true,
1480 "sAjaxSource": "scripts/server_processing.php",
1481 "iDeferLoading": 57
1482 } );
1483 } );
1484
1485 </pre>
1486 </div>
1487
1488 <div class="example-code">
1489 <pre class="brush: js"> // 57 records after filtering, 100 without filtering (an initial filter applied)
1490 $(document).ready( function() {
1491 $('#example').dataTable( {
1492 "bServerSide": true,
1493 "sAjaxSource": "scripts/server_processing.php",
1494 "iDeferLoading": [ 57, 100 ],
1495 "oSearch": {
1496 "sSearch": "my_filter"
1497 }
1498 } );
1499 } );</pre>
1500 </div>
1501 </div></dd><dt class=" odd"><a name="iDisplayLength"></a><a name="iDisplayLength_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iDisplayLength">iDisplayLength</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" odd"><p>Number of rows to display on a single page when using pagination. If
1502 feature enabled (bLengthChange) then the end user will be able to override
1503 this to a custom setting using a pop-up menu.</p><div class="collapse_details"><dl class="details">
1504
1505 </dl>
1506 <h5>Example</h5>
1507 <div class="example-code">
1508 <pre class="brush: js"> $(document).ready( function() {
1509 $('#example').dataTable( {
1510 "iDisplayLength": 50
1511 } );
1512 } )</pre>
1513 </div>
1514 </div></dd><dt class=" even"><a name="iDisplayStart"></a><a name="iDisplayStart_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iDisplayStart">iDisplayStart</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" even"><p>Define the starting point for data display when using DataTables with
1515 pagination. Note that this parameter is the number of records, rather than
1516 the page number, so if you have 10 records per page and want to start on
1517 the third page, it should be "20".</p><div class="collapse_details"><dl class="details">
1518
1519 </dl>
1520 <h5>Example</h5>
1521 <div class="example-code">
1522 <pre class="brush: js"> $(document).ready( function() {
1523 $('#example').dataTable( {
1524 "iDisplayStart": 20
1525 } );
1526 } )</pre>
1527 </div>
1528 </div></dd><dt class=" odd"><a name="iScrollLoadGap"></a><a name="iScrollLoadGap_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iScrollLoadGap">iScrollLoadGap</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" odd"><p>The scroll gap is the amount of scrolling that is left to go before
1529 DataTables will load the next 'page' of data automatically. You typically
1530 want a gap which is big enough that the scrolling will be smooth for the
1531 user, while not so large that it will load more data than need.</p><div class="collapse_details"><dl class="details">
1532
1533 </dl>
1534 <h5>Example</h5>
1535 <div class="example-code">
1536 <pre class="brush: js"> $(document).ready( function() {
1537 $('#example').dataTable( {
1538 "bScrollInfinite": true,
1539 "bScrollCollapse": true,
1540 "sScrollY": "200px",
1541 "iScrollLoadGap": 50
1542 } );
1543 } );</pre>
1544 </div>
1545 </div></dd><dt class=" even"><a name="iTabIndex"></a><a name="iTabIndex_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#iTabIndex">iTabIndex</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" even"><p>By default DataTables allows keyboard navigation of the table (sorting, paging,
1546 and filtering) by adding a tabindex attribute to the required elements. This
1547 allows you to tab through the controls and press the enter key to activate them.
1548 The tabindex is default 0, meaning that the tab follows the flow of the document.
1549 You can overrule this using this parameter if you wish. Use a value of -1 to
1550 disable built-in keyboard navigation.</p><div class="collapse_details"><dl class="details">
1551
1552 </dl>
1553 <h5>Example</h5>
1554 <div class="example-code">
1555 <pre class="brush: js"> $(document).ready( function() {
1556 $('#example').dataTable( {
1557 "iTabIndex": 1
1558 } );
1559 } );</pre>
1560 </div>
1561 </div></dd><dt class=" odd"><a name="sAjaxDataProp"></a><a name="sAjaxDataProp_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sAjaxDataProp">sAjaxDataProp</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>By default DataTables will look for the property 'aaData' when obtaining
1562 data from an Ajax source or for server-side processing - this parameter
1563 allows that property to be changed. You can use Javascript dotted object
1564 notation to get a data source for multiple levels of nesting.</p><div class="collapse_details"><dl class="details">
1565
1566 </dl>
1567 <h5>Examples</h5>
1568 <div class="example-code">
1569 <pre class="brush: js"> // Get data from { "data": [...] }
1570 $(document).ready( function() {
1571 var oTable = $('#example').dataTable( {
1572 "sAjaxSource": "sources/data.txt",
1573 "sAjaxDataProp": "data"
1574 } );
1575 } );
1576
1577 </pre>
1578 </div>
1579
1580 <div class="example-code">
1581 <pre class="brush: js"> // Get data from { "data": { "inner": [...] } }
1582 $(document).ready( function() {
1583 var oTable = $('#example').dataTable( {
1584 "sAjaxSource": "sources/data.txt",
1585 "sAjaxDataProp": "data.inner"
1586 } );
1587 } );</pre>
1588 </div>
1589 </div></dd><dt class=" even"><a name="sAjaxSource"></a><a name="sAjaxSource_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sAjaxSource">sAjaxSource</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>You can instruct DataTables to load data from an external source using this
1590 parameter (use aData if you want to pass data in you already have). Simply
1591 provide a url a JSON object can be obtained from. This object must include
1592 the parameter 'aaData' which is the data source for the table.</p><div class="collapse_details"><dl class="details">
1593
1594 </dl>
1595 <h5>Example</h5>
1596 <div class="example-code">
1597 <pre class="brush: js"> $(document).ready( function() {
1598 $('#example').dataTable( {
1599 "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"
1600 } );
1601 } )</pre>
1602 </div>
1603 </div></dd><dt class=" odd"><a name="sCookiePrefix"></a><a name="sCookiePrefix_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sCookiePrefix">sCookiePrefix</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>This parameter can be used to override the default prefix that DataTables
1604 assigns to a cookie when state saving is enabled.</p><div class="collapse_details"><dl class="details">
1605
1606 </dl>
1607 <h5>Example</h5>
1608 <div class="example-code">
1609 <pre class="brush: js"> $(document).ready( function() {
1610 $('#example').dataTable( {
1611 "sCookiePrefix": "my_datatable_",
1612 } );
1613 } );</pre>
1614 </div>
1615 </div></dd><dt class=" even"><a name="sDom"></a><a name="sDom_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sDom">sDom</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>This initialisation variable allows you to specify exactly where in the
1616 DOM you want DataTables to inject the various controls it adds to the page
1617 (for example you might want the pagination controls at the top of the
1618 table). DIV elements (with or without a custom class) can also be added to
1619 aid styling. The follow syntax is used:
1620 <ul>
1621 <li>The following options are allowed: <br />
1622 <ul>
1623 <li>'l' - Length changing</li
1624 <li>'f' - Filtering input</li>
1625 <li>'t' - The table!</li>
1626 <li>'i' - Information</li>
1627 <li>'p' - Pagination</li>
1628 <li>'r' - pRocessing</li>
1629 </ul>
1630 </li>
1631 <li>The following constants are allowed:
1632 <ul>
1633 <li>'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')</li>
1634 <li>'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')</li>
1635 </ul>
1636 </li>
1637 <li>The following syntax is expected:
1638 <ul>
1639 <li>'&lt;' and '&gt;' - div elements</li>
1640 <li>'&lt;"class" and '&gt;' - div with a class</li>
1641 <li>'&lt;"#id" and '&gt;' - div with an ID</li>
1642 </ul>
1643 </li>
1644 <li>Examples:
1645 <ul>
1646 <li>'&lt;"wrapper"flipt&gt;'</li>
1647 <li>'&lt;lf&lt;t&gt;ip&gt;'</li>
1648 </ul>
1649 </li>
1650 </ul></p><div class="collapse_details"><dl class="details">
1651
1652 </dl>
1653 <h5>Example</h5>
1654 <div class="example-code">
1655 <pre class="brush: js"> $(document).ready( function() {
1656 $('#example').dataTable( {
1657 "sDom": '&lt;"top"i&gt;rt&lt;"bottom"flp&gt;&lt;"clear"&gt;'
1658 } );
1659 } );</pre>
1660 </div>
1661 </div></dd><dt class=" odd"><a name="sPaginationType"></a><a name="sPaginationType_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sPaginationType">sPaginationType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>DataTables features two different built-in pagination interaction methods
1662 ('two_button' or 'full_numbers') which present different page controls to
1663 the end user. Further methods can be added using the API (see below).</p><div class="collapse_details"><dl class="details">
1664
1665 </dl>
1666 <h5>Example</h5>
1667 <div class="example-code">
1668 <pre class="brush: js"> $(document).ready( function() {
1669 $('#example').dataTable( {
1670 "sPaginationType": "full_numbers"
1671 } );
1672 } )</pre>
1673 </div>
1674 </div></dd><dt class=" even"><a name="sScrollX"></a><a name="sScrollX_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sScrollX">sScrollX</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Enable horizontal scrolling. When a table is too wide to fit into a certain
1675 layout, or you have a large number of columns in the table, you can enable
1676 x-scrolling to show the table in a viewport, which can be scrolled. This
1677 property can be any CSS unit, or a number (in which case it will be treated
1678 as a pixel measurement).</p><div class="collapse_details"><dl class="details">
1679
1680 </dl>
1681 <h5>Example</h5>
1682 <div class="example-code">
1683 <pre class="brush: js"> $(document).ready( function() {
1684 $('#example').dataTable( {
1685 "sScrollX": "100%",
1686 "bScrollCollapse": true
1687 } );
1688 } );</pre>
1689 </div>
1690 </div></dd><dt class=" odd"><a name="sScrollXInner"></a><a name="sScrollXInner_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sScrollXInner">sScrollXInner</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>This property can be used to force a DataTable to use more width than it
1691 might otherwise do when x-scrolling is enabled. For example if you have a
1692 table which requires to be well spaced, this parameter is useful for
1693 "over-sizing" the table, and thus forcing scrolling. This property can by
1694 any CSS unit, or a number (in which case it will be treated as a pixel
1695 measurement).</p><div class="collapse_details"><dl class="details">
1696
1697 </dl>
1698 <h5>Example</h5>
1699 <div class="example-code">
1700 <pre class="brush: js"> $(document).ready( function() {
1701 $('#example').dataTable( {
1702 "sScrollX": "100%",
1703 "sScrollXInner": "110%"
1704 } );
1705 } );</pre>
1706 </div>
1707 </div></dd><dt class=" even"><a name="sScrollY"></a><a name="sScrollY_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sScrollY">sScrollY</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Enable vertical scrolling. Vertical scrolling will constrain the DataTable
1708 to the given height, and enable scrolling for any data which overflows the
1709 current viewport. This can be used as an alternative to paging to display
1710 a lot of data in a small area (although paging and scrolling can both be
1711 enabled at the same time). This property can be any CSS unit, or a number
1712 (in which case it will be treated as a pixel measurement).</p><div class="collapse_details"><dl class="details">
1713
1714 </dl>
1715 <h5>Example</h5>
1716 <div class="example-code">
1717 <pre class="brush: js"> $(document).ready( function() {
1718 $('#example').dataTable( {
1719 "sScrollY": "200px",
1720 "bPaginate": false
1721 } );
1722 } );</pre>
1723 </div>
1724 </div></dd><dt class=" odd"><a name="sServerMethod"></a><a name="sServerMethod_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#sServerMethod">sServerMethod</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Set the HTTP method that is used to make the Ajax call for server-side
1725 processing or Ajax sourced data.</p><div class="collapse_details"><dl class="details">
1726
1727 </dl>
1728 <h5>Example</h5>
1729 <div class="example-code">
1730 <pre class="brush: js"> $(document).ready( function() {
1731 $('#example').dataTable( {
1732 "bServerSide": true,
1733 "sAjaxSource": "scripts/post.php",
1734 "sServerMethod": "POST"
1735 } );
1736 } );</pre>
1737 </div>
1738 </div></dd>
1739 </dl></div>
1740 </div>
1741
1742 </div>
1743
1744 <div class="fw_footer">
1745 DataTables: Copyright 2008-2012 Allan Jardine, all rights reserved<br>
1746
1747 Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
1748 23th Sep 2012 - 14:27
1749 with the <a href="http://datatables.net/">DataTables</a> template.
1750 </div>
1751 </body>
1752 </html>