--- /dev/null
+<!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
git://source.jalview.org / proteocache.git / blobdiff