webapp/resources/datatables-1.9.4/docs/DataTable.defaults.columns.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3         <head>
   4                 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   5                 <title>Namespace: columns - documentation</title>
   6
   7                 <style type="text/css" media="screen">
   8                         @import "media/css/doc.css";
   9                         @import "media/css/shCore.css";
  10                         @import "media/css/shThemeDataTables.css";
  11                 </style>
  12
  13                 <script type="text/javascript" src="media/js/shCore.js"></script>
  14                 <script type="text/javascript" src="media/js/shBrushJScript.js"></script>
  15                 <script type="text/javascript" src="media/js/jquery.js"></script>
  16                 <script type="text/javascript" src="media/js/doc.js"></script>
  17         </head>
  18         <body>
  19                 <div class="fw_container">
  20
  21                                 <a name="top"></a>
  22                                 <div class="fw_header">
  23                                         <h1 class="page-title">Namespace: columns</h1>
  24                                         <h2 class="ancestors">Ancestry: <span class="ancestors"><a href="DataTable.html">DataTable</a> » <a href="DataTable.defaults.html">.defaults</a>.</span> » columns</h2>
  25                                         <div class="page-info">
  26                                                 DataTables v1.9.4 documentation
  27                                         </div>
  28                                 </div>
  29
  30
  31
  32                                 <div class="fw_nav">
  33                                         <h2>Navigation</h2>
  34                                         <ul>
  35                                         <li><a href="#top">Overview</a></li>
  36                                         <li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>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>
  37                                         <div style="margin-top: 10px;">
  38                                                 <input type="hidden" name="show_private" value="0">
  39                                                 <span id="private_label">Hiding</span> private elements
  40                                                         (<a id="private_toggle" href="">toggle</a>)
  41                                                 </span>
  42                                         </div>
  43                                         <div>
  44                                                 <input type="hidden" name="show_extended" value="1">
  45                                                 <span id="extended_label">Showing</span> extended elements
  46                                                         (<a id="extended_toggle" href="">toggle</a>)
  47                                                 </span>
  48                                         </div>
  49                                 </div>
  50
  51                                 <div class="fw_content">
  52                                         <a name="overview"></a>
  53                                         <div class="doc_overview">
  54                                                 <div class="nav_blocker"></div>
  55                                                 <p>Column options that can be given to DataTables at initialisation time.</p><dl class="details">
  56
  57 </dl>
  58
  59                                         </div>
  60
  61
  62                                         <div class="doc_summary">
  63                                                 <a name="summary"></a>
  64                                                 <h2>Summary</h2>
  65
  66                                                 <div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
  67
  68 <dl>
  69     <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
  70 doing a sort. For example first name / last name columns make sense to
  71 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
  72 of the sort handler (i.e. only allow ascending sorting etc) using this
  73 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
  74 to use the original data (before rendering) for sorting and filtering
  75 (the default is to used the rendered data that the user can see). This
  76 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,
  77 etc) or processed for input (DOM source). This can be used as a compliment to mRender
  78 allowing you to modify the DOM element (add background colour for example) when the
  79 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
  80 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
  81 upon when this column is selected for sorting. This can be used for sorting
  82 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,
  83 including deeply nested objects / properties. mData can be given in a
  84 number of different ways which effect its behaviour:
  85   <ul>
  86     <li>integer - treated as an array index for the data source. This is the
  87       default that DataTables uses (incrementally increased for each column).</li>
  88     <li>string - read an object property from the data source. Note that you can
  89       use Javascript dotted notation to read deep properties / arrays from the
  90       data source.</li>
  91     <li>null - the sDefaultContent option will be used for the cell (null
  92       by default, so you will need to specify the default content you want -
  93       typically an empty string). This can be useful on generated columns such
  94       as edit / delete action columns.</li>
  95     <li>function - the function given will be executed whenever DataTables
  96       needs to set or get the data for a cell in the column. The function
  97       takes three parameters:
  98       <ul>
  99         <li>{array|object} The data source for the row</li>
 100         <li>{string} The type call data requested - this will be 'set' when
 101           setting data or 'filter', 'display', 'type', 'sort' or undefined when
 102           gathering data. Note that when <i>undefined</i> is given for the type
 103           DataTables expects to get the raw data for the object back</li>
 104         <li>{*} Data to set when the second parameter is 'set'.</li>
 105       </ul>
 106       The return value from the function is not required when 'set' is the type
 107       of call, but otherwise the return is what will be used for the data
 108       requested.</li>
 109    </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
 110 consistency. mDataProp can still be used, as there is backwards compatibility
 111 in DataTables for this option, but it is strongly recommended that you use
 112 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
 113 when you want to manipulate data for display (including filtering, sorting etc)
 114 but not altering the underlying data for the table, use this property. mData
 115 can actually do everything this property can and more, but this parameter is
 116 easier to use since there is no 'set' option. Like mData is can be given
 117 in a number of different ways to effect its behaviour, with the addition of
 118 supporting array syntax for easy outputting of arrays (including arrays of
 119 objects):
 120   <ul>
 121     <li>integer - treated as an array index for the data source. This is the
 122       default that DataTables uses (incrementally increased for each column).</li>
 123     <li>string - read an object property from the data source. Note that you can
 124       use Javascript dotted notation to read deep properties / arrays from the
 125       data source and also array brackets to indicate that the data reader should
 126       loop over the data source array. When characters are given between the array
 127       brackets, these characters are used to join the data source array together.
 128       For example: "accounts[, ].name" would result in a comma separated list with
 129       the 'name' value from the 'accounts' array of objects.</li>
 130     <li>function - the function given will be executed whenever DataTables
 131       needs to set or get the data for a cell in the column. The function
 132       takes three parameters:
 133       <ul>
 134         <li>{array|object} The data source for the row (based on mData)</li>
 135         <li>{string} The type call data requested - this will be 'filter', 'display',
 136           'type' or 'sort'.</li>
 137         <li>{array|object} The full data source for the row (not based on mData)</li>
 138       </ul>
 139       The return value from the function is what will be used for the data
 140       requested.</li>
 141    </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
 142 can be useful as TH cells have semantic meaning in the table body, allowing them
 143 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,
 144 it finds the longest string in each column and then constructs a
 145 temporary table and reads the widths from that. The problem with this
 146 is that "mmm" is much wider then "iiii", but the latter is a longer
 147 string - thus the calculation can go wrong (doing it properly and putting
 148 it into an DOM object and measuring that is horribly(!) slow). Thus as
 149 a "work around" we provide this option. It will append its value to the
 150 text that is found to be the longest string for the column - i.e. padding.
 151 Generally you shouldn't need this, and it is not documented on the
 152 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
 153 whenever a null data source is encountered (this can be because mData
 154 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
 155 be exceptionally useful to know what columns are being displayed on the
 156 client side, and to map these to database fields. When defined, the names
 157 also allow DataTables to reorder information from the server if it comes
 158 back in an unexpected order (i.e. if you switch your columns around on the
 159 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
 160 real-time information from the table (updating the internally cached
 161 version) prior to sorting. This allows sorting to occur on user editable
 162 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.
 163 Four types (string, numeric, date and html (which will strip HTML tags
 164 before sorting)) are currently available. Note that only date formats
 165 understood by Javascript's Date() object will be accepted as type date. For
 166 example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric',
 167 'date' or 'html' (by default). Further types can be adding through
 168 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
 169 (3em, 20px etc). DataTables apples 'smart' widths to columns which have not
 170 been given a specific width through this interface ensuring that the table
 171 remains readable.</p></dd>
 172 </dl></div>
 173                                         </div>
 174
 175
 176
 177
 178                                         <div class="doc_details">
 179                                                 <a name="details"></a>
 180                                                 <h2>Details</h2>
 181                                                 <div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
 182 <dl>
 183     <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
 184 doing a sort. For example first name / last name columns make sense to
 185 do a multi-column sort over the two columns.</p><div class="collapse_details"><dl class="details">
 186
 187 </dl>
 188 <h5>Examples</h5>
 189     <div class="example-code">
 190         <pre class="brush: js">   // Using aoColumnDefs
 191    $(document).ready( function() {
 192      $('#example').dataTable( {
 193        "aoColumnDefs": [
 194          { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },
 195          { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },
 196          { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }
 197        ]
 198      } );
 199    } );
 200
 201  </pre>
 202     </div>
 203
 204     <div class="example-code">
 205         <pre class="brush: js">   // Using aoColumns
 206    $(document).ready( function() {
 207      $('#example').dataTable( {
 208        "aoColumns": [
 209          { "aDataSort": [ 0, 1 ] },
 210          { "aDataSort": [ 1, 0 ] },
 211          { "aDataSort": [ 2, 3, 4 ] },
 212          null,
 213          null
 214        ]
 215      } );
 216    } );</pre>
 217     </div>
 218 </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
 219 of the sort handler (i.e. only allow ascending sorting etc) using this
 220 parameter.</p><div class="collapse_details"><dl class="details">
 221
 222 </dl>
 223 <h5>Examples</h5>
 224     <div class="example-code">
 225         <pre class="brush: js">   // Using aoColumnDefs
 226    $(document).ready( function() {
 227      $('#example').dataTable( {
 228        "aoColumnDefs": [
 229          { "asSorting": [ "asc" ], "aTargets": [ 1 ] },
 230          { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },
 231          { "asSorting": [ "desc" ], "aTargets": [ 3 ] }
 232        ]
 233      } );
 234    } );
 235
 236  </pre>
 237     </div>
 238
 239     <div class="example-code">
 240         <pre class="brush: js">   // Using aoColumns
 241    $(document).ready( function() {
 242      $('#example').dataTable( {
 243        "aoColumns": [
 244          null,
 245          { "asSorting": [ "asc" ] },
 246          { "asSorting": [ "desc", "asc", "asc" ] },
 247          { "asSorting": [ "desc" ] },
 248          null
 249        ]
 250      } );
 251    } );</pre>
 252     </div>
 253 </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">
 254
 255 </dl>
 256 <h5>Examples</h5>
 257     <div class="example-code">
 258         <pre class="brush: js">   // Using aoColumnDefs
 259    $(document).ready( function() {
 260      $('#example').dataTable( {
 261        "aoColumnDefs": [
 262          { "bSearchable": false, "aTargets": [ 0 ] }
 263        ] } );
 264    } );
 265
 266  </pre>
 267     </div>
 268
 269     <div class="example-code">
 270         <pre class="brush: js">   // Using aoColumns
 271    $(document).ready( function() {
 272      $('#example').dataTable( {
 273        "aoColumns": [
 274          { "bSearchable": false },
 275          null,
 276          null,
 277          null,
 278          null
 279        ] } );
 280    } );</pre>
 281     </div>
 282 </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">
 283
 284 </dl>
 285 <h5>Examples</h5>
 286     <div class="example-code">
 287         <pre class="brush: js">   // Using aoColumnDefs
 288    $(document).ready( function() {
 289      $('#example').dataTable( {
 290        "aoColumnDefs": [
 291          { "bSortable": false, "aTargets": [ 0 ] }
 292        ] } );
 293    } );
 294
 295  </pre>
 296     </div>
 297
 298     <div class="example-code">
 299         <pre class="brush: js">   // Using aoColumns
 300    $(document).ready( function() {
 301      $('#example').dataTable( {
 302        "aoColumns": [
 303          { "bSortable": false },
 304          null,
 305          null,
 306          null,
 307          null
 308        ] } );
 309    } );</pre>
 310     </div>
 311 </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
 312 to use the original data (before rendering) for sorting and filtering
 313 (the default is to used the rendered data that the user can see). This
 314 may be useful for dates etc.</p>
 315
 316 <p>Please note that this option has now been deprecated and will be removed
 317 in the next version of DataTables. Please use mRender / mData rather than
 318 fnRender.</p><div class="collapse_details"><dl class="details">
 319         <dt class="important">Deprecated</dt><dd class="yes-def">Yes</dd>
 320 </dl>
 321 </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">
 322
 323 </dl>
 324 <h5>Examples</h5>
 325     <div class="example-code">
 326         <pre class="brush: js">   // Using aoColumnDefs
 327    $(document).ready( function() {
 328      $('#example').dataTable( {
 329        "aoColumnDefs": [
 330          { "bVisible": false, "aTargets": [ 0 ] }
 331        ] } );
 332    } );
 333
 334  </pre>
 335     </div>
 336
 337     <div class="example-code">
 338         <pre class="brush: js">   // Using aoColumns
 339    $(document).ready( function() {
 340      $('#example').dataTable( {
 341        "aoColumns": [
 342          { "bVisible": false },
 343          null,
 344          null,
 345          null,
 346          null
 347        ] } );
 348    } );</pre>
 349     </div>
 350 </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,
 351 etc) or processed for input (DOM source). This can be used as a compliment to mRender
 352 allowing you to modify the DOM element (add background colour for example) when the
 353 element is available.</p><div class="collapse_details"><dl class="details">
 354
 355 </dl>
 356 <h5>Parameters:</h5>
 357
 358 <table class="params">
 359     <thead>
 360         <tr>
 361         <th width="20"></th>
 362         <th width="12%" class="bottom_border name">Name</th>
 363                 <th width="10%" class="bottom_border">Type</th>
 364                 <th width="10%" class="bottom_border">Attributes</th>
 365                 <th width="10%" class="bottom_border">Default</th>
 366                 <th class="last bottom_border">Description</th>
 367         </tr>
 368         </thead>
 369
 370         <tbody>
 371         <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>
 372         </tbody>
 373 </table><h5>Example:</h5>
 374     <div class="example-code">
 375         <pre class="brush: js">   $(document).ready( function() {
 376      $('#example').dataTable( {
 377        "aoColumnDefs": [ {
 378          "aTargets": [3],
 379          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
 380            if ( sData == "1.7" ) {
 381              $(nTd).css('color', 'blue')
 382            }
 383          }
 384        } ]
 385      });
 386    } );</pre>
 387     </div>
 388 </div>
 389 <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
 390 display of each cell in this column.</p>
 391
 392 <p>Please note that this option has now been deprecated and will be removed
 393 in the next version of DataTables. Please use mRender / mData rather than
 394 fnRender.</p><div class="collapse_details"><dl class="details">
 395         <dt class="important">Deprecated</dt><dd class="yes-def">Yes</dd>
 396 </dl>
 397 <h5>Parameters:</h5>
 398
 399 <table class="params">
 400     <thead>
 401         <tr>
 402         <th width="20"></th>
 403         <th width="12%" class="bottom_border name">Name</th>
 404                 <th width="10%" class="bottom_border">Type</th>
 405                 <th width="10%" class="bottom_border">Attributes</th>
 406                 <th width="10%" class="bottom_border">Default</th>
 407                 <th class="last bottom_border">Description</th>
 408         </tr>
 409         </thead>
 410
 411         <tbody>
 412         <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>
 413         </tbody>
 414 </table><h5>Returns:</h5><p class="returns"><p>The string you which to use in the display</p></p></div>
 415 <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
 416 upon when this column is selected for sorting. This can be used for sorting
 417 on hidden columns for example.</p><div class="collapse_details"><dl class="details">
 418
 419 </dl>
 420 <h5>Examples</h5>
 421     <div class="example-code">
 422         <pre class="brush: js">   // Using aoColumnDefs
 423    $(document).ready( function() {
 424      $('#example').dataTable( {
 425        "aoColumnDefs": [
 426          { "iDataSort": 1, "aTargets": [ 0 ] }
 427        ]
 428      } );
 429    } );
 430
 431  </pre>
 432     </div>
 433
 434     <div class="example-code">
 435         <pre class="brush: js">   // Using aoColumns
 436    $(document).ready( function() {
 437      $('#example').dataTable( {
 438        "aoColumns": [
 439          { "iDataSort": 1 },
 440          null,
 441          null,
 442          null,
 443          null
 444        ]
 445      } );
 446    } );</pre>
 447     </div>
 448 </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,
 449 including deeply nested objects / properties. mData can be given in a
 450 number of different ways which effect its behaviour:
 451   <ul>
 452     <li>integer - treated as an array index for the data source. This is the
 453       default that DataTables uses (incrementally increased for each column).</li>
 454     <li>string - read an object property from the data source. Note that you can
 455       use Javascript dotted notation to read deep properties / arrays from the
 456       data source.</li>
 457     <li>null - the sDefaultContent option will be used for the cell (null
 458       by default, so you will need to specify the default content you want -
 459       typically an empty string). This can be useful on generated columns such
 460       as edit / delete action columns.</li>
 461     <li>function - the function given will be executed whenever DataTables
 462       needs to set or get the data for a cell in the column. The function
 463       takes three parameters:
 464       <ul>
 465         <li>{array|object} The data source for the row</li>
 466         <li>{string} The type call data requested - this will be 'set' when
 467           setting data or 'filter', 'display', 'type', 'sort' or undefined when
 468           gathering data. Note that when <i>undefined</i> is given for the type
 469           DataTables expects to get the raw data for the object back</li>
 470         <li>{*} Data to set when the second parameter is 'set'.</li>
 471       </ul>
 472       The return value from the function is not required when 'set' is the type
 473       of call, but otherwise the return is what will be used for the data
 474       requested.</li>
 475    </ul></p>
 476
 477 <p>Note that prior to DataTables 1.9.2 mData was called mDataProp. The name change
 478 reflects the flexibility of this property and is consistent with the naming of
 479 mRender. If 'mDataProp' is given, then it will still be used by DataTables, as
 480 it automatically maps the old name to the new if required.</p><div class="collapse_details"><dl class="details">
 481
 482 </dl>
 483 <h5>Examples</h5>
 484     <div class="example-code">
 485         <pre class="brush: js">   // Read table data from objects
 486    $(document).ready( function() {
 487      var oTable = $('#example').dataTable( {
 488        "sAjaxSource": "sources/deep.txt",
 489        "aoColumns": [
 490          { "mData": "engine" },
 491          { "mData": "browser" },
 492          { "mData": "platform.inner" },
 493          { "mData": "platform.details.0" },
 494          { "mData": "platform.details.1" }
 495        ]
 496      } );
 497    } );
 498
 499  </pre>
 500     </div>
 501
 502     <div class="example-code">
 503         <pre class="brush: js">   // Using mData as a function to provide different information for
 504    // sorting, filtering and display. In this case, currency (price)
 505    $(document).ready( function() {
 506      var oTable = $('#example').dataTable( {
 507        "aoColumnDefs": [ {
 508          "aTargets": [ 0 ],
 509          "mData": function ( source, type, val ) {
 510            if (type === 'set') {
 511              source.price = val;
 512              // Store the computed dislay and filter values for efficiency
 513              source.price_display = val=="" ? "" : "$"+numberFormat(val);
 514              source.price_filter  = val=="" ? "" : "$"+numberFormat(val)+" "+val;
 515              return;
 516            }
 517            else if (type === 'display') {
 518              return source.price_display;
 519            }
 520            else if (type === 'filter') {
 521              return source.price_filter;
 522            }
 523            // 'sort', 'type' and undefined all just use the integer
 524            return source.price;
 525          }
 526        } ]
 527      } );
 528    } );</pre>
 529     </div>
 530 </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
 531 consistency. mDataProp can still be used, as there is backwards compatibility
 532 in DataTables for this option, but it is strongly recommended that you use
 533 mData in preference to mDataProp.</p><div class="collapse_details"><dl class="details">
 534
 535 </dl>
 536 </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
 537 when you want to manipulate data for display (including filtering, sorting etc)
 538 but not altering the underlying data for the table, use this property. mData
 539 can actually do everything this property can and more, but this parameter is
 540 easier to use since there is no 'set' option. Like mData is can be given
 541 in a number of different ways to effect its behaviour, with the addition of
 542 supporting array syntax for easy outputting of arrays (including arrays of
 543 objects):
 544   <ul>
 545     <li>integer - treated as an array index for the data source. This is the
 546       default that DataTables uses (incrementally increased for each column).</li>
 547     <li>string - read an object property from the data source. Note that you can
 548       use Javascript dotted notation to read deep properties / arrays from the
 549       data source and also array brackets to indicate that the data reader should
 550       loop over the data source array. When characters are given between the array
 551       brackets, these characters are used to join the data source array together.
 552       For example: "accounts[, ].name" would result in a comma separated list with
 553       the 'name' value from the 'accounts' array of objects.</li>
 554     <li>function - the function given will be executed whenever DataTables
 555       needs to set or get the data for a cell in the column. The function
 556       takes three parameters:
 557       <ul>
 558         <li>{array|object} The data source for the row (based on mData)</li>
 559         <li>{string} The type call data requested - this will be 'filter', 'display',
 560           'type' or 'sort'.</li>
 561         <li>{array|object} The full data source for the row (not based on mData)</li>
 562       </ul>
 563       The return value from the function is what will be used for the data
 564       requested.</li>
 565    </ul></p><div class="collapse_details"><dl class="details">
 566
 567 </dl>
 568 <h5>Examples</h5>
 569     <div class="example-code">
 570         <pre class="brush: js">   // Create a comma separated list from an array of objects
 571    $(document).ready( function() {
 572      var oTable = $('#example').dataTable( {
 573        "sAjaxSource": "sources/deep.txt",
 574        "aoColumns": [
 575          { "mData": "engine" },
 576          { "mData": "browser" },
 577          {
 578            "mData": "platform",
 579            "mRender": "[, ].name"
 580          }
 581        ]
 582      } );
 583    } );
 584
 585  </pre>
 586     </div>
 587
 588     <div class="example-code">
 589         <pre class="brush: js">   // Use as a function to create a link from the data source
 590    $(document).ready( function() {
 591      var oTable = $('#example').dataTable( {
 592        "aoColumnDefs": [
 593        {
 594          "aTargets": [ 0 ],
 595          "mData": "download_link",
 596          "mRender": function ( data, type, full ) {
 597            return '<a href="'+data+'">Download</a>';
 598          }
 599        ]
 600      } );
 601    } );</pre>
 602     </div>
 603 </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
 604 can be useful as TH cells have semantic meaning in the table body, allowing them
 605 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">
 606
 607 </dl>
 608 <h5>Example</h5>
 609     <div class="example-code">
 610         <pre class="brush: js">   // Make the first column use TH cells
 611    $(document).ready( function() {
 612      var oTable = $('#example').dataTable( {
 613        "aoColumnDefs": [ {
 614          "aTargets": [ 0 ],
 615          "sCellType": "th"
 616        } ]
 617      } );
 618    } );</pre>
 619     </div>
 620 </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">
 621
 622 </dl>
 623 <h5>Examples</h5>
 624     <div class="example-code">
 625         <pre class="brush: js">   // Using aoColumnDefs
 626    $(document).ready( function() {
 627      $('#example').dataTable( {
 628        "aoColumnDefs": [
 629          { "sClass": "my_class", "aTargets": [ 0 ] }
 630        ]
 631      } );
 632    } );
 633
 634  </pre>
 635     </div>
 636
 637     <div class="example-code">
 638         <pre class="brush: js">   // Using aoColumns
 639    $(document).ready( function() {
 640      $('#example').dataTable( {
 641        "aoColumns": [
 642          { "sClass": "my_class" },
 643          null,
 644          null,
 645          null,
 646          null
 647        ]
 648      } );
 649    } );</pre>
 650     </div>
 651 </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,
 652 it finds the longest string in each column and then constructs a
 653 temporary table and reads the widths from that. The problem with this
 654 is that "mmm" is much wider then "iiii", but the latter is a longer
 655 string - thus the calculation can go wrong (doing it properly and putting
 656 it into an DOM object and measuring that is horribly(!) slow). Thus as
 657 a "work around" we provide this option. It will append its value to the
 658 text that is found to be the longest string for the column - i.e. padding.
 659 Generally you shouldn't need this, and it is not documented on the
 660 general DataTables.net documentation</p><div class="collapse_details"><dl class="details">
 661
 662 </dl>
 663 <h5>Example</h5>
 664     <div class="example-code">
 665         <pre class="brush: js">   // Using aoColumns
 666    $(document).ready( function() {
 667      $('#example').dataTable( {
 668        "aoColumns": [
 669          null,
 670          null,
 671          null,
 672          {
 673            "sContentPadding": "mmm"
 674          }
 675        ]
 676      } );
 677    } );</pre>
 678     </div>
 679 </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
 680 whenever a null data source is encountered (this can be because mData
 681 is set to null, or because the data source itself is null).</p><div class="collapse_details"><dl class="details">
 682
 683 </dl>
 684 <h5>Examples</h5>
 685     <div class="example-code">
 686         <pre class="brush: js">   // Using aoColumnDefs
 687    $(document).ready( function() {
 688      $('#example').dataTable( {
 689        "aoColumnDefs": [
 690          {
 691            "mData": null,
 692            "sDefaultContent": "Edit",
 693            "aTargets": [ -1 ]
 694          }
 695        ]
 696      } );
 697    } );
 698
 699  </pre>
 700     </div>
 701
 702     <div class="example-code">
 703         <pre class="brush: js">   // Using aoColumns
 704    $(document).ready( function() {
 705      $('#example').dataTable( {
 706        "aoColumns": [
 707          null,
 708          null,
 709          null,
 710          {
 711            "mData": null,
 712            "sDefaultContent": "Edit"
 713          }
 714        ]
 715      } );
 716    } );</pre>
 717     </div>
 718 </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
 719 be exceptionally useful to know what columns are being displayed on the
 720 client side, and to map these to database fields. When defined, the names
 721 also allow DataTables to reorder information from the server if it comes
 722 back in an unexpected order (i.e. if you switch your columns around on the
 723 client-side, your server-side code does not also need updating).</p><div class="collapse_details"><dl class="details">
 724
 725 </dl>
 726 <h5>Examples</h5>
 727     <div class="example-code">
 728         <pre class="brush: js">   // Using aoColumnDefs
 729    $(document).ready( function() {
 730      $('#example').dataTable( {
 731        "aoColumnDefs": [
 732          { "sName": "engine", "aTargets": [ 0 ] },
 733          { "sName": "browser", "aTargets": [ 1 ] },
 734          { "sName": "platform", "aTargets": [ 2 ] },
 735          { "sName": "version", "aTargets": [ 3 ] },
 736          { "sName": "grade", "aTargets": [ 4 ] }
 737        ]
 738      } );
 739    } );
 740
 741  </pre>
 742     </div>
 743
 744     <div class="example-code">
 745         <pre class="brush: js">   // Using aoColumns
 746    $(document).ready( function() {
 747      $('#example').dataTable( {
 748        "aoColumns": [
 749          { "sName": "engine" },
 750          { "sName": "browser" },
 751          { "sName": "platform" },
 752          { "sName": "version" },
 753          { "sName": "grade" }
 754        ]
 755      } );
 756    } );</pre>
 757     </div>
 758 </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
 759 real-time information from the table (updating the internally cached
 760 version) prior to sorting. This allows sorting to occur on user editable
 761 elements such as form inputs.</p><div class="collapse_details"><dl class="details">
 762
 763 </dl>
 764 <h5>Examples</h5>
 765     <div class="example-code">
 766         <pre class="brush: js">   // Using aoColumnDefs
 767    $(document).ready( function() {
 768      $('#example').dataTable( {
 769        "aoColumnDefs": [
 770          { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },
 771          { "sType": "numeric", "aTargets": [ 3 ] },
 772          { "sSortDataType": "dom-select", "aTargets": [ 4 ] },
 773          { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }
 774        ]
 775      } );
 776    } );
 777
 778  </pre>
 779     </div>
 780
 781     <div class="example-code">
 782         <pre class="brush: js">   // Using aoColumns
 783    $(document).ready( function() {
 784      $('#example').dataTable( {
 785        "aoColumns": [
 786          null,
 787          null,
 788          { "sSortDataType": "dom-text" },
 789          { "sSortDataType": "dom-text", "sType": "numeric" },
 790          { "sSortDataType": "dom-select" },
 791          { "sSortDataType": "dom-checkbox" }
 792        ]
 793      } );
 794    } );</pre>
 795     </div>
 796 </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">
 797
 798 </dl>
 799 <h5>Examples</h5>
 800     <div class="example-code">
 801         <pre class="brush: js">   // Using aoColumnDefs
 802    $(document).ready( function() {
 803      $('#example').dataTable( {
 804        "aoColumnDefs": [
 805          { "sTitle": "My column title", "aTargets": [ 0 ] }
 806        ]
 807      } );
 808    } );
 809
 810  </pre>
 811     </div>
 812
 813     <div class="example-code">
 814         <pre class="brush: js">   // Using aoColumns
 815    $(document).ready( function() {
 816      $('#example').dataTable( {
 817        "aoColumns": [
 818          { "sTitle": "My column title" },
 819          null,
 820          null,
 821          null,
 822          null
 823        ]
 824      } );
 825    } );</pre>
 826     </div>
 827 </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.
 828 Four types (string, numeric, date and html (which will strip HTML tags
 829 before sorting)) are currently available. Note that only date formats
 830 understood by Javascript's Date() object will be accepted as type date. For
 831 example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric',
 832 'date' or 'html' (by default). Further types can be adding through
 833 plug-ins.</p><div class="collapse_details"><dl class="details">
 834
 835 </dl>
 836 <h5>Examples</h5>
 837     <div class="example-code">
 838         <pre class="brush: js">   // Using aoColumnDefs
 839    $(document).ready( function() {
 840      $('#example').dataTable( {
 841        "aoColumnDefs": [
 842          { "sType": "html", "aTargets": [ 0 ] }
 843        ]
 844      } );
 845    } );
 846
 847  </pre>
 848     </div>
 849
 850     <div class="example-code">
 851         <pre class="brush: js">   // Using aoColumns
 852    $(document).ready( function() {
 853      $('#example').dataTable( {
 854        "aoColumns": [
 855          { "sType": "html" },
 856          null,
 857          null,
 858          null,
 859          null
 860        ]
 861      } );
 862    } );</pre>
 863     </div>
 864 </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
 865 (3em, 20px etc). DataTables apples 'smart' widths to columns which have not
 866 been given a specific width through this interface ensuring that the table
 867 remains readable.</p><div class="collapse_details"><dl class="details">
 868
 869 </dl>
 870 <h5>Examples</h5>
 871     <div class="example-code">
 872         <pre class="brush: js">   // Using aoColumnDefs
 873    $(document).ready( function() {
 874      $('#example').dataTable( {
 875        "aoColumnDefs": [
 876          { "sWidth": "20%", "aTargets": [ 0 ] }
 877        ]
 878      } );
 879    } );
 880
 881  </pre>
 882     </div>
 883
 884     <div class="example-code">
 885         <pre class="brush: js">   // Using aoColumns
 886    $(document).ready( function() {
 887      $('#example').dataTable( {
 888        "aoColumns": [
 889          { "sWidth": "20%" },
 890          null,
 891          null,
 892          null,
 893          null
 894        ]
 895      } );
 896    } );</pre>
 897     </div>
 898 </div></dd>
 899 </dl></div>
 900                                         </div>
 901
 902                 </div>
 903
 904                 <div class="fw_footer">
 905                         DataTables: Copyright 2008-2012 Allan Jardine, all rights reserved<br>
 906
 907                         Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
 908                         23th Sep 2012 - 14:27
 909                         with the <a href="http://datatables.net/">DataTables</a> template.
 910                 </div>
 911         </body>
 912 </html>