1 |
torben |
2125 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
2 |
|
|
<html> |
3 |
|
|
<head> |
4 |
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
5 |
|
|
<title>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> |