webapp/resources/datatables-1.9.4/extras/FixedColumns/docs/FixedColumns.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>Class: FixedColumns - 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">Class: FixedColumns</h1>
  24
  25                                         <div class="page-info">
  26                                                 FixedColumns v2.0.3 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><a href="#summary_namespaces">Namespaces (3)</a></td></tr><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td><a href="#summary_methods">Methods (4)</a></td><td>Static methods (0)</td></tr><tr><td><a href="#summary_events">Events (1)</a></td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td><a href="#summary_methods">Methods (4)</a></td><td>Static methods (0)</td></tr><tr><td><a href="#summary_events">Events (1)</a></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                                                 <dl><dt id="FixedColumns" class="  even"><a name="FixedColumns"></a><a name="FixedColumns_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>new FixedColumns</a></span><span class="type-sig"><span class="signature">(oDT, <span class="optional">oInit</span>)</span><span class="type-signature"></span></span></span></dt><dd class="  even"><p>When making use of DataTables' x-axis scrolling feature, you may wish to
  56 fix the left most column in place. This plug-in for DataTables provides
  57 exactly this option (note for non-scrolling tables, please use the <br />
  58 FixedHeader plug-in, which can fix headers, footers and columns). Key
  59 features include:
  60   <ul class="limit_length">
  61     <li>Freezes the left or right most columns to the side of the table</li>
  62     <li>Option to freeze two or more columns</li>
  63     <li>Full integration with DataTables' scrolling options</li>
  64     <li>Speed - FixedColumns is fast in its operation</li>
  65   </ul></p><div class="collapse_details"><h3>Constructor</h3><dl class="details">
  66
  67 </dl>
  68 <h5>Parameters:</h5>
  69
  70 <table class="params">
  71     <thead>
  72         <tr>
  73         <th width="20"></th>
  74         <th width="12%" class="bottom_border name">Name</th>
  75                 <th width="10%" class="bottom_border">Type</th>
  76                 <th width="10%" class="bottom_border">Attributes</th>
  77                 <th width="10%" class="bottom_border">Default</th>
  78                 <th class="last bottom_border">Description</th>
  79         </tr>
  80         </thead>
  81
  82         <tbody>
  83         <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oDT</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables instance</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oInit</td><td class="type type-param">object</td><td class="attributes">Optional</td><td class="default">{}</td><td class="description last"><p>Configuration object for FixedColumns. Options are defined by <a href="FixedColumns.defaults.html">FixedColumns.defaults</a></p></td></tr>
  84         </tbody>
  85 </table><h5>Example:</h5>
  86     <div class="example-code">
  87         <pre class="brush: js">         var oTable = $('#example').dataTable( {
  88                 "sScrollX": "100%"
  89         } );
  90         new FixedColumns( oTable );</pre>
  91     </div>
  92 </div>
  93 </dl><h3 class="subsection-title">Requires</h3>
  94 <ul>
  95         <li>module:jQuery</li><li>module:DataTables</li>
  96 </ul>
  97
  98                                         </div>
  99
 100
 101                                         <div class="doc_summary">
 102                                                 <a name="summary"></a>
 103                                                 <h2>Summary</h2>
 104
 105                                                 <div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3>
 106 <dl>
 107         <dt class="even"><span class="type-name"><a href="FixedColumns.defaults.html">defaults</a></span></dt><dd class="even"><p>FixedColumns default settings for initialisation</p></dd><dt class="odd"><span class="type-name"><a href="d3890ba7c4.html">dom</a></span></dt><dd class="odd"><p>DOM elements used by the class instance</p></dd><dt class="even"><span class="type-name"><a href="91bce7c4ad.html">s</a></span></dt><dd class="even"><p>Settings object which contains customisable information for FixedColumns instance</p></dd>
 108 </dl></div><div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
 109
 110 <dl>
 111     <dt class="  even"><span class="type-attr"><span class="type-signature">&lt;static, constant> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class="  even"><p>FixedColumns version</p></dd>
 112 </dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3>
 113
 114 <dl>
 115     <dt class="  even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnRecalculateHeight">fnRecalculateHeight</a></span><span class="type-sig"><span class="signature">(nTr)</span><span class="type-signature"> &rarr; {void}</span></span></dt><dd class="  even"><p>Mark a row such that it's height should be recalculated when using 'semiauto' row
 116 height matching. This function will have no effect when 'none' or 'auto' row height
 117 matching is used.</p></dd><dt class="  odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnRedrawLayout">fnRedrawLayout</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></span></dt><dd class="  odd"><p>Recalculate the resizes of the 3x3 grid that FixedColumns uses for display of the table.
 118 This is useful if you update the width of the table container. Note that FixedColumns will
 119 perform this function automatically when the window.resize event is fired.</p></dd><dt class="  even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnSetRowHeight">fnSetRowHeight</a></span><span class="type-sig"><span class="signature">(nTarget, iHeight)</span><span class="type-signature"> &rarr; {void}</span></span></dt><dd class="  even"><p>Set the height of a given row - provides cross browser compatibility</p></dd><dt class="  odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnUpdate">fnUpdate</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></span></dt><dd class="  odd"><p>Update the fixed columns - including headers and footers. Note that FixedColumns will
 120 automatically update the display whenever the host DataTable redraws.</p></dd>
 121 </dl>
 122 </div><div class="doc_group"><a name="summary_events"></a><h3 class="subsection-title">Events</h3>
 123 <dl>
 124     <dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#draw">draw</a></span><span class="type-sig"></span></dt><dd class=" even"><p>Event fired whenever FixedColumns redraws the fixed columns (i.e. clones the table elements from the main DataTable). This will occur whenever the DataTable that the FixedColumns instance is attached does its own draw.</p></dd>
 125 </dd>
 126 </div>
 127                                         </div>
 128
 129
 130
 131
 132                                         <div class="doc_details">
 133                                                 <a name="details"></a>
 134                                                 <h2>Details</h2>
 135                                                 <div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
 136 <dl>
 137     <dt class="  even"><a name="VERSION"></a><a name="VERSION_details"></a><span class="type-attr"><span class="type-signature">&lt;static, constant> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class="  even"><p>FixedColumns version</p><div class="collapse_details"><dl class="details">
 138
 139 </dl>
 140 </div></dd>
 141 </dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3>
 142 <dl>
 143     <dt id="FixedColumns#fnRecalculateHeight" class="  even"><a name="fnRecalculateHeight"></a><a name="fnRecalculateHeight_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnRecalculateHeight</a></span><span class="type-sig"><span class="signature">(nTr)</span><span class="type-signature"> &rarr; {void}</span></span></span></dt><dd class="  even"><p>Mark a row such that it's height should be recalculated when using 'semiauto' row
 144 height matching. This function will have no effect when 'none' or 'auto' row height
 145 matching is used.</p><div class="collapse_details"><dl class="details">
 146
 147 </dl>
 148 <h5>Parameters:</h5>
 149
 150 <table class="params">
 151     <thead>
 152         <tr>
 153         <th width="20"></th>
 154         <th width="12%" class="bottom_border name">Name</th>
 155                 <th width="10%" class="bottom_border">Type</th>
 156                 <th width="10%" class="bottom_border">Attributes</th>
 157                 <th width="10%" class="bottom_border">Default</th>
 158                 <th class="last bottom_border">Description</th>
 159         </tr>
 160         </thead>
 161
 162         <tbody>
 163         <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTr</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>TR element that should have it's height recalculated</p></td></tr>
 164         </tbody>
 165 </table><h5>Example:</h5>
 166     <div class="example-code">
 167         <pre class="brush: js">         var oTable = $('#example').dataTable( {
 168                 "sScrollX": "100%"
 169         } );
 170         var oFC = new FixedColumns( oTable );
 171
 172         // manipulate the table - mark the row as needing an update then update the table
 173         // this allows the redraw performed by DataTables fnUpdate to recalculate the row
 174         // height
 175         oFC.fnRecalculateHeight();
 176         oTable.fnUpdate( $('#example tbody tr:eq(0)')[0], ["insert date", 1, 2, 3 ... ]);</pre>
 177     </div>
 178 </div>
 179 <dt id="FixedColumns#fnRedrawLayout" class="  odd"><a name="fnRedrawLayout"></a><a name="fnRedrawLayout_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnRedrawLayout</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></span></span></dt><dd class="  odd"><p>Recalculate the resizes of the 3x3 grid that FixedColumns uses for display of the table.
 180 This is useful if you update the width of the table container. Note that FixedColumns will
 181 perform this function automatically when the window.resize event is fired.</p><div class="collapse_details"><dl class="details">
 182
 183 </dl>
 184 <h5>Example:</h5>
 185     <div class="example-code">
 186         <pre class="brush: js">         var oTable = $('#example').dataTable( {
 187                 "sScrollX": "100%"
 188         } );
 189         var oFC = new FixedColumns( oTable );
 190
 191         // Resize the table container and then have FixedColumns adjust its layout....
 192      $('#content').width( 1200 );
 193         oFC.fnRedrawLayout();</pre>
 194     </div>
 195 </div>
 196 <dt id="FixedColumns#fnSetRowHeight" class="  even"><a name="fnSetRowHeight"></a><a name="fnSetRowHeight_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnSetRowHeight</a></span><span class="type-sig"><span class="signature">(nTarget, iHeight)</span><span class="type-signature"> &rarr; {void}</span></span></span></dt><dd class="  even"><p>Set the height of a given row - provides cross browser compatibility</p><div class="collapse_details"><dl class="details">
 197
 198 </dl>
 199 <h5>Parameters:</h5>
 200
 201 <table class="params">
 202     <thead>
 203         <tr>
 204         <th width="20"></th>
 205         <th width="12%" class="bottom_border name">Name</th>
 206                 <th width="10%" class="bottom_border">Type</th>
 207                 <th width="10%" class="bottom_border">Attributes</th>
 208                 <th width="10%" class="bottom_border">Default</th>
 209                 <th class="last bottom_border">Description</th>
 210         </tr>
 211         </thead>
 212
 213         <tbody>
 214         <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTarget</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>TR element that should have it's height recalculated</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">iHeight</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Height in pixels to set</p></td></tr>
 215         </tbody>
 216 </table><h5>Example:</h5>
 217     <div class="example-code">
 218         <pre class="brush: js">         var oTable = $('#example').dataTable( {
 219                 "sScrollX": "100%"
 220         } );
 221         var oFC = new FixedColumns( oTable );
 222
 223         // You may want to do this after manipulating a row in the fixed column
 224         oFC.fnSetRowHeight( $('#example tbody tr:eq(0)')[0], 50 );</pre>
 225     </div>
 226 </div>
 227 <dt id="FixedColumns#fnUpdate" class="  odd"><a name="fnUpdate"></a><a name="fnUpdate_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnUpdate</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"> &rarr; {void}</span></span></span></dt><dd class="  odd"><p>Update the fixed columns - including headers and footers. Note that FixedColumns will
 228 automatically update the display whenever the host DataTable redraws.</p><div class="collapse_details"><dl class="details">
 229
 230 </dl>
 231 <h5>Example:</h5>
 232     <div class="example-code">
 233         <pre class="brush: js">         var oTable = $('#example').dataTable( {
 234                 "sScrollX": "100%"
 235         } );
 236         var oFC = new FixedColumns( oTable );
 237
 238         // at some later point when the table has been manipulated....
 239         oFC.fnUpdate();</pre>
 240     </div>
 241 </div>
 242
 243 </dd>
 244 </div><div class="doc_group"><a name="details_events"></a><h3 class="subsection-title">Events</h3>
 245 <dl>
 246     <dt id="FixedColumns#event:draw" class="  even"><a name="draw"></a><a name="draw_details"></a><span class="type-attr"></span><span class="type-name"><a>draw</a></span><span class="type-sig"></span></span></dt><dd class="  even"><p>Event fired whenever FixedColumns redraws the fixed columns (i.e. clones the table elements from the main DataTable). This will occur whenever the DataTable that the FixedColumns instance is attached does its own draw.</p><div class="collapse_details"><dl class="details">
 247
 248 </dl>
 249 <h5>Parameters:</h5>
 250
 251 <table class="params">
 252     <thead>
 253         <tr>
 254         <th width="20"></th>
 255         <th width="12%" class="bottom_border name">Name</th>
 256                 <th width="10%" class="bottom_border">Type</th>
 257                 <th width="10%" class="bottom_border">Attributes</th>
 258                 <th width="10%" class="bottom_border">Default</th>
 259                 <th class="last bottom_border">Description</th>
 260         </tr>
 261         </thead>
 262
 263         <tbody>
 264         <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">event</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>jQuery event object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">o</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Event parameters from FixedColumns</p></td></tr><tr><td class="number right_border"></td><td class="name">o.leftClone</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Instance's object dom.clone.left for easy reference. This object contains references to the left fixed clumn column's nodes</p></td></tr><tr><td class="number right_border"></td><td class="name">o.rightClone</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Instance's object dom.clone.right for easy reference. This object contains references to the right fixed clumn column's nodes</p></td></tr>
 265         </tbody>
 266 </table></div>
 267
 268 </dd>
 269 </div>
 270                                         </div>
 271
 272                 </div>
 273
 274                 <div class="fw_footer">
 275                         FixedColumns: Copyright 2010-2011 Allan Jardine, all rights reserved<br>
 276
 277                         Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
 278                         23th Sep 2012 - 14:27
 279                         with the <a href="http://datatables.net/">DataTables</a> template.
 280                 </div>
 281         </body>
 282 </html>