Skip to content

W
webprofile-jwg2024
Switch branch/tag
Find file
Normal viewHistoryPermalink
FixedColumns.html 17.2 KB
Newer Older
templateing and example master with datatable
12af00a4
 
Aan Choesni Herlingga committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 
<!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>Class: FixedColumns - 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">Class: FixedColumns</h1>
					
					<div class="page-info">
						FixedColumns v2.0.3 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><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>
					<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>
						<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 
fix the left most column in place. This plug-in for DataTables provides 
exactly this option (note for non-scrolling tables, please use the <br />
FixedHeader plug-in, which can fix headers, footers and columns). Key 
features include:
  <ul class="limit_length">
    <li>Freezes the left or right most columns to the side of the table</li>
    <li>Option to freeze two or more columns</li>
    <li>Full integration with DataTables' scrolling options</li>
    <li>Speed - FixedColumns is fast in its operation</li>
  </ul></p><div class="collapse_details"><h3>Constructor</h3><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">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>
	</tbody>
</table><h5>Example:</h5>
    <div class="example-code">
    	<pre class="brush: js"> 	var oTable = $('#example').dataTable( {
 		"sScrollX": "100%"
 	} );
 	new FixedColumns( oTable );</pre>
    </div>
</div>
</dl><h3 class="subsection-title">Requires</h3>
<ul>
	<li>module:jQuery</li><li>module:DataTables</li>
</ul>

					</div>

					
					<div class="doc_summary">
						<a name="summary"></a>
						<h2>Summary</h2>

						<div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3>
<dl>
	<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>
</dl></div><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, 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>
</dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3>

<dl>
    <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
height matching. This function will have no effect when 'none' or 'auto' row height
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.
This is useful if you update the width of the table container. Note that FixedColumns will
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
automatically update the display whenever the host DataTable redraws.</p></dd>
</dl>
</div><div class="doc_group"><a name="summary_events"></a><h3 class="subsection-title">Events</h3>
<dl>
    <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>
</dd>
</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="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">
	
</dl>
</div></dd>
</dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
    <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
height matching. This function will have no effect when 'none' or 'auto' row height
matching is used.</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">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>
	</tbody>
</table><h5>Example:</h5>
    <div class="example-code">
    	<pre class="brush: js"> 	var oTable = $('#example').dataTable( {
 		"sScrollX": "100%"
 	} );
 	var oFC = new FixedColumns( oTable );
 	
 	// manipulate the table - mark the row as needing an update then update the table
 	// this allows the redraw performed by DataTables fnUpdate to recalculate the row
 	// height
 	oFC.fnRecalculateHeight();
 	oTable.fnUpdate( $('#example tbody tr:eq(0)')[0], ["insert date", 1, 2, 3 ... ]);</pre>
    </div>
</div>
<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.
This is useful if you update the width of the table container. Note that FixedColumns will
perform this function automatically when the window.resize event is fired.</p><div class="collapse_details"><dl class="details">
	
</dl>
<h5>Example:</h5>
    <div class="example-code">
    	<pre class="brush: js"> 	var oTable = $('#example').dataTable( {
 		"sScrollX": "100%"
 	} );
 	var oFC = new FixedColumns( oTable );
 	
 	// Resize the table container and then have FixedColumns adjust its layout....
     $('#content').width( 1200 );
 	oFC.fnRedrawLayout();</pre>
    </div>
</div>
<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">
	
</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">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>
	</tbody>
</table><h5>Example:</h5>
    <div class="example-code">
    	<pre class="brush: js"> 	var oTable = $('#example').dataTable( {
 		"sScrollX": "100%"
 	} );
 	var oFC = new FixedColumns( oTable );
 	
 	// You may want to do this after manipulating a row in the fixed column
 	oFC.fnSetRowHeight( $('#example tbody tr:eq(0)')[0], 50 );</pre>
    </div>
</div>
<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
automatically update the display whenever the host DataTable redraws.</p><div class="collapse_details"><dl class="details">
	
</dl>
<h5>Example:</h5>
    <div class="example-code">
    	<pre class="brush: js"> 	var oTable = $('#example').dataTable( {
 		"sScrollX": "100%"
 	} );
 	var oFC = new FixedColumns( oTable );
 	
 	// at some later point when the table has been manipulated....
 	oFC.fnUpdate();</pre>
    </div>
</div>

</dd>
</div><div class="doc_group"><a name="details_events"></a><h3 class="subsection-title">Events</h3>
<dl>
    <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">
	
</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">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>
	</tbody>
</table></div>

</dd>
</div>
   					</div>
				
		</div>

		<div class="fw_footer">
			FixedColumns: Copyright 2010-2011 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>