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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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>'<' and '>' - div elements</li> |
277 |
<li>'<"class" and '>' - div with a class</li> |
278 |
<li>'<"#id" and '>' - div with an ID</li> |
279 |
</ul> |
280 |
</li> |
281 |
<li>Examples: |
282 |
<ul> |
283 |
<li>'<"wrapper"flipt>'</li> |
284 |
<li>'<lf<t>ip>'</li> |
285 |
</ul> |
286 |
</li> |
287 |
</ul></p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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 < 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<iLen ; i++ ) { |
958 |
if ( i%3 === 0 && 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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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"><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>'<' and '>' - div elements</li> |
1640 |
<li>'<"class" and '>' - div with a class</li> |
1641 |
<li>'<"#id" and '>' - div with an ID</li> |
1642 |
</ul> |
1643 |
</li> |
1644 |
<li>Examples: |
1645 |
<ul> |
1646 |
<li>'<"wrapper"flipt>'</li> |
1647 |
<li>'<lf<t>ip>'</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": '<"top"i>rt<"bottom"flp><"clear">' |
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"><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"><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"><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"><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"><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> |