webapp/resources/datatables-1.9.4/docs/DataTable.defaults.html

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