Mercurial > repos > saskia-hiltemann > ireport
diff DataTables-1.9.4/docs/DataTable.defaults.columns.html @ 0:ac5f9272033b draft
first upload
author | saskia-hiltemann |
---|---|
date | Tue, 01 Jul 2014 11:42:23 -0400 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/DataTables-1.9.4/docs/DataTable.defaults.columns.html Tue Jul 01 11:42:23 2014 -0400 @@ -0,0 +1,912 @@ +<!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>Namespace: columns - 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">Namespace: columns</h1> + <h2 class="ancestors">Ancestry: <span class="ancestors"><a href="DataTable.html">DataTable</a> » <a href="DataTable.defaults.html">.defaults</a>.</span> » columns</h2> + <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>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (21)</a></td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (21)</a></td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul> + <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> + <p>Column options that can be given to DataTables at initialisation time.</p><dl class="details"> + +</dl> + + </div> + + + <div class="doc_summary"> + <a name="summary"></a> + <h2>Summary</h2> + + <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="#aDataSort">aDataSort</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Allows a column's sorting to take multiple columns into account when +doing a sort. For example first name / last name columns make sense to +do a multi-column sort over the two columns.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#asSorting">asSorting</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>You can control the default sorting direction, and even alter the behaviour +of the sort handler (i.e. only allow ascending sorting etc) using this +parameter.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#bSearchable">bSearchable</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable filtering on the data in this column.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#bSortable">bSortable</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable sorting on this column.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#bUseRendered">bUseRendered</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p><code>Deprecated</code> When using fnRender() for a column, you may wish +to use the original data (before rendering) for sorting and filtering +(the default is to used the rendered data that the user can see). This +may be useful for dates etc. [<a href-"#bUseRendered">...</a>] </p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#bVisible">bVisible</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable the display of this column.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#fnCreatedCell">fnCreatedCell</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" even"><p>Developer definable function that is called whenever a cell is created (Ajax source, +etc) or processed for input (DOM source). This can be used as a compliment to mRender +allowing you to modify the DOM element (add background colour for example) when the +element is available.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#fnRender">fnRender</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></dt><dd class=" odd"><p><code>Deprecated</code> Custom display function that will be called for the +display of each cell in this column. [<a href-"#fnRender">...</a>] </p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#iDataSort">iDataSort</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" even"><p>The column index (starting from 0!) that you wish a sort to be performed +upon when this column is selected for sorting. This can be used for sorting +on hidden columns for example.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#mData">mData</a></span><span class="type-sig"><span class="type-signature"> :string|int|function|null</span></span></dt><dd class=" odd"><p>This property can be used to read data from any JSON data source property, +including deeply nested objects / properties. mData can be given in a +number of different ways which effect its behaviour: + <ul> + <li>integer - treated as an array index for the data source. This is the + default that DataTables uses (incrementally increased for each column).</li> + <li>string - read an object property from the data source. Note that you can + use Javascript dotted notation to read deep properties / arrays from the + data source.</li> + <li>null - the sDefaultContent option will be used for the cell (null + by default, so you will need to specify the default content you want - + typically an empty string). This can be useful on generated columns such + as edit / delete action columns.</li> + <li>function - the function given will be executed whenever DataTables + needs to set or get the data for a cell in the column. The function + takes three parameters: + <ul> + <li>{array|object} The data source for the row</li> + <li>{string} The type call data requested - this will be 'set' when + setting data or 'filter', 'display', 'type', 'sort' or undefined when + gathering data. Note that when <i>undefined</i> is given for the type + DataTables expects to get the raw data for the object back</li> + <li>{*} Data to set when the second parameter is 'set'.</li> + </ul> + The return value from the function is not required when 'set' is the type + of call, but otherwise the return is what will be used for the data + requested.</li> + </ul> [<a href-"#mData">...</a>] </p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#mDataProp">mDataProp</a></span><span class="type-sig"><span class="type-signature"></span></span></dt><dd class=" even"><p>This parameter has been replaced by mData in DataTables to ensure naming +consistency. mDataProp can still be used, as there is backwards compatibility +in DataTables for this option, but it is strongly recommended that you use +mData in preference to mDataProp.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#mRender">mRender</a></span><span class="type-sig"><span class="type-signature"> :string|int|function|null</span></span></dt><dd class=" odd"><p>This property is the rendering partner to mData and it is suggested that +when you want to manipulate data for display (including filtering, sorting etc) +but not altering the underlying data for the table, use this property. mData +can actually do everything this property can and more, but this parameter is +easier to use since there is no 'set' option. Like mData is can be given +in a number of different ways to effect its behaviour, with the addition of +supporting array syntax for easy outputting of arrays (including arrays of +objects): + <ul> + <li>integer - treated as an array index for the data source. This is the + default that DataTables uses (incrementally increased for each column).</li> + <li>string - read an object property from the data source. Note that you can + use Javascript dotted notation to read deep properties / arrays from the + data source and also array brackets to indicate that the data reader should + loop over the data source array. When characters are given between the array + brackets, these characters are used to join the data source array together. + For example: "accounts[, ].name" would result in a comma separated list with + the 'name' value from the 'accounts' array of objects.</li> + <li>function - the function given will be executed whenever DataTables + needs to set or get the data for a cell in the column. The function + takes three parameters: + <ul> + <li>{array|object} The data source for the row (based on mData)</li> + <li>{string} The type call data requested - this will be 'filter', 'display', + 'type' or 'sort'.</li> + <li>{array|object} The full data source for the row (not based on mData)</li> + </ul> + The return value from the function is what will be used for the data + requested.</li> + </ul></p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sCellType">sCellType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Change the cell type created for the column - either TD cells or TH cells. This +can be useful as TH cells have semantic meaning in the table body, allowing them +to act as a header for a row (you may wish to add scope='row' to the TH elements).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sClass">sClass</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Class to give to each cell in this column.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sContentPadding">sContentPadding</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>When DataTables calculates the column widths to assign to each column, +it finds the longest string in each column and then constructs a +temporary table and reads the widths from that. The problem with this +is that "mmm" is much wider then "iiii", but the latter is a longer +string - thus the calculation can go wrong (doing it properly and putting +it into an DOM object and measuring that is horribly(!) slow). Thus as +a "work around" we provide this option. It will append its value to the +text that is found to be the longest string for the column - i.e. padding. +Generally you shouldn't need this, and it is not documented on the +general DataTables.net documentation</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sDefaultContent">sDefaultContent</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Allows a default value to be given for a column's data, and will be used +whenever a null data source is encountered (this can be because mData +is set to null, or because the data source itself is null).</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sName">sName</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>This parameter is only used in DataTables' server-side processing. It can +be exceptionally useful to know what columns are being displayed on the +client side, and to map these to database fields. When defined, the names +also allow DataTables to reorder information from the server if it comes +back in an unexpected order (i.e. if you switch your columns around on the +client-side, your server-side code does not also need updating).</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sSortDataType">sSortDataType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Defines a data source type for the sorting which can be used to read +real-time information from the table (updating the internally cached +version) prior to sorting. This allows sorting to occur on user editable +elements such as form inputs.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sTitle">sTitle</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>The title of this column.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sType">sType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>The type allows you to specify how the data for this column will be sorted. +Four types (string, numeric, date and html (which will strip HTML tags +before sorting)) are currently available. Note that only date formats +understood by Javascript's Date() object will be accepted as type date. For +example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', +'date' or 'html' (by default). Further types can be adding through +plug-ins.</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sWidth">sWidth</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Defining the width of the column, this parameter may take any CSS value +(3em, 20px etc). DataTables apples 'smart' widths to columns which have not +been given a specific width through this interface ensuring that the table +remains readable.</p></dd> +</dl></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="aDataSort"></a><a name="aDataSort_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#aDataSort">aDataSort</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Allows a column's sorting to take multiple columns into account when +doing a sort. For example first name / last name columns make sense to +do a multi-column sort over the two columns.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] }, + { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] }, + { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "aDataSort": [ 0, 1 ] }, + { "aDataSort": [ 1, 0 ] }, + { "aDataSort": [ 2, 3, 4 ] }, + null, + null + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" odd"><a name="asSorting"></a><a name="asSorting_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#asSorting">asSorting</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" odd"><p>You can control the default sorting direction, and even alter the behaviour +of the sort handler (i.e. only allow ascending sorting etc) using this +parameter.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "asSorting": [ "asc" ], "aTargets": [ 1 ] }, + { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] }, + { "asSorting": [ "desc" ], "aTargets": [ 3 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + null, + { "asSorting": [ "asc" ] }, + { "asSorting": [ "desc", "asc", "asc" ] }, + { "asSorting": [ "desc" ] }, + null + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" even"><a name="bSearchable"></a><a name="bSearchable_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#bSearchable">bSearchable</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p>Enable or disable filtering on the data in this column.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "bSearchable": false, "aTargets": [ 0 ] } + ] } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "bSearchable": false }, + null, + null, + null, + null + ] } ); + } );</pre> + </div> +</div></dd><dt class=" odd"><a name="bSortable"></a><a name="bSortable_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#bSortable">bSortable</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable sorting on this column.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "bSortable": false, "aTargets": [ 0 ] } + ] } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "bSortable": false }, + null, + null, + null, + null + ] } ); + } );</pre> + </div> +</div></dd><dt class=" even"><a name="bUseRendered"></a><a name="bUseRendered_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#bUseRendered">bUseRendered</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" even"><p><code>Deprecated</code> When using fnRender() for a column, you may wish +to use the original data (before rendering) for sorting and filtering +(the default is to used the rendered data that the user can see). This +may be useful for dates etc.</p> + +<p>Please note that this option has now been deprecated and will be removed +in the next version of DataTables. Please use mRender / mData rather than +fnRender.</p><div class="collapse_details"><dl class="details"> + <dt class="important">Deprecated</dt><dd class="yes-def">Yes</dd> +</dl> +</div></dd><dt class=" odd"><a name="bVisible"></a><a name="bVisible_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#bVisible">bVisible</a></span><span class="type-sig"><span class="type-signature"> :boolean</span></span></dt><dd class=" odd"><p>Enable or disable the display of this column.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "bVisible": false, "aTargets": [ 0 ] } + ] } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "bVisible": false }, + null, + null, + null, + null + ] } ); + } );</pre> + </div> +</div></dd><dt id="DataTable.defaults.columns.fnCreatedCell" class=" even"><a name="fnCreatedCell"></a><a name="fnCreatedCell_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a>fnCreatedCell</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" even"><p>Developer definable function that is called whenever a cell is created (Ajax source, +etc) or processed for input (DOM source). This can be used as a compliment to mRender +allowing you to modify the DOM element (add background colour for example) when the +element is available.</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">nTd</td><td class="type type-param">element</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The TD node that has been created</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">sData</td><td class="type type-param">*</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The Data for the cell</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">oData</td><td class="type type-param">array | object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The data for the whole row</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">iRow</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The row index for the aoData data store</p></td></tr><tr class="even"><td class="number right_border"><div>5</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 index for aoColumns</p></td></tr> + </tbody> +</table><h5>Example:</h5> + <div class="example-code"> + <pre class="brush: js"> $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ { + "aTargets": [3], + "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { + if ( sData == "1.7" ) { + $(nTd).css('color', 'blue') + } + } + } ] + }); + } );</pre> + </div> +</div> +<dt id="DataTable.defaults.columns.fnRender" class=" odd"><a name="fnRender"></a><a name="fnRender_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a>fnRender</a></span><span class="type-sig"><span class="type-signature"> :function</span></span></span></dt><dd class=" odd"><p><code>Deprecated</code> Custom display function that will be called for the +display of each cell in this column.</p> + +<p>Please note that this option has now been deprecated and will be removed +in the next version of DataTables. Please use mRender / mData rather than +fnRender.</p><div class="collapse_details"><dl class="details"> + <dt class="important">Deprecated</dt><dd class="yes-def">Yes</dd> +</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">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Object with the following parameters:</p></td></tr><tr><td class="number right_border"></td><td class="name">o.iDataRow</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The row in aoData</p></td></tr><tr><td class="number right_border"></td><td class="name">o.iDataColumn</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The column in question</p></td></tr><tr><td class="number right_border"></td><td class="name">o.aData</td><td class="type type-param">array</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The data for the row in question</p></td></tr><tr><td class="number right_border"></td><td class="name">o.oSettings</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The settings object for this DataTables instance</p></td></tr><tr><td class="number right_border"></td><td class="name">o.mDataProp</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The data property used for this column</p></td></tr><tr class="even"><td class="number right_border"><div>7</div></td><td class="name">val</td><td class="type type-param">*</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The current cell value</p></td></tr> + </tbody> +</table><h5>Returns:</h5><p class="returns"><p>The string you which to use in the display</p></p></div> +<dt class=" even"><a name="iDataSort"></a><a name="iDataSort_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#iDataSort">iDataSort</a></span><span class="type-sig"><span class="type-signature"> :int</span></span></dt><dd class=" even"><p>The column index (starting from 0!) that you wish a sort to be performed +upon when this column is selected for sorting. This can be used for sorting +on hidden columns for example.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "iDataSort": 1, "aTargets": [ 0 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "iDataSort": 1 }, + null, + null, + null, + null + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" odd"><a name="mData"></a><a name="mData_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#mData">mData</a></span><span class="type-sig"><span class="type-signature"> :string|int|function|null</span></span></dt><dd class=" odd"><p>This property can be used to read data from any JSON data source property, +including deeply nested objects / properties. mData can be given in a +number of different ways which effect its behaviour: + <ul> + <li>integer - treated as an array index for the data source. This is the + default that DataTables uses (incrementally increased for each column).</li> + <li>string - read an object property from the data source. Note that you can + use Javascript dotted notation to read deep properties / arrays from the + data source.</li> + <li>null - the sDefaultContent option will be used for the cell (null + by default, so you will need to specify the default content you want - + typically an empty string). This can be useful on generated columns such + as edit / delete action columns.</li> + <li>function - the function given will be executed whenever DataTables + needs to set or get the data for a cell in the column. The function + takes three parameters: + <ul> + <li>{array|object} The data source for the row</li> + <li>{string} The type call data requested - this will be 'set' when + setting data or 'filter', 'display', 'type', 'sort' or undefined when + gathering data. Note that when <i>undefined</i> is given for the type + DataTables expects to get the raw data for the object back</li> + <li>{*} Data to set when the second parameter is 'set'.</li> + </ul> + The return value from the function is not required when 'set' is the type + of call, but otherwise the return is what will be used for the data + requested.</li> + </ul></p> + +<p>Note that prior to DataTables 1.9.2 mData was called mDataProp. The name change +reflects the flexibility of this property and is consistent with the naming of +mRender. If 'mDataProp' is given, then it will still be used by DataTables, as +it automatically maps the old name to the new if required.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Read table data from objects + $(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/deep.txt", + "aoColumns": [ + { "mData": "engine" }, + { "mData": "browser" }, + { "mData": "platform.inner" }, + { "mData": "platform.details.0" }, + { "mData": "platform.details.1" } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using mData as a function to provide different information for + // sorting, filtering and display. In this case, currency (price) + $(document).ready( function() { + var oTable = $('#example').dataTable( { + "aoColumnDefs": [ { + "aTargets": [ 0 ], + "mData": function ( source, type, val ) { + if (type === 'set') { + source.price = val; + // Store the computed dislay and filter values for efficiency + source.price_display = val=="" ? "" : "$"+numberFormat(val); + source.price_filter = val=="" ? "" : "$"+numberFormat(val)+" "+val; + return; + } + else if (type === 'display') { + return source.price_display; + } + else if (type === 'filter') { + return source.price_filter; + } + // 'sort', 'type' and undefined all just use the integer + return source.price; + } + } ] + } ); + } );</pre> + </div> +</div></dd><dt class=" even"><a name="mDataProp"></a><a name="mDataProp_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#mDataProp">mDataProp</a></span><span class="type-sig"><span class="type-signature"></span></span></dt><dd class=" even"><p>This parameter has been replaced by mData in DataTables to ensure naming +consistency. mDataProp can still be used, as there is backwards compatibility +in DataTables for this option, but it is strongly recommended that you use +mData in preference to mDataProp.</p><div class="collapse_details"><dl class="details"> + +</dl> +</div></dd><dt class=" odd"><a name="mRender"></a><a name="mRender_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#mRender">mRender</a></span><span class="type-sig"><span class="type-signature"> :string|int|function|null</span></span></dt><dd class=" odd"><p>This property is the rendering partner to mData and it is suggested that +when you want to manipulate data for display (including filtering, sorting etc) +but not altering the underlying data for the table, use this property. mData +can actually do everything this property can and more, but this parameter is +easier to use since there is no 'set' option. Like mData is can be given +in a number of different ways to effect its behaviour, with the addition of +supporting array syntax for easy outputting of arrays (including arrays of +objects): + <ul> + <li>integer - treated as an array index for the data source. This is the + default that DataTables uses (incrementally increased for each column).</li> + <li>string - read an object property from the data source. Note that you can + use Javascript dotted notation to read deep properties / arrays from the + data source and also array brackets to indicate that the data reader should + loop over the data source array. When characters are given between the array + brackets, these characters are used to join the data source array together. + For example: "accounts[, ].name" would result in a comma separated list with + the 'name' value from the 'accounts' array of objects.</li> + <li>function - the function given will be executed whenever DataTables + needs to set or get the data for a cell in the column. The function + takes three parameters: + <ul> + <li>{array|object} The data source for the row (based on mData)</li> + <li>{string} The type call data requested - this will be 'filter', 'display', + 'type' or 'sort'.</li> + <li>{array|object} The full data source for the row (not based on mData)</li> + </ul> + The return value from the function is what will be used for the data + requested.</li> + </ul></p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Create a comma separated list from an array of objects + $(document).ready( function() { + var oTable = $('#example').dataTable( { + "sAjaxSource": "sources/deep.txt", + "aoColumns": [ + { "mData": "engine" }, + { "mData": "browser" }, + { + "mData": "platform", + "mRender": "[, ].name" + } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Use as a function to create a link from the data source + $(document).ready( function() { + var oTable = $('#example').dataTable( { + "aoColumnDefs": [ + { + "aTargets": [ 0 ], + "mData": "download_link", + "mRender": function ( data, type, full ) { + return '<a href="'+data+'">Download</a>'; + } + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" even"><a name="sCellType"></a><a name="sCellType_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sCellType">sCellType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Change the cell type created for the column - either TD cells or TH cells. This +can be useful as TH cells have semantic meaning in the table body, allowing them +to act as a header for a row (you may wish to add scope='row' to the TH elements).</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Example</h5> + <div class="example-code"> + <pre class="brush: js"> // Make the first column use TH cells + $(document).ready( function() { + var oTable = $('#example').dataTable( { + "aoColumnDefs": [ { + "aTargets": [ 0 ], + "sCellType": "th" + } ] + } ); + } );</pre> + </div> +</div></dd><dt class=" odd"><a name="sClass"></a><a name="sClass_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sClass">sClass</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Class to give to each cell in this column.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sClass": "my_class", "aTargets": [ 0 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sClass": "my_class" }, + null, + null, + null, + null + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" even"><a name="sContentPadding"></a><a name="sContentPadding_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sContentPadding">sContentPadding</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>When DataTables calculates the column widths to assign to each column, +it finds the longest string in each column and then constructs a +temporary table and reads the widths from that. The problem with this +is that "mmm" is much wider then "iiii", but the latter is a longer +string - thus the calculation can go wrong (doing it properly and putting +it into an DOM object and measuring that is horribly(!) slow). Thus as +a "work around" we provide this option. It will append its value to the +text that is found to be the longest string for the column - i.e. padding. +Generally you shouldn't need this, and it is not documented on the +general DataTables.net documentation</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Example</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + null, + null, + null, + { + "sContentPadding": "mmm" + } + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" odd"><a name="sDefaultContent"></a><a name="sDefaultContent_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sDefaultContent">sDefaultContent</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Allows a default value to be given for a column's data, and will be used +whenever a null data source is encountered (this can be because mData +is set to null, or because the data source itself is null).</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { + "mData": null, + "sDefaultContent": "Edit", + "aTargets": [ -1 ] + } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + null, + null, + null, + { + "mData": null, + "sDefaultContent": "Edit" + } + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" even"><a name="sName"></a><a name="sName_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sName">sName</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>This parameter is only used in DataTables' server-side processing. It can +be exceptionally useful to know what columns are being displayed on the +client side, and to map these to database fields. When defined, the names +also allow DataTables to reorder information from the server if it comes +back in an unexpected order (i.e. if you switch your columns around on the +client-side, your server-side code does not also need updating).</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sName": "engine", "aTargets": [ 0 ] }, + { "sName": "browser", "aTargets": [ 1 ] }, + { "sName": "platform", "aTargets": [ 2 ] }, + { "sName": "version", "aTargets": [ 3 ] }, + { "sName": "grade", "aTargets": [ 4 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sName": "engine" }, + { "sName": "browser" }, + { "sName": "platform" }, + { "sName": "version" }, + { "sName": "grade" } + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" odd"><a name="sSortDataType"></a><a name="sSortDataType_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sSortDataType">sSortDataType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>Defines a data source type for the sorting which can be used to read +real-time information from the table (updating the internally cached +version) prior to sorting. This allows sorting to occur on user editable +elements such as form inputs.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] }, + { "sType": "numeric", "aTargets": [ 3 ] }, + { "sSortDataType": "dom-select", "aTargets": [ 4 ] }, + { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + null, + null, + { "sSortDataType": "dom-text" }, + { "sSortDataType": "dom-text", "sType": "numeric" }, + { "sSortDataType": "dom-select" }, + { "sSortDataType": "dom-checkbox" } + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" even"><a name="sTitle"></a><a name="sTitle_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sTitle">sTitle</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>The title of this column.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sTitle": "My column title", "aTargets": [ 0 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sTitle": "My column title" }, + null, + null, + null, + null + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" odd"><a name="sType"></a><a name="sType_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sType">sType</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" odd"><p>The type allows you to specify how the data for this column will be sorted. +Four types (string, numeric, date and html (which will strip HTML tags +before sorting)) are currently available. Note that only date formats +understood by Javascript's Date() object will be accepted as type date. For +example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', +'date' or 'html' (by default). Further types can be adding through +plug-ins.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sType": "html", "aTargets": [ 0 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sType": "html" }, + null, + null, + null, + null + ] + } ); + } );</pre> + </div> +</div></dd><dt class=" even"><a name="sWidth"></a><a name="sWidth_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#sWidth">sWidth</a></span><span class="type-sig"><span class="type-signature"> :string</span></span></dt><dd class=" even"><p>Defining the width of the column, this parameter may take any CSS value +(3em, 20px etc). DataTables apples 'smart' widths to columns which have not +been given a specific width through this interface ensuring that the table +remains readable.</p><div class="collapse_details"><dl class="details"> + +</dl> +<h5>Examples</h5> + <div class="example-code"> + <pre class="brush: js"> // Using aoColumnDefs + $(document).ready( function() { + $('#example').dataTable( { + "aoColumnDefs": [ + { "sWidth": "20%", "aTargets": [ 0 ] } + ] + } ); + } ); + + </pre> + </div> + + <div class="example-code"> + <pre class="brush: js"> // Using aoColumns + $(document).ready( function() { + $('#example').dataTable( { + "aoColumns": [ + { "sWidth": "20%" }, + null, + null, + null, + null + ] + } ); + } );</pre> + </div> +</div></dd> +</dl></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> \ No newline at end of file