archive/alerta_alerta
0
0
Fork 0
mirror of https://github.com/alerta/alerta.git synced 2025-01-31 03:52:39 +00:00
Code Issues Projects Releases Wiki Activity
alerta_alerta/alerta/dashboard/v2/assets/DataTables/docs/DataTable.defaults.columns.html
Nick Satterly 937fbec5ae separate out alerta dashboard from alerta api
2013-09-05 00:01:23 +01:00

912 lines
No EOL
49 KiB
HTML
Raw Permalink Blame History

<!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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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">&lt;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>
Reference in a new issue View git blame Copy permalink