|
2
|
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>Class: DataTable - 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">Class: DataTable</h1>
|
|
|
24
|
|
|
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 (4)</a></td></tr><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td><a href="#summary_methods">Methods (22)</a></td><td><a href="#summary_methods_static">Static methods (3)</a></td></tr><tr><td><a href="#summary_events">Events (11)</a></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 (1)</a></td></tr><tr><td><a href="#summary_methods">Methods (22)</a></td><td><a href="#summary_methods_static">Static methods (3)</a></td></tr><tr><td><a href="#summary_events">Events (11)</a></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 <dl><dt id="DataTable" class=" even"><a name="DataTable"></a><a name="DataTable_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>new DataTable</a></span><span class="type-sig"><span class="signature">(<span class="optional">oInit</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>DataTables is a plug-in for the jQuery Javascript library. It is a
|
|
|
56 highly flexible tool, based upon the foundations of progressive
|
|
|
57 enhancement, which will add advanced interaction controls to any
|
|
|
58 HTML table. For a full list of features please refer to
|
|
|
59 <a href="http://datatables.net">DataTables.net</a>.</p>
|
|
|
60
|
|
|
61 <p>Note that the <i>DataTable</i> object is not a global variable but is
|
|
|
62 aliased to <i>jQuery.fn.DataTable</i> and <i>jQuery.fn.dataTable</i> through which
|
|
|
63 it may be accessed.</p><div class="collapse_details"><h3>Constructor</h3><dl class="details">
|
|
|
64
|
|
|
65 </dl>
|
|
|
66 <h5>Parameters:</h5>
|
|
|
67
|
|
|
68 <table class="params">
|
|
|
69 <thead>
|
|
|
70 <tr>
|
|
|
71 <th width="20"></th>
|
|
|
72 <th width="12%" class="bottom_border name">Name</th>
|
|
|
73 <th width="10%" class="bottom_border">Type</th>
|
|
|
74 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
75 <th width="10%" class="bottom_border">Default</th>
|
|
|
76 <th class="last bottom_border">Description</th>
|
|
|
77 </tr>
|
|
|
78 </thead>
|
|
|
79
|
|
|
80 <tbody>
|
|
|
81 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oInit</td><td class="type type-param">object</td><td class="attributes">Optional</td><td class="default">{}</td><td class="description last"><p>Configuration object for DataTables. Options
|
|
|
82 are defined by <a href="DataTable.defaults.html">DataTable.defaults</a></p></td></tr>
|
|
|
83 </tbody>
|
|
|
84 </table><h5>Examples:</h5>
|
|
|
85 <div class="example-code">
|
|
|
86 <pre class="brush: js"> // Basic initialisation
|
|
|
87 $(document).ready( function {
|
|
|
88 $('#example').dataTable();
|
|
|
89 } );
|
|
|
90
|
|
|
91 </pre>
|
|
|
92 </div>
|
|
|
93
|
|
|
94 <div class="example-code">
|
|
|
95 <pre class="brush: js"> // Initialisation with configuration options - in this case, disable
|
|
|
96 // pagination and sorting.
|
|
|
97 $(document).ready( function {
|
|
|
98 $('#example').dataTable( {
|
|
|
99 "bPaginate": false,
|
|
|
100 "bSort": false
|
|
|
101 } );
|
|
|
102 } );</pre>
|
|
|
103 </div>
|
|
|
104 </div>
|
|
|
105 </dl><h3 class="subsection-title">Requires</h3>
|
|
|
106 <ul>
|
|
|
107 <li>module:jQuery</li>
|
|
|
108 </ul>
|
|
|
109
|
|
|
110 </div>
|
|
|
111
|
|
|
112
|
|
|
113 <div class="doc_summary">
|
|
|
114 <a name="summary"></a>
|
|
|
115 <h2>Summary</h2>
|
|
|
116
|
|
|
117 <div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3>
|
|
|
118 <dl>
|
|
|
119 <dt class="even"><span class="type-name"><a href="DataTable.defaults.html">defaults</a></span></dt><dd class="even"><p>Initialisation options that can be given to DataTables at initialisation
|
|
|
120 time.</p></dd><dt class="odd"><span class="type-name"><a href="DataTable.ext.html">ext</a></span></dt><dd class="odd"><p>Extension object for DataTables that is used to provide all extension options. [<a href="DataTable.ext.html">...</a>] </p></dd><dt class="even"><span class="type-name"><a href="DataTable.models.html">models</a></span></dt><dd class="even"><p>Object models container, for the various models that DataTables has available
|
|
|
121 to it. These models define the objects that are used to hold the active state
|
|
|
122 and configuration of the table.</p></dd><dt class="odd"><span class="type-name"><a href="34cdb56b2c.html">oApi</a></span></dt><dd class="odd"><p>Reference to internal functions for use by plug-in developers. Note that these
|
|
|
123 methods are references to internal functions and are considered to be private.
|
|
|
124 If you use these methods, be aware that they are liable to change between versions
|
|
|
125 (check the upgrade notes).</p></dd>
|
|
|
126 </dl></div><div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
|
|
|
127
|
|
|
128 <dl>
|
|
|
129 <dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#version">version</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Version string for plug-ins to check compatibility. Allowed format is
|
|
|
130 a.b.c.d.e where: a:int, b:int, c:int, d:string(dev|beta), e:int. d and
|
|
|
131 e are optional</p></dd>
|
|
|
132 </dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3>
|
|
|
133
|
|
|
134 <dl>
|
|
|
135 <dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#$">$</a></span><span class="type-sig"><span class="signature">(sSelector, <span class="optional">oOpts</span>)</span><span class="type-signature"> → {object}</span></span></dt><dd class=" even"><p>Perform a jQuery selector action on the table's TR elements (from the tbody) and
|
|
|
136 return the resulting jQuery object.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_">_</a></span><span class="type-sig"><span class="signature">(sSelector, <span class="optional">oOpts</span>)</span><span class="type-signature"> → {array}</span></span></dt><dd class=" odd"><p>Almost identical to $ in operation, but in this case returns the data for the matched
|
|
|
137 rows - as such, the jQuery selector used should match TR row nodes or TD/TH cell nodes
|
|
|
138 rather than any descendants, so the data can be obtained for the row/cell. If matching
|
|
|
139 rows are found, the data returned is the original data array/object that was used to <br />
|
|
|
140 create the row (or a generated array if from a DOM source). [<a href-"#_">...</a>] </p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnAddData">fnAddData</a></span><span class="type-sig"><span class="signature">(mData, <span class="optional">bRedraw</span>)</span><span class="type-signature"> → {array}</span></span></dt><dd class=" even"><p>Add a single new row or multiple rows of data to the table. Please note
|
|
|
141 that this is suitable for client-side processing only - if you are using
|
|
|
142 server-side processing (i.e. "bServerSide": true), then to add data, you
|
|
|
143 must add it to the data source, i.e. the server-side, through an Ajax call.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnAdjustColumnSizing">fnAdjustColumnSizing</a></span><span class="type-sig"><span class="signature">(<span class="optional">bRedraw</span>)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>This function will make DataTables recalculate the column sizes, based on the data
|
|
|
144 contained in the table and the sizes applied to the columns (in the DOM, CSS or
|
|
|
145 through the sWidth parameter). This can be useful when the width of the table's
|
|
|
146 parent element changes (for example a window resize).</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnClearTable">fnClearTable</a></span><span class="type-sig"><span class="signature">(<span class="optional">bRedraw</span>)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Quickly and simply clear a table</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnClose">fnClose</a></span><span class="type-sig"><span class="signature">(nTr)</span><span class="type-signature"> → {int}</span></span></dt><dd class=" odd"><p>The exact opposite of 'opening' a row, this function will close any rows which
|
|
|
147 are currently 'open'.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnDeleteRow">fnDeleteRow</a></span><span class="type-sig"><span class="signature">(mTarget, <span class="optional">fnCallBack</span>, <span class="optional">bRedraw</span>)</span><span class="type-signature"> → {array}</span></span></dt><dd class=" even"><p>Remove a row for the table</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnDestroy">fnDestroy</a></span><span class="type-sig"><span class="signature">(<span class="optional">bRemove</span>)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Restore the table to it's original state in the DOM by removing all of DataTables
|
|
|
148 enhancements, alterations to the DOM structure of the table and event listeners.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnDraw">fnDraw</a></span><span class="type-sig"><span class="signature">(<span class="optional">bComplete</span>)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Redraw the table</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnFilter">fnFilter</a></span><span class="type-sig"><span class="signature">(sInput, <span class="optional">iColumn</span>, <span class="optional">bRegex</span>, <span class="optional">bSmart</span>, <span class="optional">bShowGlobal</span>, <span class="optional">bCaseInsensitive</span>)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Filter the input based on data</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnGetData">fnGetData</a></span><span class="type-sig"><span class="signature">(<span class="optional">mRow</span>, <span class="optional">iCol</span>)</span><span class="type-signature"> → {array|object|string}</span></span></dt><dd class=" even"><p>Get the data for the whole table, an individual row or an individual cell based on the
|
|
|
149 provided parameters.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnGetNodes">fnGetNodes</a></span><span class="type-sig"><span class="signature">(<span class="optional">iRow</span>)</span><span class="type-signature"> → {array|node}</span></span></dt><dd class=" odd"><p>Get an array of the TR nodes that are used in the table's body. Note that you will
|
|
|
150 typically want to use the '$' API method in preference to this as it is more
|
|
|
151 flexible.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnGetPosition">fnGetPosition</a></span><span class="type-sig"><span class="signature">(nNode)</span><span class="type-signature"> → {int}</span></span></dt><dd class=" even"><p>Get the array indexes of a particular cell from it's DOM element
|
|
|
152 and column index including hidden columns</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnIsOpen">fnIsOpen</a></span><span class="type-sig"><span class="signature">(nTr)</span><span class="type-signature"> → {boolean}</span></span></dt><dd class=" odd"><p>Check to see if a row is 'open' or not.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnOpen">fnOpen</a></span><span class="type-sig"><span class="signature">(nTr, mHtml, sClass)</span><span class="type-signature"> → {node}</span></span></dt><dd class=" even"><p>This function will place a new row directly after a row which is currently
|
|
|
153 on display on the page, with the HTML contents that is passed into the
|
|
|
154 function. This can be used, for example, to ask for confirmation that a
|
|
|
155 particular record should be deleted.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnPageChange">fnPageChange</a></span><span class="type-sig"><span class="signature">(mAction, <span class="optional">bRedraw</span>)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Change the pagination - provides the internal logic for pagination in a simple API
|
|
|
156 function. With this function you can have a DataTables table go to the next,
|
|
|
157 previous, first or last pages.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnSetColumnVis">fnSetColumnVis</a></span><span class="type-sig"><span class="signature">(iCol, bShow, <span class="optional">bRedraw</span>)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Show a particular column</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnSettings">fnSettings</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"> → {object}</span></span></dt><dd class=" odd"><p>Get the settings for a particular table for external manipulation</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnSort">fnSort</a></span><span class="type-sig"><span class="signature">(iCol)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Sort the table by a particular column</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnSortListener">fnSortListener</a></span><span class="type-sig"><span class="signature">(nNode, iColumn, <span class="optional">fnCallback</span>)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Attach a sort listener to an element for a given column</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnUpdate">fnUpdate</a></span><span class="type-sig"><span class="signature">(mData, mRow, <span class="optional">iColumn</span>, <span class="optional">bRedraw</span>, <span class="optional">bAction</span>)</span><span class="type-signature"> → {int}</span></span></dt><dd class=" even"><p>Update a table cell or row - this method will accept either a single value to
|
|
|
158 update the cell with, an array of values with one element for each column or
|
|
|
159 an object in the same format as the original data source. The function is
|
|
|
160 self-referencing in order to make the multi column updates easier.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnVersionCheck">fnVersionCheck</a></span><span class="type-sig"><span class="signature">(sVersion)</span><span class="type-signature"> → {boolean}</span></span></dt><dd class=" odd"><p>Provide a common method for plug-ins to check the version of DataTables being used, in order
|
|
|
161 to ensure compatibility.</p></dd>
|
|
|
162 </dl>
|
|
|
163 </div><div class="doc_group"><a name="summary_methods_static"></a><h3 class="subsection-title">Methods - static</h3>
|
|
|
164
|
|
|
165 <dl>
|
|
|
166 <dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#fnIsDataTable">fnIsDataTable</a></span><span class="type-sig"><span class="signature">(nTable)</span><span class="type-signature"> → {boolean}</span></span></dt><dd class=" even"><p>Check if a TABLE node is a DataTable table already or not.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#fnTables">fnTables</a></span><span class="type-sig"><span class="signature">(<span class="optional">bVisible</span>)</span><span class="type-signature"> → {array}</span></span></dt><dd class=" odd"><p>Get all DataTable tables that have been initialised - optionally you can select to
|
|
|
167 get only currently visible tables.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#fnVersionCheck">fnVersionCheck</a></span><span class="type-sig"><span class="signature">(sVersion)</span><span class="type-signature"> → {boolean}</span></span></dt><dd class=" even"><p>Provide a common method for plug-ins to check the version of DataTables being used, in order
|
|
|
168 to ensure compatibility.</p></dd>
|
|
|
169 </dl>
|
|
|
170 </div><div class="doc_group"><a name="summary_events"></a><h3 class="subsection-title">Events</h3>
|
|
|
171 <dl>
|
|
|
172 <dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#destroy">destroy</a></span><span class="type-sig"></span></dt><dd class=" even"><p>Destroy event, fired when the DataTable is destroyed by calling fnDestroy or passing
|
|
|
173 the bDestroy:true parameter in the initialisation object. This can be used to remove
|
|
|
174 bound events, added DOM nodes, etc.</p></dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#draw">draw</a></span><span class="type-sig"></span></dt><dd class=" odd"><p>Draw event, fired whenever the table is redrawn on the page, at the same point as
|
|
|
175 fnDrawCallback. This may be useful for binding events or performing calculations when
|
|
|
176 the table is altered at all.</p></dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#filter">filter</a></span><span class="type-sig"></span></dt><dd class=" even"><p>Filter event, fired when the filtering applied to the table (using the build in global
|
|
|
177 global filter, or column filters) is altered.</p></dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#init">init</a></span><span class="type-sig"></span></dt><dd class=" odd"><p>DataTables initialisation complete event, fired when the table is fully drawn,
|
|
|
178 including Ajax data loaded, if Ajax data is required.</p></dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#page">page</a></span><span class="type-sig"></span></dt><dd class=" even"><p>Page change event, fired when the paging of the table is altered.</p></dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#processing">processing</a></span><span class="type-sig"></span></dt><dd class=" odd"><p>Processing event, fired when DataTables is doing some kind of processing (be it,
|
|
|
179 sort, filter or anything else). Can be used to indicate to the end user that
|
|
|
180 there is something happening, or that something has finished.</p></dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#sort">sort</a></span><span class="type-sig"></span></dt><dd class=" even"><p>Sort event, fired when the sorting applied to the table is altered.</p></dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#stateLoaded">stateLoaded</a></span><span class="type-sig"></span></dt><dd class=" odd"><p>State loaded event, fired when state has been loaded from stored data and the settings
|
|
|
181 object has been modified by the loaded data.</p></dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#stateLoadParams">stateLoadParams</a></span><span class="type-sig"></span></dt><dd class=" even"><p>State load event, fired when the table is loading state from the stored data, but
|
|
|
182 prior to the settings object being modified by the saved state - allowing modification
|
|
|
183 of the saved state is required or loading of state for a plug-in.</p></dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#stateSaveParams">stateSaveParams</a></span><span class="type-sig"></span></dt><dd class=" odd"><p>State save event, fired when the table has changed state a new state save is required.
|
|
|
184 This method allows modification of the state saving object prior to actually doing the
|
|
|
185 save, including addition or other state properties (for plug-ins) or modification
|
|
|
186 of a DataTables core property.</p></dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#xhr">xhr</a></span><span class="type-sig"></span></dt><dd class=" even"><p>Ajax (XHR) event, fired whenever an Ajax request is completed from a request to
|
|
|
187 made to the server for new data (note that this trigger is called in fnServerData,
|
|
|
188 if you override fnServerData and which to use this event, you need to trigger it in
|
|
|
189 you success function).</p></dd>
|
|
|
190 </dd>
|
|
|
191 </div>
|
|
|
192 </div>
|
|
|
193
|
|
|
194
|
|
|
195
|
|
|
196
|
|
|
197 <div class="doc_details">
|
|
|
198 <a name="details"></a>
|
|
|
199 <h2>Details</h2>
|
|
|
200 <div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
|
|
|
201 <dl>
|
|
|
202 <dt class=" even"><a name="version"></a><a name="version_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#version">version</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Version string for plug-ins to check compatibility. Allowed format is
|
|
|
203 a.b.c.d.e where: a:int, b:int, c:int, d:string(dev|beta), e:int. d and
|
|
|
204 e are optional</p><div class="collapse_details"><dl class="details">
|
|
|
205
|
|
|
206 </dl>
|
|
|
207 </div></dd>
|
|
|
208 </dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3>
|
|
|
209 <dl>
|
|
|
210 <dt id="DataTable#$" class=" even"><a name="$"></a><a name="$_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>$</a></span><span class="type-sig"><span class="signature">(sSelector, <span class="optional">oOpts</span>)</span><span class="type-signature"> → {object}</span></span></span></dt><dd class=" even"><p>Perform a jQuery selector action on the table's TR elements (from the tbody) and
|
|
|
211 return the resulting jQuery object.</p><div class="collapse_details"><dl class="details">
|
|
|
212
|
|
|
213 </dl>
|
|
|
214 <h5>Parameters:</h5>
|
|
|
215
|
|
|
216 <table class="params">
|
|
|
217 <thead>
|
|
|
218 <tr>
|
|
|
219 <th width="20"></th>
|
|
|
220 <th width="12%" class="bottom_border name">Name</th>
|
|
|
221 <th width="10%" class="bottom_border">Type</th>
|
|
|
222 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
223 <th width="10%" class="bottom_border">Default</th>
|
|
|
224 <th class="last bottom_border">Description</th>
|
|
|
225 </tr>
|
|
|
226 </thead>
|
|
|
227
|
|
|
228 <tbody>
|
|
|
229 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sSelector</td><td class="type type-param">string | node | jQuery</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery selector or node collection to act on</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oOpts</td><td class="type type-param">object</td><td class="attributes">Optional</td><td class="default"></td><td class="description last"><p>Optional parameters for modifying the rows to be included</p></td></tr><tr><td class="number right_border"></td><td class="name">oOpts.filter</td><td class="type type-param">string</td><td class="attributes"><optional><br></td><td class="default">none</td><td class="description last"><p>Select TR elements that meet the current filter
|
|
|
230 criterion ("applied") or all TR elements (i.e. no filter).</p></td></tr><tr><td class="number right_border"></td><td class="name">oOpts.order</td><td class="type type-param">string</td><td class="attributes"><optional><br></td><td class="default">current</td><td class="description last"><p>Order of the TR elements in the processed array.
|
|
|
231 Can be either 'current', whereby the current sorting of the table is used, or
|
|
|
232 'original' whereby the original order the data was read into the table is used.</p></td></tr><tr><td class="number right_border"></td><td class="name">oOpts.page</td><td class="type type-param">string</td><td class="attributes"><optional><br></td><td class="default">all</td><td class="description last"><p>Limit the selection to the currently displayed page
|
|
|
233 ("current") or not ("all"). If 'current' is given, then order is assumed to be
|
|
|
234 'current' and filter is 'applied', regardless of what they might be given as.</p></td></tr>
|
|
|
235 </tbody>
|
|
|
236 </table><h5>Returns:</h5><p class="returns"><p>jQuery object, filtered by the given selector.</p></p><h5>Examples:</h5>
|
|
|
237 <div class="example-code">
|
|
|
238 <pre class="brush: js"> $(document).ready(function() {
|
|
|
239 var oTable = $('#example').dataTable();
|
|
|
240
|
|
|
241 // Highlight every second row
|
|
|
242 oTable.$('tr:odd').css('backgroundColor', 'blue');
|
|
|
243 } );
|
|
|
244
|
|
|
245 </pre>
|
|
|
246 </div>
|
|
|
247
|
|
|
248 <div class="example-code">
|
|
|
249 <pre class="brush: js"> $(document).ready(function() {
|
|
|
250 var oTable = $('#example').dataTable();
|
|
|
251
|
|
|
252 // Filter to rows with 'Webkit' in them, add a background colour and then
|
|
|
253 // remove the filter, thus highlighting the 'Webkit' rows only.
|
|
|
254 oTable.fnFilter('Webkit');
|
|
|
255 oTable.$('tr', {"filter": "applied"}).css('backgroundColor', 'blue');
|
|
|
256 oTable.fnFilter('');
|
|
|
257 } );</pre>
|
|
|
258 </div>
|
|
|
259 </div>
|
|
|
260 <dt id="DataTable#_" class=" odd"><a name="_"></a><a name="__details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_</a></span><span class="type-sig"><span class="signature">(sSelector, <span class="optional">oOpts</span>)</span><span class="type-signature"> → {array}</span></span></span></dt><dd class=" odd"><p>Almost identical to $ in operation, but in this case returns the data for the matched
|
|
|
261 rows - as such, the jQuery selector used should match TR row nodes or TD/TH cell nodes
|
|
|
262 rather than any descendants, so the data can be obtained for the row/cell. If matching
|
|
|
263 rows are found, the data returned is the original data array/object that was used to <br />
|
|
|
264 create the row (or a generated array if from a DOM source).</p>
|
|
|
265
|
|
|
266 <p>This method is often useful in-combination with $ where both functions are given the
|
|
|
267 same parameters and the array indexes will match identically.</p><div class="collapse_details"><dl class="details">
|
|
|
268
|
|
|
269 </dl>
|
|
|
270 <h5>Parameters:</h5>
|
|
|
271
|
|
|
272 <table class="params">
|
|
|
273 <thead>
|
|
|
274 <tr>
|
|
|
275 <th width="20"></th>
|
|
|
276 <th width="12%" class="bottom_border name">Name</th>
|
|
|
277 <th width="10%" class="bottom_border">Type</th>
|
|
|
278 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
279 <th width="10%" class="bottom_border">Default</th>
|
|
|
280 <th class="last bottom_border">Description</th>
|
|
|
281 </tr>
|
|
|
282 </thead>
|
|
|
283
|
|
|
284 <tbody>
|
|
|
285 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sSelector</td><td class="type type-param">string | node | jQuery</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery selector or node collection to act on</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oOpts</td><td class="type type-param">object</td><td class="attributes">Optional</td><td class="default"></td><td class="description last"><p>Optional parameters for modifying the rows to be included</p></td></tr><tr><td class="number right_border"></td><td class="name">oOpts.filter</td><td class="type type-param">string</td><td class="attributes"><optional><br></td><td class="default">none</td><td class="description last"><p>Select elements that meet the current filter
|
|
|
286 criterion ("applied") or all elements (i.e. no filter).</p></td></tr><tr><td class="number right_border"></td><td class="name">oOpts.order</td><td class="type type-param">string</td><td class="attributes"><optional><br></td><td class="default">current</td><td class="description last"><p>Order of the data in the processed array.
|
|
|
287 Can be either 'current', whereby the current sorting of the table is used, or
|
|
|
288 'original' whereby the original order the data was read into the table is used.</p></td></tr><tr><td class="number right_border"></td><td class="name">oOpts.page</td><td class="type type-param">string</td><td class="attributes"><optional><br></td><td class="default">all</td><td class="description last"><p>Limit the selection to the currently displayed page
|
|
|
289 ("current") or not ("all"). If 'current' is given, then order is assumed to be
|
|
|
290 'current' and filter is 'applied', regardless of what they might be given as.</p></td></tr>
|
|
|
291 </tbody>
|
|
|
292 </table><h5>Returns:</h5><p class="returns"><p>Data for the matched elements. If any elements, as a result of the
|
|
|
293 selector, were not TR, TD or TH elements in the DataTable, they will have a null
|
|
|
294 entry in the array.</p></p><h5>Examples:</h5>
|
|
|
295 <div class="example-code">
|
|
|
296 <pre class="brush: js"> $(document).ready(function() {
|
|
|
297 var oTable = $('#example').dataTable();
|
|
|
298
|
|
|
299 // Get the data from the first row in the table
|
|
|
300 var data = oTable._('tr:first');
|
|
|
301
|
|
|
302 // Do something useful with the data
|
|
|
303 alert( "First cell is: "+data[0] );
|
|
|
304 } );
|
|
|
305
|
|
|
306 </pre>
|
|
|
307 </div>
|
|
|
308
|
|
|
309 <div class="example-code">
|
|
|
310 <pre class="brush: js"> $(document).ready(function() {
|
|
|
311 var oTable = $('#example').dataTable();
|
|
|
312
|
|
|
313 // Filter to 'Webkit' and get all data for
|
|
|
314 oTable.fnFilter('Webkit');
|
|
|
315 var data = oTable._('tr', {"filter": "applied"});
|
|
|
316
|
|
|
317 // Do something with the data
|
|
|
318 alert( data.length+" rows matched the filter" );
|
|
|
319 } );</pre>
|
|
|
320 </div>
|
|
|
321 </div>
|
|
|
322 <dt id="DataTable#fnAddData" class=" even"><a name="fnAddData"></a><a name="fnAddData_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnAddData</a></span><span class="type-sig"><span class="signature">(mData, <span class="optional">bRedraw</span>)</span><span class="type-signature"> → {array}</span></span></span></dt><dd class=" even"><p>Add a single new row or multiple rows of data to the table. Please note
|
|
|
323 that this is suitable for client-side processing only - if you are using
|
|
|
324 server-side processing (i.e. "bServerSide": true), then to add data, you
|
|
|
325 must add it to the data source, i.e. the server-side, through an Ajax call.</p><div class="collapse_details"><dl class="details">
|
|
|
326
|
|
|
327 </dl>
|
|
|
328 <h5>Parameters:</h5>
|
|
|
329
|
|
|
330 <table class="params">
|
|
|
331 <thead>
|
|
|
332 <tr>
|
|
|
333 <th width="20"></th>
|
|
|
334 <th width="12%" class="bottom_border name">Name</th>
|
|
|
335 <th width="10%" class="bottom_border">Type</th>
|
|
|
336 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
337 <th width="10%" class="bottom_border">Default</th>
|
|
|
338 <th class="last bottom_border">Description</th>
|
|
|
339 </tr>
|
|
|
340 </thead>
|
|
|
341
|
|
|
342 <tbody>
|
|
|
343 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">mData</td><td class="type type-param">array | object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The data to be added to the table. This can be:
|
|
|
344 <ul>
|
|
|
345 <li>1D array of data - add a single row with the data provided</li>
|
|
|
346 <li>2D array of arrays - add multiple rows in a single call</li>
|
|
|
347 <li>object - data object when using <i>mData</i></li>
|
|
|
348 <li>array of objects - multiple data objects when using <i>mData</i></li>
|
|
|
349 </ul></p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">bRedraw</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>redraw the table or not</p></td></tr>
|
|
|
350 </tbody>
|
|
|
351 </table><h5>Returns:</h5><p class="returns"><p>An array of integers, representing the list of indexes in
|
|
|
352 <i>aoData</i> (<a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>) that have been added to
|
|
|
353 the table.</p></p><h5>Example:</h5>
|
|
|
354 <div class="example-code">
|
|
|
355 <pre class="brush: js"> // Global var for counter
|
|
|
356 var giCount = 2;
|
|
|
357
|
|
|
358 $(document).ready(function() {
|
|
|
359 $('#example').dataTable();
|
|
|
360 } );
|
|
|
361
|
|
|
362 function fnClickAddRow() {
|
|
|
363 $('#example').dataTable().fnAddData( [
|
|
|
364 giCount+".1",
|
|
|
365 giCount+".2",
|
|
|
366 giCount+".3",
|
|
|
367 giCount+".4" ]
|
|
|
368 );
|
|
|
369
|
|
|
370 giCount++;
|
|
|
371 }</pre>
|
|
|
372 </div>
|
|
|
373 </div>
|
|
|
374 <dt id="DataTable#fnAdjustColumnSizing" class=" odd"><a name="fnAdjustColumnSizing"></a><a name="fnAdjustColumnSizing_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnAdjustColumnSizing</a></span><span class="type-sig"><span class="signature">(<span class="optional">bRedraw</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>This function will make DataTables recalculate the column sizes, based on the data
|
|
|
375 contained in the table and the sizes applied to the columns (in the DOM, CSS or
|
|
|
376 through the sWidth parameter). This can be useful when the width of the table's
|
|
|
377 parent element changes (for example a window resize).</p><div class="collapse_details"><dl class="details">
|
|
|
378
|
|
|
379 </dl>
|
|
|
380 <h5>Parameters:</h5>
|
|
|
381
|
|
|
382 <table class="params">
|
|
|
383 <thead>
|
|
|
384 <tr>
|
|
|
385 <th width="20"></th>
|
|
|
386 <th width="12%" class="bottom_border name">Name</th>
|
|
|
387 <th width="10%" class="bottom_border">Type</th>
|
|
|
388 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
389 <th width="10%" class="bottom_border">Default</th>
|
|
|
390 <th class="last bottom_border">Description</th>
|
|
|
391 </tr>
|
|
|
392 </thead>
|
|
|
393
|
|
|
394 <tbody>
|
|
|
395 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bRedraw</td><td class="type type-param">boolean</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Redraw the table or not, you will typically want to</p></td></tr>
|
|
|
396 </tbody>
|
|
|
397 </table><h5>Example:</h5>
|
|
|
398 <div class="example-code">
|
|
|
399 <pre class="brush: js"> $(document).ready(function() {
|
|
|
400 var oTable = $('#example').dataTable( {
|
|
|
401 "sScrollY": "200px",
|
|
|
402 "bPaginate": false
|
|
|
403 } );
|
|
|
404
|
|
|
405 $(window).bind('resize', function () {
|
|
|
406 oTable.fnAdjustColumnSizing();
|
|
|
407 } );
|
|
|
408 } );</pre>
|
|
|
409 </div>
|
|
|
410 </div>
|
|
|
411 <dt id="DataTable#fnClearTable" class=" even"><a name="fnClearTable"></a><a name="fnClearTable_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnClearTable</a></span><span class="type-sig"><span class="signature">(<span class="optional">bRedraw</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Quickly and simply clear a table</p><div class="collapse_details"><dl class="details">
|
|
|
412
|
|
|
413 </dl>
|
|
|
414 <h5>Parameters:</h5>
|
|
|
415
|
|
|
416 <table class="params">
|
|
|
417 <thead>
|
|
|
418 <tr>
|
|
|
419 <th width="20"></th>
|
|
|
420 <th width="12%" class="bottom_border name">Name</th>
|
|
|
421 <th width="10%" class="bottom_border">Type</th>
|
|
|
422 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
423 <th width="10%" class="bottom_border">Default</th>
|
|
|
424 <th class="last bottom_border">Description</th>
|
|
|
425 </tr>
|
|
|
426 </thead>
|
|
|
427
|
|
|
428 <tbody>
|
|
|
429 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bRedraw</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>redraw the table or not</p></td></tr>
|
|
|
430 </tbody>
|
|
|
431 </table><h5>Example:</h5>
|
|
|
432 <div class="example-code">
|
|
|
433 <pre class="brush: js"> $(document).ready(function() {
|
|
|
434 var oTable = $('#example').dataTable();
|
|
|
435
|
|
|
436 // Immediately 'nuke' the current rows (perhaps waiting for an Ajax callback...)
|
|
|
437 oTable.fnClearTable();
|
|
|
438 } );</pre>
|
|
|
439 </div>
|
|
|
440 </div>
|
|
|
441 <dt id="DataTable#fnClose" class=" odd"><a name="fnClose"></a><a name="fnClose_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnClose</a></span><span class="type-sig"><span class="signature">(nTr)</span><span class="type-signature"> → {int}</span></span></span></dt><dd class=" odd"><p>The exact opposite of 'opening' a row, this function will close any rows which
|
|
|
442 are currently 'open'.</p><div class="collapse_details"><dl class="details">
|
|
|
443
|
|
|
444 </dl>
|
|
|
445 <h5>Parameters:</h5>
|
|
|
446
|
|
|
447 <table class="params">
|
|
|
448 <thead>
|
|
|
449 <tr>
|
|
|
450 <th width="20"></th>
|
|
|
451 <th width="12%" class="bottom_border name">Name</th>
|
|
|
452 <th width="10%" class="bottom_border">Type</th>
|
|
|
453 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
454 <th width="10%" class="bottom_border">Default</th>
|
|
|
455 <th class="last bottom_border">Description</th>
|
|
|
456 </tr>
|
|
|
457 </thead>
|
|
|
458
|
|
|
459 <tbody>
|
|
|
460 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTr</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>the table row to 'close'</p></td></tr>
|
|
|
461 </tbody>
|
|
|
462 </table><h5>Returns:</h5><p class="returns"><p>0 on success, or 1 if failed (can't find the row)</p></p><h5>Example:</h5>
|
|
|
463 <div class="example-code">
|
|
|
464 <pre class="brush: js"> $(document).ready(function() {
|
|
|
465 var oTable;
|
|
|
466
|
|
|
467 // 'open' an information row when a row is clicked on
|
|
|
468 $('#example tbody tr').click( function () {
|
|
|
469 if ( oTable.fnIsOpen(this) ) {
|
|
|
470 oTable.fnClose( this );
|
|
|
471 } else {
|
|
|
472 oTable.fnOpen( this, "Temporary row opened", "info_row" );
|
|
|
473 }
|
|
|
474 } );
|
|
|
475
|
|
|
476 oTable = $('#example').dataTable();
|
|
|
477 } );</pre>
|
|
|
478 </div>
|
|
|
479 </div>
|
|
|
480 <dt id="DataTable#fnDeleteRow" class=" even"><a name="fnDeleteRow"></a><a name="fnDeleteRow_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnDeleteRow</a></span><span class="type-sig"><span class="signature">(mTarget, <span class="optional">fnCallBack</span>, <span class="optional">bRedraw</span>)</span><span class="type-signature"> → {array}</span></span></span></dt><dd class=" even"><p>Remove a row for the table</p><div class="collapse_details"><dl class="details">
|
|
|
481
|
|
|
482 </dl>
|
|
|
483 <h5>Parameters:</h5>
|
|
|
484
|
|
|
485 <table class="params">
|
|
|
486 <thead>
|
|
|
487 <tr>
|
|
|
488 <th width="20"></th>
|
|
|
489 <th width="12%" class="bottom_border name">Name</th>
|
|
|
490 <th width="10%" class="bottom_border">Type</th>
|
|
|
491 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
492 <th width="10%" class="bottom_border">Default</th>
|
|
|
493 <th class="last bottom_border">Description</th>
|
|
|
494 </tr>
|
|
|
495 </thead>
|
|
|
496
|
|
|
497 <tbody>
|
|
|
498 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">mTarget</td><td class="type type-param">mixed</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The index of the row from aoData to be deleted, or
|
|
|
499 the TR element you want to delete</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">fnCallBack</td><td class="type type-param">function | null</td><td class="attributes">Optional</td><td class="default"></td><td class="description last"><p>Callback function</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">bRedraw</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Redraw the table or not</p></td></tr>
|
|
|
500 </tbody>
|
|
|
501 </table><h5>Returns:</h5><p class="returns"><p>The row that was deleted</p></p><h5>Example:</h5>
|
|
|
502 <div class="example-code">
|
|
|
503 <pre class="brush: js"> $(document).ready(function() {
|
|
|
504 var oTable = $('#example').dataTable();
|
|
|
505
|
|
|
506 // Immediately remove the first row
|
|
|
507 oTable.fnDeleteRow( 0 );
|
|
|
508 } );</pre>
|
|
|
509 </div>
|
|
|
510 </div>
|
|
|
511 <dt id="DataTable#fnDestroy" class=" odd"><a name="fnDestroy"></a><a name="fnDestroy_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnDestroy</a></span><span class="type-sig"><span class="signature">(<span class="optional">bRemove</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Restore the table to it's original state in the DOM by removing all of DataTables
|
|
|
512 enhancements, alterations to the DOM structure of the table and event listeners.</p><div class="collapse_details"><dl class="details">
|
|
|
513
|
|
|
514 </dl>
|
|
|
515 <h5>Parameters:</h5>
|
|
|
516
|
|
|
517 <table class="params">
|
|
|
518 <thead>
|
|
|
519 <tr>
|
|
|
520 <th width="20"></th>
|
|
|
521 <th width="12%" class="bottom_border name">Name</th>
|
|
|
522 <th width="10%" class="bottom_border">Type</th>
|
|
|
523 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
524 <th width="10%" class="bottom_border">Default</th>
|
|
|
525 <th class="last bottom_border">Description</th>
|
|
|
526 </tr>
|
|
|
527 </thead>
|
|
|
528
|
|
|
529 <tbody>
|
|
|
530 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bRemove</td><td class="type type-param">boolean</td><td class="attributes">Optional</td><td class="default">false</td><td class="description last"><p>Completely remove the table from the DOM</p></td></tr>
|
|
|
531 </tbody>
|
|
|
532 </table><h5>Example:</h5>
|
|
|
533 <div class="example-code">
|
|
|
534 <pre class="brush: js"> $(document).ready(function() {
|
|
|
535 // This example is fairly pointless in reality, but shows how fnDestroy can be used
|
|
|
536 var oTable = $('#example').dataTable();
|
|
|
537 oTable.fnDestroy();
|
|
|
538 } );</pre>
|
|
|
539 </div>
|
|
|
540 </div>
|
|
|
541 <dt id="DataTable#fnDraw" class=" even"><a name="fnDraw"></a><a name="fnDraw_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnDraw</a></span><span class="type-sig"><span class="signature">(<span class="optional">bComplete</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Redraw the table</p><div class="collapse_details"><dl class="details">
|
|
|
542
|
|
|
543 </dl>
|
|
|
544 <h5>Parameters:</h5>
|
|
|
545
|
|
|
546 <table class="params">
|
|
|
547 <thead>
|
|
|
548 <tr>
|
|
|
549 <th width="20"></th>
|
|
|
550 <th width="12%" class="bottom_border name">Name</th>
|
|
|
551 <th width="10%" class="bottom_border">Type</th>
|
|
|
552 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
553 <th width="10%" class="bottom_border">Default</th>
|
|
|
554 <th class="last bottom_border">Description</th>
|
|
|
555 </tr>
|
|
|
556 </thead>
|
|
|
557
|
|
|
558 <tbody>
|
|
|
559 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bComplete</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Re-filter and resort (if enabled) the table before the draw.</p></td></tr>
|
|
|
560 </tbody>
|
|
|
561 </table><h5>Example:</h5>
|
|
|
562 <div class="example-code">
|
|
|
563 <pre class="brush: js"> $(document).ready(function() {
|
|
|
564 var oTable = $('#example').dataTable();
|
|
|
565
|
|
|
566 // Re-draw the table - you wouldn't want to do it here, but it's an example :-)
|
|
|
567 oTable.fnDraw();
|
|
|
568 } );</pre>
|
|
|
569 </div>
|
|
|
570 </div>
|
|
|
571 <dt id="DataTable#fnFilter" class=" odd"><a name="fnFilter"></a><a name="fnFilter_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnFilter</a></span><span class="type-sig"><span class="signature">(sInput, <span class="optional">iColumn</span>, <span class="optional">bRegex</span>, <span class="optional">bSmart</span>, <span class="optional">bShowGlobal</span>, <span class="optional">bCaseInsensitive</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Filter the input based on data</p><div class="collapse_details"><dl class="details">
|
|
|
572
|
|
|
573 </dl>
|
|
|
574 <h5>Parameters:</h5>
|
|
|
575
|
|
|
576 <table class="params">
|
|
|
577 <thead>
|
|
|
578 <tr>
|
|
|
579 <th width="20"></th>
|
|
|
580 <th width="12%" class="bottom_border name">Name</th>
|
|
|
581 <th width="10%" class="bottom_border">Type</th>
|
|
|
582 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
583 <th width="10%" class="bottom_border">Default</th>
|
|
|
584 <th class="last bottom_border">Description</th>
|
|
|
585 </tr>
|
|
|
586 </thead>
|
|
|
587
|
|
|
588 <tbody>
|
|
|
589 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sInput</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>String to filter the table on</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">iColumn</td><td class="type type-param">int | null</td><td class="attributes">Optional</td><td class="default"></td><td class="description last"><p>Column to limit filtering to</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">bRegex</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">false</td><td class="description last"><p>Treat as regular expression or not</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">bSmart</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Perform smart filtering or not</p></td></tr><tr class="even"><td class="number right_border"><div>5</div></td><td class="name">bShowGlobal</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Show the input global filter in it's input box(es)</p></td></tr><tr class="odd"><td class="number right_border"><div>6</div></td><td class="name">bCaseInsensitive</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Do case-insensitive matching (true) or not (false)</p></td></tr>
|
|
|
590 </tbody>
|
|
|
591 </table><h5>Example:</h5>
|
|
|
592 <div class="example-code">
|
|
|
593 <pre class="brush: js"> $(document).ready(function() {
|
|
|
594 var oTable = $('#example').dataTable();
|
|
|
595
|
|
|
596 // Sometime later - filter...
|
|
|
597 oTable.fnFilter( 'test string' );
|
|
|
598 } );</pre>
|
|
|
599 </div>
|
|
|
600 </div>
|
|
|
601 <dt id="DataTable#fnGetData" class=" even"><a name="fnGetData"></a><a name="fnGetData_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnGetData</a></span><span class="type-sig"><span class="signature">(<span class="optional">mRow</span>, <span class="optional">iCol</span>)</span><span class="type-signature"> → {array|object|string}</span></span></span></dt><dd class=" even"><p>Get the data for the whole table, an individual row or an individual cell based on the
|
|
|
602 provided parameters.</p><div class="collapse_details"><dl class="details">
|
|
|
603
|
|
|
604 </dl>
|
|
|
605 <h5>Parameters:</h5>
|
|
|
606
|
|
|
607 <table class="params">
|
|
|
608 <thead>
|
|
|
609 <tr>
|
|
|
610 <th width="20"></th>
|
|
|
611 <th width="12%" class="bottom_border name">Name</th>
|
|
|
612 <th width="10%" class="bottom_border">Type</th>
|
|
|
613 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
614 <th width="10%" class="bottom_border">Default</th>
|
|
|
615 <th class="last bottom_border">Description</th>
|
|
|
616 </tr>
|
|
|
617 </thead>
|
|
|
618
|
|
|
619 <tbody>
|
|
|
620 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">mRow</td><td class="type type-param">int | node</td><td class="attributes">Optional</td><td class="default"></td><td class="description last"><p>A TR row node, TD/TH cell node or an integer. If given as
|
|
|
621 a TR node then the data source for the whole row will be returned. If given as a
|
|
|
622 TD/TH cell node then iCol will be automatically calculated and the data for the
|
|
|
623 cell returned. If given as an integer, then this is treated as the aoData internal
|
|
|
624 data index for the row (see fnGetPosition) and the data for that row used.</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">iCol</td><td class="type type-param">int</td><td class="attributes">Optional</td><td class="default"></td><td class="description last"><p>Optional column index that you want the data of.</p></td></tr>
|
|
|
625 </tbody>
|
|
|
626 </table><h5>Returns:</h5><p class="returns"><p>If mRow is undefined, then the data for all rows is
|
|
|
627 returned. If mRow is defined, just data for that row, and is iCol is
|
|
|
628 defined, only data for the designated cell is returned.</p></p><h5>Examples:</h5>
|
|
|
629 <div class="example-code">
|
|
|
630 <pre class="brush: js"> // Row data
|
|
|
631 $(document).ready(function() {
|
|
|
632 oTable = $('#example').dataTable();
|
|
|
633
|
|
|
634 oTable.$('tr').click( function () {
|
|
|
635 var data = oTable.fnGetData( this );
|
|
|
636 // ... do something with the array / object of data for the row
|
|
|
637 } );
|
|
|
638 } );
|
|
|
639
|
|
|
640 </pre>
|
|
|
641 </div>
|
|
|
642
|
|
|
643 <div class="example-code">
|
|
|
644 <pre class="brush: js"> // Individual cell data
|
|
|
645 $(document).ready(function() {
|
|
|
646 oTable = $('#example').dataTable();
|
|
|
647
|
|
|
648 oTable.$('td').click( function () {
|
|
|
649 var sData = oTable.fnGetData( this );
|
|
|
650 alert( 'The cell clicked on had the value of '+sData );
|
|
|
651 } );
|
|
|
652 } );</pre>
|
|
|
653 </div>
|
|
|
654 </div>
|
|
|
655 <dt id="DataTable#fnGetNodes" class=" odd"><a name="fnGetNodes"></a><a name="fnGetNodes_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnGetNodes</a></span><span class="type-sig"><span class="signature">(<span class="optional">iRow</span>)</span><span class="type-signature"> → {array|node}</span></span></span></dt><dd class=" odd"><p>Get an array of the TR nodes that are used in the table's body. Note that you will
|
|
|
656 typically want to use the '$' API method in preference to this as it is more
|
|
|
657 flexible.</p><div class="collapse_details"><dl class="details">
|
|
|
658
|
|
|
659 </dl>
|
|
|
660 <h5>Parameters:</h5>
|
|
|
661
|
|
|
662 <table class="params">
|
|
|
663 <thead>
|
|
|
664 <tr>
|
|
|
665 <th width="20"></th>
|
|
|
666 <th width="12%" class="bottom_border name">Name</th>
|
|
|
667 <th width="10%" class="bottom_border">Type</th>
|
|
|
668 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
669 <th width="10%" class="bottom_border">Default</th>
|
|
|
670 <th class="last bottom_border">Description</th>
|
|
|
671 </tr>
|
|
|
672 </thead>
|
|
|
673
|
|
|
674 <tbody>
|
|
|
675 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iRow</td><td class="type type-param">int</td><td class="attributes">Optional</td><td class="default"></td><td class="description last"><p>Optional row index for the TR element you want</p></td></tr>
|
|
|
676 </tbody>
|
|
|
677 </table><h5>Returns:</h5><p class="returns"><p>If iRow is undefined, returns an array of all TR elements
|
|
|
678 in the table's body, or iRow is defined, just the TR element requested.</p></p><h5>Example:</h5>
|
|
|
679 <div class="example-code">
|
|
|
680 <pre class="brush: js"> $(document).ready(function() {
|
|
|
681 var oTable = $('#example').dataTable();
|
|
|
682
|
|
|
683 // Get the nodes from the table
|
|
|
684 var nNodes = oTable.fnGetNodes( );
|
|
|
685 } );</pre>
|
|
|
686 </div>
|
|
|
687 </div>
|
|
|
688 <dt id="DataTable#fnGetPosition" class=" even"><a name="fnGetPosition"></a><a name="fnGetPosition_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnGetPosition</a></span><span class="type-sig"><span class="signature">(nNode)</span><span class="type-signature"> → {int}</span></span></span></dt><dd class=" even"><p>Get the array indexes of a particular cell from it's DOM element
|
|
|
689 and column index including hidden columns</p><div class="collapse_details"><dl class="details">
|
|
|
690
|
|
|
691 </dl>
|
|
|
692 <h5>Parameters:</h5>
|
|
|
693
|
|
|
694 <table class="params">
|
|
|
695 <thead>
|
|
|
696 <tr>
|
|
|
697 <th width="20"></th>
|
|
|
698 <th width="12%" class="bottom_border name">Name</th>
|
|
|
699 <th width="10%" class="bottom_border">Type</th>
|
|
|
700 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
701 <th width="10%" class="bottom_border">Default</th>
|
|
|
702 <th class="last bottom_border">Description</th>
|
|
|
703 </tr>
|
|
|
704 </thead>
|
|
|
705
|
|
|
706 <tbody>
|
|
|
707 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nNode</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>this can either be a TR, TD or TH in the table's body</p></td></tr>
|
|
|
708 </tbody>
|
|
|
709 </table><h5>Returns:</h5><p class="returns"><p>If nNode is given as a TR, then a single index is returned, or
|
|
|
710 if given as a cell, an array of [row index, column index (visible),
|
|
|
711 column index (all)] is given.</p></p><h5>Example:</h5>
|
|
|
712 <div class="example-code">
|
|
|
713 <pre class="brush: js"> $(document).ready(function() {
|
|
|
714 $('#example tbody td').click( function () {
|
|
|
715 // Get the position of the current data from the node
|
|
|
716 var aPos = oTable.fnGetPosition( this );
|
|
|
717
|
|
|
718 // Get the data array for this row
|
|
|
719 var aData = oTable.fnGetData( aPos[0] );
|
|
|
720
|
|
|
721 // Update the data array and return the value
|
|
|
722 aData[ aPos[1] ] = 'clicked';
|
|
|
723 this.innerHTML = 'clicked';
|
|
|
724 } );
|
|
|
725
|
|
|
726 // Init DataTables
|
|
|
727 oTable = $('#example').dataTable();
|
|
|
728 } );</pre>
|
|
|
729 </div>
|
|
|
730 </div>
|
|
|
731 <dt id="DataTable#fnIsOpen" class=" odd"><a name="fnIsOpen"></a><a name="fnIsOpen_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnIsOpen</a></span><span class="type-sig"><span class="signature">(nTr)</span><span class="type-signature"> → {boolean}</span></span></span></dt><dd class=" odd"><p>Check to see if a row is 'open' or not.</p><div class="collapse_details"><dl class="details">
|
|
|
732
|
|
|
733 </dl>
|
|
|
734 <h5>Parameters:</h5>
|
|
|
735
|
|
|
736 <table class="params">
|
|
|
737 <thead>
|
|
|
738 <tr>
|
|
|
739 <th width="20"></th>
|
|
|
740 <th width="12%" class="bottom_border name">Name</th>
|
|
|
741 <th width="10%" class="bottom_border">Type</th>
|
|
|
742 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
743 <th width="10%" class="bottom_border">Default</th>
|
|
|
744 <th class="last bottom_border">Description</th>
|
|
|
745 </tr>
|
|
|
746 </thead>
|
|
|
747
|
|
|
748 <tbody>
|
|
|
749 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTr</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>the table row to check</p></td></tr>
|
|
|
750 </tbody>
|
|
|
751 </table><h5>Returns:</h5><p class="returns"><p>true if the row is currently open, false otherwise</p></p><h5>Example:</h5>
|
|
|
752 <div class="example-code">
|
|
|
753 <pre class="brush: js"> $(document).ready(function() {
|
|
|
754 var oTable;
|
|
|
755
|
|
|
756 // 'open' an information row when a row is clicked on
|
|
|
757 $('#example tbody tr').click( function () {
|
|
|
758 if ( oTable.fnIsOpen(this) ) {
|
|
|
759 oTable.fnClose( this );
|
|
|
760 } else {
|
|
|
761 oTable.fnOpen( this, "Temporary row opened", "info_row" );
|
|
|
762 }
|
|
|
763 } );
|
|
|
764
|
|
|
765 oTable = $('#example').dataTable();
|
|
|
766 } );</pre>
|
|
|
767 </div>
|
|
|
768 </div>
|
|
|
769 <dt id="DataTable#fnOpen" class=" even"><a name="fnOpen"></a><a name="fnOpen_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnOpen</a></span><span class="type-sig"><span class="signature">(nTr, mHtml, sClass)</span><span class="type-signature"> → {node}</span></span></span></dt><dd class=" even"><p>This function will place a new row directly after a row which is currently
|
|
|
770 on display on the page, with the HTML contents that is passed into the
|
|
|
771 function. This can be used, for example, to ask for confirmation that a
|
|
|
772 particular record should be deleted.</p><div class="collapse_details"><dl class="details">
|
|
|
773
|
|
|
774 </dl>
|
|
|
775 <h5>Parameters:</h5>
|
|
|
776
|
|
|
777 <table class="params">
|
|
|
778 <thead>
|
|
|
779 <tr>
|
|
|
780 <th width="20"></th>
|
|
|
781 <th width="12%" class="bottom_border name">Name</th>
|
|
|
782 <th width="10%" class="bottom_border">Type</th>
|
|
|
783 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
784 <th width="10%" class="bottom_border">Default</th>
|
|
|
785 <th class="last bottom_border">Description</th>
|
|
|
786 </tr>
|
|
|
787 </thead>
|
|
|
788
|
|
|
789 <tbody>
|
|
|
790 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTr</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The table row to 'open'</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">mHtml</td><td class="type type-param">string | node | jQuery</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The HTML to put into the row</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">sClass</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Class to give the new TD cell</p></td></tr>
|
|
|
791 </tbody>
|
|
|
792 </table><h5>Returns:</h5><p class="returns"><p>The row opened. Note that if the table row passed in as the
|
|
|
793 first parameter, is not found in the table, this method will silently
|
|
|
794 return.</p></p><h5>Example:</h5>
|
|
|
795 <div class="example-code">
|
|
|
796 <pre class="brush: js"> $(document).ready(function() {
|
|
|
797 var oTable;
|
|
|
798
|
|
|
799 // 'open' an information row when a row is clicked on
|
|
|
800 $('#example tbody tr').click( function () {
|
|
|
801 if ( oTable.fnIsOpen(this) ) {
|
|
|
802 oTable.fnClose( this );
|
|
|
803 } else {
|
|
|
804 oTable.fnOpen( this, "Temporary row opened", "info_row" );
|
|
|
805 }
|
|
|
806 } );
|
|
|
807
|
|
|
808 oTable = $('#example').dataTable();
|
|
|
809 } );</pre>
|
|
|
810 </div>
|
|
|
811 </div>
|
|
|
812 <dt id="DataTable#fnPageChange" class=" odd"><a name="fnPageChange"></a><a name="fnPageChange_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnPageChange</a></span><span class="type-sig"><span class="signature">(mAction, <span class="optional">bRedraw</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Change the pagination - provides the internal logic for pagination in a simple API
|
|
|
813 function. With this function you can have a DataTables table go to the next,
|
|
|
814 previous, first or last pages.</p><div class="collapse_details"><dl class="details">
|
|
|
815
|
|
|
816 </dl>
|
|
|
817 <h5>Parameters:</h5>
|
|
|
818
|
|
|
819 <table class="params">
|
|
|
820 <thead>
|
|
|
821 <tr>
|
|
|
822 <th width="20"></th>
|
|
|
823 <th width="12%" class="bottom_border name">Name</th>
|
|
|
824 <th width="10%" class="bottom_border">Type</th>
|
|
|
825 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
826 <th width="10%" class="bottom_border">Default</th>
|
|
|
827 <th class="last bottom_border">Description</th>
|
|
|
828 </tr>
|
|
|
829 </thead>
|
|
|
830
|
|
|
831 <tbody>
|
|
|
832 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">mAction</td><td class="type type-param">string | int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Paging action to take: "first", "previous", "next" or "last"
|
|
|
833 or page number to jump to (integer), note that page 0 is the first page.</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">bRedraw</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Redraw the table or not</p></td></tr>
|
|
|
834 </tbody>
|
|
|
835 </table><h5>Example:</h5>
|
|
|
836 <div class="example-code">
|
|
|
837 <pre class="brush: js"> $(document).ready(function() {
|
|
|
838 var oTable = $('#example').dataTable();
|
|
|
839 oTable.fnPageChange( 'next' );
|
|
|
840 } );</pre>
|
|
|
841 </div>
|
|
|
842 </div>
|
|
|
843 <dt id="DataTable#fnSetColumnVis" class=" even"><a name="fnSetColumnVis"></a><a name="fnSetColumnVis_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnSetColumnVis</a></span><span class="type-sig"><span class="signature">(iCol, bShow, <span class="optional">bRedraw</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Show a particular column</p><div class="collapse_details"><dl class="details">
|
|
|
844
|
|
|
845 </dl>
|
|
|
846 <h5>Parameters:</h5>
|
|
|
847
|
|
|
848 <table class="params">
|
|
|
849 <thead>
|
|
|
850 <tr>
|
|
|
851 <th width="20"></th>
|
|
|
852 <th width="12%" class="bottom_border name">Name</th>
|
|
|
853 <th width="10%" class="bottom_border">Type</th>
|
|
|
854 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
855 <th width="10%" class="bottom_border">Default</th>
|
|
|
856 <th class="last bottom_border">Description</th>
|
|
|
857 </tr>
|
|
|
858 </thead>
|
|
|
859
|
|
|
860 <tbody>
|
|
|
861 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iCol</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The column whose display should be changed</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">bShow</td><td class="type type-param">bool</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Show (true) or hide (false) the column</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">bRedraw</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Redraw the table or not</p></td></tr>
|
|
|
862 </tbody>
|
|
|
863 </table><h5>Example:</h5>
|
|
|
864 <div class="example-code">
|
|
|
865 <pre class="brush: js"> $(document).ready(function() {
|
|
|
866 var oTable = $('#example').dataTable();
|
|
|
867
|
|
|
868 // Hide the second column after initialisation
|
|
|
869 oTable.fnSetColumnVis( 1, false );
|
|
|
870 } );</pre>
|
|
|
871 </div>
|
|
|
872 </div>
|
|
|
873 <dt id="DataTable#fnSettings" class=" odd"><a name="fnSettings"></a><a name="fnSettings_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnSettings</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"> → {object}</span></span></span></dt><dd class=" odd"><p>Get the settings for a particular table for external manipulation</p><div class="collapse_details"><dl class="details">
|
|
|
874
|
|
|
875 </dl>
|
|
|
876 <h5>Returns:</h5><p class="returns"><p>DataTables settings object. See
|
|
|
877 <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a></p></p><h5>Example:</h5>
|
|
|
878 <div class="example-code">
|
|
|
879 <pre class="brush: js"> $(document).ready(function() {
|
|
|
880 var oTable = $('#example').dataTable();
|
|
|
881 var oSettings = oTable.fnSettings();
|
|
|
882
|
|
|
883 // Show an example parameter from the settings
|
|
|
884 alert( oSettings._iDisplayStart );
|
|
|
885 } );</pre>
|
|
|
886 </div>
|
|
|
887 </div>
|
|
|
888 <dt id="DataTable#fnSort" class=" even"><a name="fnSort"></a><a name="fnSort_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnSort</a></span><span class="type-sig"><span class="signature">(iCol)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Sort the table by a particular column</p><div class="collapse_details"><dl class="details">
|
|
|
889
|
|
|
890 </dl>
|
|
|
891 <h5>Parameters:</h5>
|
|
|
892
|
|
|
893 <table class="params">
|
|
|
894 <thead>
|
|
|
895 <tr>
|
|
|
896 <th width="20"></th>
|
|
|
897 <th width="12%" class="bottom_border name">Name</th>
|
|
|
898 <th width="10%" class="bottom_border">Type</th>
|
|
|
899 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
900 <th width="10%" class="bottom_border">Default</th>
|
|
|
901 <th class="last bottom_border">Description</th>
|
|
|
902 </tr>
|
|
|
903 </thead>
|
|
|
904
|
|
|
905 <tbody>
|
|
|
906 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iCol</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>the data index to sort on. Note that this will not match the
|
|
|
907 'display index' if you have hidden data entries</p></td></tr>
|
|
|
908 </tbody>
|
|
|
909 </table><h5>Example:</h5>
|
|
|
910 <div class="example-code">
|
|
|
911 <pre class="brush: js"> $(document).ready(function() {
|
|
|
912 var oTable = $('#example').dataTable();
|
|
|
913
|
|
|
914 // Sort immediately with columns 0 and 1
|
|
|
915 oTable.fnSort( [ [0,'asc'], [1,'asc'] ] );
|
|
|
916 } );</pre>
|
|
|
917 </div>
|
|
|
918 </div>
|
|
|
919 <dt id="DataTable#fnSortListener" class=" odd"><a name="fnSortListener"></a><a name="fnSortListener_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnSortListener</a></span><span class="type-sig"><span class="signature">(nNode, iColumn, <span class="optional">fnCallback</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Attach a sort listener to an element for a given column</p><div class="collapse_details"><dl class="details">
|
|
|
920
|
|
|
921 </dl>
|
|
|
922 <h5>Parameters:</h5>
|
|
|
923
|
|
|
924 <table class="params">
|
|
|
925 <thead>
|
|
|
926 <tr>
|
|
|
927 <th width="20"></th>
|
|
|
928 <th width="12%" class="bottom_border name">Name</th>
|
|
|
929 <th width="10%" class="bottom_border">Type</th>
|
|
|
930 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
931 <th width="10%" class="bottom_border">Default</th>
|
|
|
932 <th class="last bottom_border">Description</th>
|
|
|
933 </tr>
|
|
|
934 </thead>
|
|
|
935
|
|
|
936 <tbody>
|
|
|
937 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nNode</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>the element to attach the sort listener to</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">iColumn</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>the column that a click on this node will sort on</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">Optional</td><td class="default"></td><td class="description last"><p>callback function when sort is run</p></td></tr>
|
|
|
938 </tbody>
|
|
|
939 </table><h5>Example:</h5>
|
|
|
940 <div class="example-code">
|
|
|
941 <pre class="brush: js"> $(document).ready(function() {
|
|
|
942 var oTable = $('#example').dataTable();
|
|
|
943
|
|
|
944 // Sort on column 1, when 'sorter' is clicked on
|
|
|
945 oTable.fnSortListener( document.getElementById('sorter'), 1 );
|
|
|
946 } );</pre>
|
|
|
947 </div>
|
|
|
948 </div>
|
|
|
949 <dt id="DataTable#fnUpdate" class=" even"><a name="fnUpdate"></a><a name="fnUpdate_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnUpdate</a></span><span class="type-sig"><span class="signature">(mData, mRow, <span class="optional">iColumn</span>, <span class="optional">bRedraw</span>, <span class="optional">bAction</span>)</span><span class="type-signature"> → {int}</span></span></span></dt><dd class=" even"><p>Update a table cell or row - this method will accept either a single value to
|
|
|
950 update the cell with, an array of values with one element for each column or
|
|
|
951 an object in the same format as the original data source. The function is
|
|
|
952 self-referencing in order to make the multi column updates easier.</p><div class="collapse_details"><dl class="details">
|
|
|
953
|
|
|
954 </dl>
|
|
|
955 <h5>Parameters:</h5>
|
|
|
956
|
|
|
957 <table class="params">
|
|
|
958 <thead>
|
|
|
959 <tr>
|
|
|
960 <th width="20"></th>
|
|
|
961 <th width="12%" class="bottom_border name">Name</th>
|
|
|
962 <th width="10%" class="bottom_border">Type</th>
|
|
|
963 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
964 <th width="10%" class="bottom_border">Default</th>
|
|
|
965 <th class="last bottom_border">Description</th>
|
|
|
966 </tr>
|
|
|
967 </thead>
|
|
|
968
|
|
|
969 <tbody>
|
|
|
970 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">mData</td><td class="type type-param">object | array | string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Data to update the cell/row with</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">mRow</td><td class="type type-param">node | int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>TR element you want to update or the aoData index</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">iColumn</td><td class="type type-param">int</td><td class="attributes">Optional</td><td class="default"></td><td class="description last"><p>The column to update (not used of mData is an array or object)</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">bRedraw</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Redraw the table or not</p></td></tr><tr class="even"><td class="number right_border"><div>5</div></td><td class="name">bAction</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Perform pre-draw actions or not</p></td></tr>
|
|
|
971 </tbody>
|
|
|
972 </table><h5>Returns:</h5><p class="returns"><p>0 on success, 1 on error</p></p><h5>Example:</h5>
|
|
|
973 <div class="example-code">
|
|
|
974 <pre class="brush: js"> $(document).ready(function() {
|
|
|
975 var oTable = $('#example').dataTable();
|
|
|
976 oTable.fnUpdate( 'Example update', 0, 0 ); // Single cell
|
|
|
977 oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1, 0 ); // Row
|
|
|
978 } );</pre>
|
|
|
979 </div>
|
|
|
980 </div>
|
|
|
981 <dt id="DataTable#fnVersionCheck" class=" odd"><a name="fnVersionCheck"></a><a name="fnVersionCheck_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnVersionCheck</a></span><span class="type-sig"><span class="signature">(sVersion)</span><span class="type-signature"> → {boolean}</span></span></span></dt><dd class=" odd"><p>Provide a common method for plug-ins to check the version of DataTables being used, in order
|
|
|
982 to ensure compatibility.</p><div class="collapse_details"><dl class="details">
|
|
|
983
|
|
|
984 </dl>
|
|
|
985 <h5>Parameters:</h5>
|
|
|
986
|
|
|
987 <table class="params">
|
|
|
988 <thead>
|
|
|
989 <tr>
|
|
|
990 <th width="20"></th>
|
|
|
991 <th width="12%" class="bottom_border name">Name</th>
|
|
|
992 <th width="10%" class="bottom_border">Type</th>
|
|
|
993 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
994 <th width="10%" class="bottom_border">Default</th>
|
|
|
995 <th class="last bottom_border">Description</th>
|
|
|
996 </tr>
|
|
|
997 </thead>
|
|
|
998
|
|
|
999 <tbody>
|
|
|
1000 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sVersion</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Version string to check for, in the format "X.Y.Z". Note that the
|
|
|
1001 formats "X" and "X.Y" are also acceptable.</p></td></tr>
|
|
|
1002 </tbody>
|
|
|
1003 </table><h5>Returns:</h5><p class="returns"><p>true if this version of DataTables is greater or equal to the required
|
|
|
1004 version, or false if this version of DataTales is not suitable</p></p><h5>Example:</h5>
|
|
|
1005 <div class="example-code">
|
|
|
1006 <pre class="brush: js"> $(document).ready(function() {
|
|
|
1007 var oTable = $('#example').dataTable();
|
|
|
1008 alert( oTable.fnVersionCheck( '1.9.0' ) );
|
|
|
1009 } );</pre>
|
|
|
1010 </div>
|
|
|
1011 </div>
|
|
|
1012
|
|
|
1013 </dd>
|
|
|
1014 </div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - static</h3>
|
|
|
1015 <dl>
|
|
|
1016 <dt id="DataTable.fnIsDataTable" class=" even"><a name="fnIsDataTable"></a><a name="fnIsDataTable_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a>fnIsDataTable</a></span><span class="type-sig"><span class="signature">(nTable)</span><span class="type-signature"> → {boolean}</span></span></span></dt><dd class=" even"><p>Check if a TABLE node is a DataTable table already or not.</p><div class="collapse_details"><dl class="details">
|
|
|
1017
|
|
|
1018 </dl>
|
|
|
1019 <h5>Parameters:</h5>
|
|
|
1020
|
|
|
1021 <table class="params">
|
|
|
1022 <thead>
|
|
|
1023 <tr>
|
|
|
1024 <th width="20"></th>
|
|
|
1025 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1026 <th width="10%" class="bottom_border">Type</th>
|
|
|
1027 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1028 <th width="10%" class="bottom_border">Default</th>
|
|
|
1029 <th class="last bottom_border">Description</th>
|
|
|
1030 </tr>
|
|
|
1031 </thead>
|
|
|
1032
|
|
|
1033 <tbody>
|
|
|
1034 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTable</td><td class="type type-param">node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The TABLE node to check if it is a DataTable or not (note that other
|
|
|
1035 node types can be passed in, but will always return false).</p></td></tr>
|
|
|
1036 </tbody>
|
|
|
1037 </table><h5>Returns:</h5><p class="returns"><p>true the table given is a DataTable, or false otherwise</p></p><h5>Example:</h5>
|
|
|
1038 <div class="example-code">
|
|
|
1039 <pre class="brush: js"> var ex = document.getElementById('example');
|
|
|
1040 if ( ! $.fn.DataTable.fnIsDataTable( ex ) ) {
|
|
|
1041 $(ex).dataTable();
|
|
|
1042 }</pre>
|
|
|
1043 </div>
|
|
|
1044 </div>
|
|
|
1045 <dt id="DataTable.fnTables" class=" odd"><a name="fnTables"></a><a name="fnTables_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a>fnTables</a></span><span class="type-sig"><span class="signature">(<span class="optional">bVisible</span>)</span><span class="type-signature"> → {array}</span></span></span></dt><dd class=" odd"><p>Get all DataTable tables that have been initialised - optionally you can select to
|
|
|
1046 get only currently visible tables.</p><div class="collapse_details"><dl class="details">
|
|
|
1047
|
|
|
1048 </dl>
|
|
|
1049 <h5>Parameters:</h5>
|
|
|
1050
|
|
|
1051 <table class="params">
|
|
|
1052 <thead>
|
|
|
1053 <tr>
|
|
|
1054 <th width="20"></th>
|
|
|
1055 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1056 <th width="10%" class="bottom_border">Type</th>
|
|
|
1057 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1058 <th width="10%" class="bottom_border">Default</th>
|
|
|
1059 <th class="last bottom_border">Description</th>
|
|
|
1060 </tr>
|
|
|
1061 </thead>
|
|
|
1062
|
|
|
1063 <tbody>
|
|
|
1064 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bVisible</td><td class="type type-param">boolean</td><td class="attributes">Optional</td><td class="default">false</td><td class="description last"><p>Flag to indicate if you want all (default) or
|
|
|
1065 visible tables only.</p></td></tr>
|
|
|
1066 </tbody>
|
|
|
1067 </table><h5>Returns:</h5><p class="returns"><p>Array of TABLE nodes (not DataTable instances) which are DataTables</p></p><h5>Example:</h5>
|
|
|
1068 <div class="example-code">
|
|
|
1069 <pre class="brush: js"> var table = $.fn.dataTable.fnTables(true);
|
|
|
1070 if ( table.length > 0 ) {
|
|
|
1071 $(table).dataTable().fnAdjustColumnSizing();
|
|
|
1072 }</pre>
|
|
|
1073 </div>
|
|
|
1074 </div>
|
|
|
1075 <dt id="DataTable.fnVersionCheck" class=" even"><a name="fnVersionCheck"></a><a name="fnVersionCheck_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a>fnVersionCheck</a></span><span class="type-sig"><span class="signature">(sVersion)</span><span class="type-signature"> → {boolean}</span></span></span></dt><dd class=" even"><p>Provide a common method for plug-ins to check the version of DataTables being used, in order
|
|
|
1076 to ensure compatibility.</p><div class="collapse_details"><dl class="details">
|
|
|
1077
|
|
|
1078 </dl>
|
|
|
1079 <h5>Parameters:</h5>
|
|
|
1080
|
|
|
1081 <table class="params">
|
|
|
1082 <thead>
|
|
|
1083 <tr>
|
|
|
1084 <th width="20"></th>
|
|
|
1085 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1086 <th width="10%" class="bottom_border">Type</th>
|
|
|
1087 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1088 <th width="10%" class="bottom_border">Default</th>
|
|
|
1089 <th class="last bottom_border">Description</th>
|
|
|
1090 </tr>
|
|
|
1091 </thead>
|
|
|
1092
|
|
|
1093 <tbody>
|
|
|
1094 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sVersion</td><td class="type type-param">string</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Version string to check for, in the format "X.Y.Z". Note that the
|
|
|
1095 formats "X" and "X.Y" are also acceptable.</p></td></tr>
|
|
|
1096 </tbody>
|
|
|
1097 </table><h5>Returns:</h5><p class="returns"><p>true if this version of DataTables is greater or equal to the required
|
|
|
1098 version, or false if this version of DataTales is not suitable</p></p><h5>Example:</h5>
|
|
|
1099 <div class="example-code">
|
|
|
1100 <pre class="brush: js"> alert( $.fn.dataTable.fnVersionCheck( '1.9.0' ) );</pre>
|
|
|
1101 </div>
|
|
|
1102 </div>
|
|
|
1103
|
|
|
1104 </dd>
|
|
|
1105 </div><div class="doc_group"><a name="details_events"></a><h3 class="subsection-title">Events</h3>
|
|
|
1106 <dl>
|
|
|
1107 <dt id="DataTable#event:destroy" class=" even"><a name="destroy"></a><a name="destroy_details"></a><span class="type-attr"></span><span class="type-name"><a>destroy</a></span><span class="type-sig"></span></span></dt><dd class=" even"><p>Destroy event, fired when the DataTable is destroyed by calling fnDestroy or passing
|
|
|
1108 the bDestroy:true parameter in the initialisation object. This can be used to remove
|
|
|
1109 bound events, added DOM nodes, etc.</p><div class="collapse_details"><dl class="details">
|
|
|
1110
|
|
|
1111 </dl>
|
|
|
1112 <h5>Parameters:</h5>
|
|
|
1113
|
|
|
1114 <table class="params">
|
|
|
1115 <thead>
|
|
|
1116 <tr>
|
|
|
1117 <th width="20"></th>
|
|
|
1118 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1119 <th width="10%" class="bottom_border">Type</th>
|
|
|
1120 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1121 <th width="10%" class="bottom_border">Default</th>
|
|
|
1122 <th class="last bottom_border">Description</th>
|
|
|
1123 </tr>
|
|
|
1124 </thead>
|
|
|
1125
|
|
|
1126 <tbody>
|
|
|
1127 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a></p></td></tr>
|
|
|
1128 </tbody>
|
|
|
1129 </table></div>
|
|
|
1130 <dt id="DataTable#event:draw" class=" odd"><a name="draw"></a><a name="draw_details"></a><span class="type-attr"></span><span class="type-name"><a>draw</a></span><span class="type-sig"></span></span></dt><dd class=" odd"><p>Draw event, fired whenever the table is redrawn on the page, at the same point as
|
|
|
1131 fnDrawCallback. This may be useful for binding events or performing calculations when
|
|
|
1132 the table is altered at all.</p><div class="collapse_details"><dl class="details">
|
|
|
1133
|
|
|
1134 </dl>
|
|
|
1135 <h5>Parameters:</h5>
|
|
|
1136
|
|
|
1137 <table class="params">
|
|
|
1138 <thead>
|
|
|
1139 <tr>
|
|
|
1140 <th width="20"></th>
|
|
|
1141 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1142 <th width="10%" class="bottom_border">Type</th>
|
|
|
1143 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1144 <th width="10%" class="bottom_border">Default</th>
|
|
|
1145 <th class="last bottom_border">Description</th>
|
|
|
1146 </tr>
|
|
|
1147 </thead>
|
|
|
1148
|
|
|
1149 <tbody>
|
|
|
1150 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a></p></td></tr>
|
|
|
1151 </tbody>
|
|
|
1152 </table></div>
|
|
|
1153 <dt id="DataTable#event:filter" class=" even"><a name="filter"></a><a name="filter_details"></a><span class="type-attr"></span><span class="type-name"><a>filter</a></span><span class="type-sig"></span></span></dt><dd class=" even"><p>Filter event, fired when the filtering applied to the table (using the build in global
|
|
|
1154 global filter, or column filters) is altered.</p><div class="collapse_details"><dl class="details">
|
|
|
1155
|
|
|
1156 </dl>
|
|
|
1157 <h5>Parameters:</h5>
|
|
|
1158
|
|
|
1159 <table class="params">
|
|
|
1160 <thead>
|
|
|
1161 <tr>
|
|
|
1162 <th width="20"></th>
|
|
|
1163 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1164 <th width="10%" class="bottom_border">Type</th>
|
|
|
1165 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1166 <th width="10%" class="bottom_border">Default</th>
|
|
|
1167 <th class="last bottom_border">Description</th>
|
|
|
1168 </tr>
|
|
|
1169 </thead>
|
|
|
1170
|
|
|
1171 <tbody>
|
|
|
1172 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a></p></td></tr>
|
|
|
1173 </tbody>
|
|
|
1174 </table></div>
|
|
|
1175 <dt id="DataTable#event:init" class=" odd"><a name="init"></a><a name="init_details"></a><span class="type-attr"></span><span class="type-name"><a>init</a></span><span class="type-sig"></span></span></dt><dd class=" odd"><p>DataTables initialisation complete event, fired when the table is fully drawn,
|
|
|
1176 including Ajax data loaded, if Ajax data is required.</p><div class="collapse_details"><dl class="details">
|
|
|
1177
|
|
|
1178 </dl>
|
|
|
1179 <h5>Parameters:</h5>
|
|
|
1180
|
|
|
1181 <table class="params">
|
|
|
1182 <thead>
|
|
|
1183 <tr>
|
|
|
1184 <th width="20"></th>
|
|
|
1185 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1186 <th width="10%" class="bottom_border">Type</th>
|
|
|
1187 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1188 <th width="10%" class="bottom_border">Default</th>
|
|
|
1189 <th class="last bottom_border">Description</th>
|
|
|
1190 </tr>
|
|
|
1191 </thead>
|
|
|
1192
|
|
|
1193 <tbody>
|
|
|
1194 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</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="even"><td class="number right_border"><div>3</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
|
|
|
1195 present if client-side Ajax sourced data is used</li></ol></p></td></tr>
|
|
|
1196 </tbody>
|
|
|
1197 </table></div>
|
|
|
1198 <dt id="DataTable#event:page" class=" even"><a name="page"></a><a name="page_details"></a><span class="type-attr"></span><span class="type-name"><a>page</a></span><span class="type-sig"></span></span></dt><dd class=" even"><p>Page change event, fired when the paging of the table is altered.</p><div class="collapse_details"><dl class="details">
|
|
|
1199
|
|
|
1200 </dl>
|
|
|
1201 <h5>Parameters:</h5>
|
|
|
1202
|
|
|
1203 <table class="params">
|
|
|
1204 <thead>
|
|
|
1205 <tr>
|
|
|
1206 <th width="20"></th>
|
|
|
1207 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1208 <th width="10%" class="bottom_border">Type</th>
|
|
|
1209 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1210 <th width="10%" class="bottom_border">Default</th>
|
|
|
1211 <th class="last bottom_border">Description</th>
|
|
|
1212 </tr>
|
|
|
1213 </thead>
|
|
|
1214
|
|
|
1215 <tbody>
|
|
|
1216 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a></p></td></tr>
|
|
|
1217 </tbody>
|
|
|
1218 </table></div>
|
|
|
1219 <dt id="DataTable#event:processing" class=" odd"><a name="processing"></a><a name="processing_details"></a><span class="type-attr"></span><span class="type-name"><a>processing</a></span><span class="type-sig"></span></span></dt><dd class=" odd"><p>Processing event, fired when DataTables is doing some kind of processing (be it,
|
|
|
1220 sort, filter or anything else). Can be used to indicate to the end user that
|
|
|
1221 there is something happening, or that something has finished.</p><div class="collapse_details"><dl class="details">
|
|
|
1222
|
|
|
1223 </dl>
|
|
|
1224 <h5>Parameters:</h5>
|
|
|
1225
|
|
|
1226 <table class="params">
|
|
|
1227 <thead>
|
|
|
1228 <tr>
|
|
|
1229 <th width="20"></th>
|
|
|
1230 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1231 <th width="10%" class="bottom_border">Type</th>
|
|
|
1232 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1233 <th width="10%" class="bottom_border">Default</th>
|
|
|
1234 <th class="last bottom_border">Description</th>
|
|
|
1235 </tr>
|
|
|
1236 </thead>
|
|
|
1237
|
|
|
1238 <tbody>
|
|
|
1239 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</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="even"><td class="number right_border"><div>3</div></td><td class="name">bShow</td><td class="type type-param">boolean</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Flag for if DataTables is doing processing or not</p></td></tr>
|
|
|
1240 </tbody>
|
|
|
1241 </table></div>
|
|
|
1242 <dt id="DataTable#event:sort" class=" even"><a name="sort"></a><a name="sort_details"></a><span class="type-attr"></span><span class="type-name"><a>sort</a></span><span class="type-sig"></span></span></dt><dd class=" even"><p>Sort event, fired when the sorting applied to the table is altered.</p><div class="collapse_details"><dl class="details">
|
|
|
1243
|
|
|
1244 </dl>
|
|
|
1245 <h5>Parameters:</h5>
|
|
|
1246
|
|
|
1247 <table class="params">
|
|
|
1248 <thead>
|
|
|
1249 <tr>
|
|
|
1250 <th width="20"></th>
|
|
|
1251 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1252 <th width="10%" class="bottom_border">Type</th>
|
|
|
1253 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1254 <th width="10%" class="bottom_border">Default</th>
|
|
|
1255 <th class="last bottom_border">Description</th>
|
|
|
1256 </tr>
|
|
|
1257 </thead>
|
|
|
1258
|
|
|
1259 <tbody>
|
|
|
1260 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a></p></td></tr>
|
|
|
1261 </tbody>
|
|
|
1262 </table></div>
|
|
|
1263 <dt id="DataTable#event:stateLoaded" class=" odd"><a name="stateLoaded"></a><a name="stateLoaded_details"></a><span class="type-attr"></span><span class="type-name"><a>stateLoaded</a></span><span class="type-sig"></span></span></dt><dd class=" odd"><p>State loaded event, fired when state has been loaded from stored data and the settings
|
|
|
1264 object has been modified by the loaded data.</p><div class="collapse_details"><dl class="details">
|
|
|
1265
|
|
|
1266 </dl>
|
|
|
1267 <h5>Parameters:</h5>
|
|
|
1268
|
|
|
1269 <table class="params">
|
|
|
1270 <thead>
|
|
|
1271 <tr>
|
|
|
1272 <th width="20"></th>
|
|
|
1273 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1274 <th width="10%" class="bottom_border">Type</th>
|
|
|
1275 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1276 <th width="10%" class="bottom_border">Default</th>
|
|
|
1277 <th class="last bottom_border">Description</th>
|
|
|
1278 </tr>
|
|
|
1279 </thead>
|
|
|
1280
|
|
|
1281 <tbody>
|
|
|
1282 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</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="even"><td class="number right_border"><div>3</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 saved state information</p></td></tr>
|
|
|
1283 </tbody>
|
|
|
1284 </table></div>
|
|
|
1285 <dt id="DataTable#event:stateLoadParams" class=" even"><a name="stateLoadParams"></a><a name="stateLoadParams_details"></a><span class="type-attr"></span><span class="type-name"><a>stateLoadParams</a></span><span class="type-sig"></span></span></dt><dd class=" even"><p>State load event, fired when the table is loading state from the stored data, but
|
|
|
1286 prior to the settings object being modified by the saved state - allowing modification
|
|
|
1287 of the saved state is required or loading of state for a plug-in.</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">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</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="even"><td class="number right_border"><div>3</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 saved state information</p></td></tr>
|
|
|
1306 </tbody>
|
|
|
1307 </table></div>
|
|
|
1308 <dt id="DataTable#event:stateSaveParams" class=" odd"><a name="stateSaveParams"></a><a name="stateSaveParams_details"></a><span class="type-attr"></span><span class="type-name"><a>stateSaveParams</a></span><span class="type-sig"></span></span></dt><dd class=" odd"><p>State save event, fired when the table has changed state a new state save is required.
|
|
|
1309 This method allows modification of the state saving object prior to actually doing the
|
|
|
1310 save, including addition or other state properties (for plug-ins) or modification
|
|
|
1311 of a DataTables core property.</p><div class="collapse_details"><dl class="details">
|
|
|
1312
|
|
|
1313 </dl>
|
|
|
1314 <h5>Parameters:</h5>
|
|
|
1315
|
|
|
1316 <table class="params">
|
|
|
1317 <thead>
|
|
|
1318 <tr>
|
|
|
1319 <th width="20"></th>
|
|
|
1320 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1321 <th width="10%" class="bottom_border">Type</th>
|
|
|
1322 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1323 <th width="10%" class="bottom_border">Default</th>
|
|
|
1324 <th class="last bottom_border">Description</th>
|
|
|
1325 </tr>
|
|
|
1326 </thead>
|
|
|
1327
|
|
|
1328 <tbody>
|
|
|
1329 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</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="even"><td class="number right_border"><div>3</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 state information to be saved</p></td></tr>
|
|
|
1330 </tbody>
|
|
|
1331 </table></div>
|
|
|
1332 <dt id="DataTable#event:xhr" class=" even"><a name="xhr"></a><a name="xhr_details"></a><span class="type-attr"></span><span class="type-name"><a>xhr</a></span><span class="type-sig"></span></span></dt><dd class=" even"><p>Ajax (XHR) event, fired whenever an Ajax request is completed from a request to
|
|
|
1333 made to the server for new data (note that this trigger is called in fnServerData,
|
|
|
1334 if you override fnServerData and which to use this event, you need to trigger it in
|
|
|
1335 you success function).</p><div class="collapse_details"><dl class="details">
|
|
|
1336
|
|
|
1337 </dl>
|
|
|
1338 <h5>Parameters:</h5>
|
|
|
1339
|
|
|
1340 <table class="params">
|
|
|
1341 <thead>
|
|
|
1342 <tr>
|
|
|
1343 <th width="20"></th>
|
|
|
1344 <th width="12%" class="bottom_border name">Name</th>
|
|
|
1345 <th width="10%" class="bottom_border">Type</th>
|
|
|
1346 <th width="10%" class="bottom_border">Attributes</th>
|
|
|
1347 <th width="10%" class="bottom_border">Default</th>
|
|
|
1348 <th class="last bottom_border">Description</th>
|
|
|
1349 </tr>
|
|
|
1350 </thead>
|
|
|
1351
|
|
|
1352 <tbody>
|
|
|
1353 <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a></p></td></tr><tr class="even"><td class="number right_border"><div>3</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>JSON returned from the server</p></td></tr>
|
|
|
1354 </tbody>
|
|
|
1355 </table></div>
|
|
|
1356
|
|
|
1357 </dd>
|
|
|
1358 </div>
|
|
|
1359 </div>
|
|
|
1360
|
|
|
1361 </div>
|
|
|
1362
|
|
|
1363 <div class="fw_footer">
|
|
|
1364 DataTables: Copyright 2008-2012 Allan Jardine, all rights reserved<br>
|
|
|
1365
|
|
|
1366 Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
|
|
1367 23th Sep 2012 - 14:27
|
|
|
1368 with the <a href="http://datatables.net/">DataTables</a> template.
|
|
|
1369 </div>
|
|
|
1370 </body>
|
|
|
1371 </html> |
