Mercurial > repos > saskia-hiltemann > ireport
view DataTables-1.9.4/docs/DataTable.html @ 8:86219e4aa239 draft
Uploaded
| author | saskia-hiltemann |
|---|---|
| date | Mon, 28 Aug 2017 10:23:21 -0400 |
| parents | ac5f9272033b |
| children |
line wrap: on
line source
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Class: DataTable - documentation</title> <style type="text/css" media="screen"> @import "media/css/doc.css"; @import "media/css/shCore.css"; @import "media/css/shThemeDataTables.css"; </style> <script type="text/javascript" src="media/js/shCore.js"></script> <script type="text/javascript" src="media/js/shBrushJScript.js"></script> <script type="text/javascript" src="media/js/jquery.js"></script> <script type="text/javascript" src="media/js/doc.js"></script> </head> <body> <div class="fw_container"> <a name="top"></a> <div class="fw_header"> <h1 class="page-title">Class: DataTable</h1> <div class="page-info"> DataTables v1.9.4 documentation </div> </div> <div class="fw_nav"> <h2>Navigation</h2> <ul> <li><a href="#top">Overview</a></li> <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> <div style="margin-top: 10px;"> <input type="hidden" name="show_private" value="0"> <span id="private_label">Hiding</span> private elements (<a id="private_toggle" href="">toggle</a>) </span> </div> <div> <input type="hidden" name="show_extended" value="1"> <span id="extended_label">Showing</span> extended elements (<a id="extended_toggle" href="">toggle</a>) </span> </div> </div> <div class="fw_content"> <a name="overview"></a> <div class="doc_overview"> <div class="nav_blocker"></div> <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 highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. For a full list of features please refer to <a href="http://datatables.net">DataTables.net</a>.</p> <p>Note that the <i>DataTable</i> object is not a global variable but is aliased to <i>jQuery.fn.DataTable</i> and <i>jQuery.fn.dataTable</i> through which it may be accessed.</p><div class="collapse_details"><h3>Constructor</h3><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 are defined by <a href="DataTable.defaults.html">DataTable.defaults</a></p></td></tr> </tbody> </table><h5>Examples:</h5> <div class="example-code"> <pre class="brush: js"> // Basic initialisation $(document).ready( function { $('#example').dataTable(); } ); </pre> </div> <div class="example-code"> <pre class="brush: js"> // Initialisation with configuration options - in this case, disable // pagination and sorting. $(document).ready( function { $('#example').dataTable( { "bPaginate": false, "bSort": false } ); } );</pre> </div> </div> </dl><h3 class="subsection-title">Requires</h3> <ul> <li>module:jQuery</li> </ul> </div> <div class="doc_summary"> <a name="summary"></a> <h2>Summary</h2> <div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3> <dl> <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 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 to it. These models define the objects that are used to hold the active state 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 methods are references to internal functions and are considered to be private. If you use these methods, be aware that they are liable to change between versions (check the upgrade notes).</p></dd> </dl></div><div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3> <dl> <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 a.b.c.d.e where: a:int, b:int, c:int, d:string(dev|beta), e:int. d and e are optional</p></dd> </dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3> <dl> <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 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 rows - as such, the jQuery selector used should match TR row nodes or TD/TH cell nodes rather than any descendants, so the data can be obtained for the row/cell. If matching rows are found, the data returned is the original data array/object that was used to <br /> 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 that this is suitable for client-side processing only - if you are using server-side processing (i.e. "bServerSide": true), then to add data, you 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 contained in the table and the sizes applied to the columns (in the DOM, CSS or through the sWidth parameter). This can be useful when the width of the table's 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 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 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 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 typically want to use the '$' API method in preference to this as it is more 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 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 on display on the page, with the HTML contents that is passed into the function. This can be used, for example, to ask for confirmation that a 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 function. With this function you can have a DataTables table go to the next, 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 update the cell with, an array of values with one element for each column or an object in the same format as the original data source. The function is 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 to ensure compatibility.</p></dd> </dl> </div><div class="doc_group"><a name="summary_methods_static"></a><h3 class="subsection-title">Methods - static</h3> <dl> <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 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 to ensure compatibility.</p></dd> </dl> </div><div class="doc_group"><a name="summary_events"></a><h3 class="subsection-title">Events</h3> <dl> <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 the bDestroy:true parameter in the initialisation object. This can be used to remove 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 fnDrawCallback. This may be useful for binding events or performing calculations when 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 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, 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, sort, filter or anything else). Can be used to indicate to the end user that 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 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 prior to the settings object being modified by the saved state - allowing modification 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. This method allows modification of the state saving object prior to actually doing the save, including addition or other state properties (for plug-ins) or modification 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 made to the server for new data (note that this trigger is called in fnServerData, if you override fnServerData and which to use this event, you need to trigger it in you success function).</p></dd> </dd> </div> </div> <div class="doc_details"> <a name="details"></a> <h2>Details</h2> <div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3> <dl> <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 a.b.c.d.e where: a:int, b:int, c:int, d:string(dev|beta), e:int. d and e are optional</p><div class="collapse_details"><dl class="details"> </dl> </div></dd> </dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3> <dl> <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 return the resulting jQuery object.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 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. Can be either 'current', whereby the current sorting of the table is used, or '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 ("current") or not ("all"). If 'current' is given, then order is assumed to be 'current' and filter is 'applied', regardless of what they might be given as.</p></td></tr> </tbody> </table><h5>Returns:</h5><p class="returns"><p>jQuery object, filtered by the given selector.</p></p><h5>Examples:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Highlight every second row oTable.$('tr:odd').css('backgroundColor', 'blue'); } ); </pre> </div> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Filter to rows with 'Webkit' in them, add a background colour and then // remove the filter, thus highlighting the 'Webkit' rows only. oTable.fnFilter('Webkit'); oTable.$('tr', {"filter": "applied"}).css('backgroundColor', 'blue'); oTable.fnFilter(''); } );</pre> </div> </div> <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 rows - as such, the jQuery selector used should match TR row nodes or TD/TH cell nodes rather than any descendants, so the data can be obtained for the row/cell. If matching rows are found, the data returned is the original data array/object that was used to <br /> create the row (or a generated array if from a DOM source).</p> <p>This method is often useful in-combination with $ where both functions are given the same parameters and the array indexes will match identically.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 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. Can be either 'current', whereby the current sorting of the table is used, or '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 ("current") or not ("all"). If 'current' is given, then order is assumed to be 'current' and filter is 'applied', regardless of what they might be given as.</p></td></tr> </tbody> </table><h5>Returns:</h5><p class="returns"><p>Data for the matched elements. If any elements, as a result of the selector, were not TR, TD or TH elements in the DataTable, they will have a null entry in the array.</p></p><h5>Examples:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Get the data from the first row in the table var data = oTable._('tr:first'); // Do something useful with the data alert( "First cell is: "+data[0] ); } ); </pre> </div> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Filter to 'Webkit' and get all data for oTable.fnFilter('Webkit'); var data = oTable._('tr', {"filter": "applied"}); // Do something with the data alert( data.length+" rows matched the filter" ); } );</pre> </div> </div> <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 that this is suitable for client-side processing only - if you are using server-side processing (i.e. "bServerSide": true), then to add data, you must add it to the data source, i.e. the server-side, through an Ajax call.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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: <ul> <li>1D array of data - add a single row with the data provided</li> <li>2D array of arrays - add multiple rows in a single call</li> <li>object - data object when using <i>mData</i></li> <li>array of objects - multiple data objects when using <i>mData</i></li> </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> </tbody> </table><h5>Returns:</h5><p class="returns"><p>An array of integers, representing the list of indexes in <i>aoData</i> (<a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a>) that have been added to the table.</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> // Global var for counter var giCount = 2; $(document).ready(function() { $('#example').dataTable(); } ); function fnClickAddRow() { $('#example').dataTable().fnAddData( [ giCount+".1", giCount+".2", giCount+".3", giCount+".4" ] ); giCount++; }</pre> </div> </div> <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 contained in the table and the sizes applied to the columns (in the DOM, CSS or through the sWidth parameter). This can be useful when the width of the table's parent element changes (for example a window resize).</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable( { "sScrollY": "200px", "bPaginate": false } ); $(window).bind('resize', function () { oTable.fnAdjustColumnSizing(); } ); } );</pre> </div> </div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Immediately 'nuke' the current rows (perhaps waiting for an Ajax callback...) oTable.fnClearTable(); } );</pre> </div> </div> <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 are currently 'open'.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </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> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable; // 'open' an information row when a row is clicked on $('#example tbody tr').click( function () { if ( oTable.fnIsOpen(this) ) { oTable.fnClose( this ); } else { oTable.fnOpen( this, "Temporary row opened", "info_row" ); } } ); oTable = $('#example').dataTable(); } );</pre> </div> </div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 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> </tbody> </table><h5>Returns:</h5><p class="returns"><p>The row that was deleted</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Immediately remove the first row oTable.fnDeleteRow( 0 ); } );</pre> </div> </div> <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 enhancements, alterations to the DOM structure of the table and event listeners.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { // This example is fairly pointless in reality, but shows how fnDestroy can be used var oTable = $('#example').dataTable(); oTable.fnDestroy(); } );</pre> </div> </div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Re-draw the table - you wouldn't want to do it here, but it's an example :-) oTable.fnDraw(); } );</pre> </div> </div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Sometime later - filter... oTable.fnFilter( 'test string' ); } );</pre> </div> </div> <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 provided parameters.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 a TR node then the data source for the whole row will be returned. If given as a TD/TH cell node then iCol will be automatically calculated and the data for the cell returned. If given as an integer, then this is treated as the aoData internal 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> </tbody> </table><h5>Returns:</h5><p class="returns"><p>If mRow is undefined, then the data for all rows is returned. If mRow is defined, just data for that row, and is iCol is defined, only data for the designated cell is returned.</p></p><h5>Examples:</h5> <div class="example-code"> <pre class="brush: js"> // Row data $(document).ready(function() { oTable = $('#example').dataTable(); oTable.$('tr').click( function () { var data = oTable.fnGetData( this ); // ... do something with the array / object of data for the row } ); } ); </pre> </div> <div class="example-code"> <pre class="brush: js"> // Individual cell data $(document).ready(function() { oTable = $('#example').dataTable(); oTable.$('td').click( function () { var sData = oTable.fnGetData( this ); alert( 'The cell clicked on had the value of '+sData ); } ); } );</pre> </div> </div> <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 typically want to use the '$' API method in preference to this as it is more flexible.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Returns:</h5><p class="returns"><p>If iRow is undefined, returns an array of all TR elements in the table's body, or iRow is defined, just the TR element requested.</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Get the nodes from the table var nNodes = oTable.fnGetNodes( ); } );</pre> </div> </div> <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 and column index including hidden columns</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Returns:</h5><p class="returns"><p>If nNode is given as a TR, then a single index is returned, or if given as a cell, an array of [row index, column index (visible), column index (all)] is given.</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { $('#example tbody td').click( function () { // Get the position of the current data from the node var aPos = oTable.fnGetPosition( this ); // Get the data array for this row var aData = oTable.fnGetData( aPos[0] ); // Update the data array and return the value aData[ aPos[1] ] = 'clicked'; this.innerHTML = 'clicked'; } ); // Init DataTables oTable = $('#example').dataTable(); } );</pre> </div> </div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Returns:</h5><p class="returns"><p>true if the row is currently open, false otherwise</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable; // 'open' an information row when a row is clicked on $('#example tbody tr').click( function () { if ( oTable.fnIsOpen(this) ) { oTable.fnClose( this ); } else { oTable.fnOpen( this, "Temporary row opened", "info_row" ); } } ); oTable = $('#example').dataTable(); } );</pre> </div> </div> <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 on display on the page, with the HTML contents that is passed into the function. This can be used, for example, to ask for confirmation that a particular record should be deleted.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Returns:</h5><p class="returns"><p>The row opened. Note that if the table row passed in as the first parameter, is not found in the table, this method will silently return.</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable; // 'open' an information row when a row is clicked on $('#example tbody tr').click( function () { if ( oTable.fnIsOpen(this) ) { oTable.fnClose( this ); } else { oTable.fnOpen( this, "Temporary row opened", "info_row" ); } } ); oTable = $('#example').dataTable(); } );</pre> </div> </div> <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 function. With this function you can have a DataTables table go to the next, previous, first or last pages.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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" 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> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); oTable.fnPageChange( 'next' ); } );</pre> </div> </div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Hide the second column after initialisation oTable.fnSetColumnVis( 1, false ); } );</pre> </div> </div> <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"> </dl> <h5>Returns:</h5><p class="returns"><p>DataTables settings object. See <a href="DataTable.models.oSettings.html">DataTable.models.oSettings</a></p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); var oSettings = oTable.fnSettings(); // Show an example parameter from the settings alert( oSettings._iDisplayStart ); } );</pre> </div> </div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 'display index' if you have hidden data entries</p></td></tr> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Sort immediately with columns 0 and 1 oTable.fnSort( [ [0,'asc'], [1,'asc'] ] ); } );</pre> </div> </div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); // Sort on column 1, when 'sorter' is clicked on oTable.fnSortListener( document.getElementById('sorter'), 1 ); } );</pre> </div> </div> <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 update the cell with, an array of values with one element for each column or an object in the same format as the original data source. The function is self-referencing in order to make the multi column updates easier.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table><h5>Returns:</h5><p class="returns"><p>0 on success, 1 on error</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); oTable.fnUpdate( 'Example update', 0, 0 ); // Single cell oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1, 0 ); // Row } );</pre> </div> </div> <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 to ensure compatibility.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 formats "X" and "X.Y" are also acceptable.</p></td></tr> </tbody> </table><h5>Returns:</h5><p class="returns"><p>true if this version of DataTables is greater or equal to the required version, or false if this version of DataTales is not suitable</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> $(document).ready(function() { var oTable = $('#example').dataTable(); alert( oTable.fnVersionCheck( '1.9.0' ) ); } );</pre> </div> </div> </dd> </div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - static</h3> <dl> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 node types can be passed in, but will always return false).</p></td></tr> </tbody> </table><h5>Returns:</h5><p class="returns"><p>true the table given is a DataTable, or false otherwise</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> var ex = document.getElementById('example'); if ( ! $.fn.DataTable.fnIsDataTable( ex ) ) { $(ex).dataTable(); }</pre> </div> </div> <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 get only currently visible tables.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 visible tables only.</p></td></tr> </tbody> </table><h5>Returns:</h5><p class="returns"><p>Array of TABLE nodes (not DataTable instances) which are DataTables</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> var table = $.fn.dataTable.fnTables(true); if ( table.length > 0 ) { $(table).dataTable().fnAdjustColumnSizing(); }</pre> </div> </div> <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 to ensure compatibility.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 formats "X" and "X.Y" are also acceptable.</p></td></tr> </tbody> </table><h5>Returns:</h5><p class="returns"><p>true if this version of DataTables is greater or equal to the required version, or false if this version of DataTales is not suitable</p></p><h5>Example:</h5> <div class="example-code"> <pre class="brush: js"> alert( $.fn.dataTable.fnVersionCheck( '1.9.0' ) );</pre> </div> </div> </dd> </div><div class="doc_group"><a name="details_events"></a><h3 class="subsection-title">Events</h3> <dl> <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 the bDestroy:true parameter in the initialisation object. This can be used to remove bound events, added DOM nodes, etc.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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 fnDrawCallback. This may be useful for binding events or performing calculations when the table is altered at all.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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 global filter, or column filters) is altered.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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, including Ajax data loaded, if Ajax data is required.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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 present if client-side Ajax sourced data is used</li></ol></p></td></tr> </tbody> </table></div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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, sort, filter or anything else). Can be used to indicate to the end user that there is something happening, or that something has finished.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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 object has been modified by the loaded data.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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 prior to the settings object being modified by the saved state - allowing modification of the saved state is required or loading of state for a plug-in.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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. This method allows modification of the state saving object prior to actually doing the save, including addition or other state properties (for plug-ins) or modification of a DataTables core property.</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> <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 made to the server for new data (note that this trigger is called in fnServerData, if you override fnServerData and which to use this event, you need to trigger it in you success function).</p><div class="collapse_details"><dl class="details"> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th width="20"></th> <th width="12%" class="bottom_border name">Name</th> <th width="10%" class="bottom_border">Type</th> <th width="10%" class="bottom_border">Attributes</th> <th width="10%" class="bottom_border">Default</th> <th class="last bottom_border">Description</th> </tr> </thead> <tbody> <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> </tbody> </table></div> </dd> </div> </div> </div> <div class="fw_footer"> DataTables: Copyright 2008-2012 Allan Jardine, all rights reserved<br> Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on 23th Sep 2012 - 14:27 with the <a href="http://datatables.net/">DataTables</a> template. </div> </body> </html>