Mercurial > repos > saskia-hiltemann > ireport
comparison DataTables-1.9.4/docs/DataTable.defaults.html @ 0:ac5f9272033b draft
first upload
| author | saskia-hiltemann |
|---|---|
| date | Tue, 01 Jul 2014 11:42:23 -0400 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:ac5f9272033b |
|---|---|
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| 2 <html> | |
| 3 <head> | |
| 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| 5 <title>Namespace: defaults - documentation</title> | |
| 6 | |
| 7 <style type="text/css" media="screen"> | |
| 8 @import "media/css/doc.css"; | |
| 9 @import "media/css/shCore.css"; | |
| 10 @import "media/css/shThemeDataTables.css"; | |
| 11 </style> | |
| 12 | |
| 13 <script type="text/javascript" src="media/js/shCore.js"></script> | |
| 14 <script type="text/javascript" src="media/js/shBrushJScript.js"></script> | |
| 15 <script type="text/javascript" src="media/js/jquery.js"></script> | |
| 16 <script type="text/javascript" src="media/js/doc.js"></script> | |
| 17 </head> | |
| 18 <body> | |
| 19 <div class="fw_container"> | |
| 20 | |
| 21 <a name="top"></a> | |
| 22 <div class="fw_header"> | |
| 23 <h1 class="page-title">Namespace: defaults</h1> | |
| 24 <h2 class="ancestors">Ancestry: <span class="ancestors"><a href="DataTable.html">DataTable</a>.</span> ยป defaults</h2> | |
| 25 <div class="page-info"> | |
| 26 DataTables v1.9.4 documentation | |
| 27 </div> | |
| 28 </div> | |
| 29 | |
| 30 | |
| 31 | |
| 32 <div class="fw_nav"> | |
| 33 <h2>Navigation</h2> | |
| 34 <ul> | |
| 35 <li><a href="#top">Overview</a></li> | |
| 36 <li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td><a href="#summary_namespaces">Namespaces (3)</a></td></tr><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (58)</a></td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (58)</a></td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul> | |
| 37 <div style="margin-top: 10px;"> | |
| 38 <input type="hidden" name="show_private" value="0"> | |
| 39 <span id="private_label">Hiding</span> private elements | |
| 40 (<a id="private_toggle" href="">toggle</a>) | |
| 41 </span> | |
| 42 </div> | |
| 43 <div> | |
| 44 <input type="hidden" name="show_extended" value="1"> | |
| 45 <span id="extended_label">Showing</span> extended elements | |
| 46 (<a id="extended_toggle" href="">toggle</a>) | |
| 47 </span> | |
| 48 </div> | |
| 49 </div> | |
| 50 | |
| 51 <div class="fw_content"> | |
| 52 <a name="overview"></a> | |
| 53 <div class="doc_overview"> | |
| 54 <div class="nav_blocker"></div> | |
| 55 <p>Initialisation options that can be given to DataTables at initialisation | |
| 56 time.</p><dl class="details"> | |
| 57 | |
| 58 </dl> | |
| 59 | |
| 60 </div> | |
| 61 | |
| 62 | |
| 63 <div class="doc_summary"> | |
| 64 <a name="summary"></a> | |
| 65 <h2>Summary</h2> | |
| 66 | |
| 67 <div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3> | |
| 68 <dl> | |
| 69 <dt class="even"><span class="type-name"><a href="DataTable.defaults.columns.html">columns</a></span></dt><dd class="even"><p>Column options that can be given to DataTables at initialisation time.</p></dd><dt class="odd"><span class="type-name"><a href="DataTable.defaults.oLanguage.html">oLanguage</a></span></dt><dd class="odd"><p>All strings that DataTables uses in the user interface that it creates | |
| 70 are defined in this object, allowing you to modified them individually or | |
| 71 completely replace them all as required.</p></dd><dt class="even"><span class="type-name"><a href="DataTable.defaults.oSearch.html">oSearch</a></span></dt><dd class="even"><p>This parameter allows you to have define the global filtering state at | |
| 72 initialisation time. As an object the "sSearch" parameter must be | |
| 73 defined, but all other parameters are optional. When "bRegex" is true, | |
| 74 the search string will be treated as a regular expression, when false | |
| 75 (default) it will be treated as a straight string. When "bSmart" | |
| 76 DataTables will use it's smart filtering methods (to word match at | |
| 77 any point in the data), when false this will not be done.</p></dd> | |
| 78 </dl></div><div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3> | |
| 79 | |
| 80 <dl> | |
| 81 <dt class=" even"><span class="type-attr"><span class="type-signature"><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> |