| 1 |
torben |
2125 |
<!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> |
Parent Directory
| 
Revision Log