| 2629 |
vikas |
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.1 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><a href="#summary_namespaces">Namespaces</a> | <a href="#summary_methods">Methods</a> | <a href="#summary_events">Events</a></div></li><li><a href="#details">Details</a><div><a href="#details_methods">Methods</a> | <a href="#details_events">Events</a></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_details"></a><span class="type-attr"></span><span class="type-name"><a>new FixedColumns</a></span><span class="type-sig"><span class="type-brace">(</span> oDT:<span class="type-param">object</span>, [oInit:<span class="type-param">object</span>] <span class="type-brace">)</span></span></span></dt><dd class=" even"><p class="description">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
|
|
|
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><h3>Constructor</h3><dl class="details">
|
|
|
66 |
|
|
|
67 |
|
|
|
68 |
|
|
|
69 |
|
|
|
70 |
|
|
|
71 |
|
|
|
72 |
|
|
|
73 |
|
|
|
74 |
|
|
|
75 |
|
|
|
76 |
|
|
|
77 |
|
|
|
78 |
|
|
|
79 |
</dl><h5>Parameters:</h5>
|
|
|
80 |
|
|
|
81 |
<table class="params">
|
|
|
82 |
<thead>
|
|
|
83 |
<tr>
|
|
|
84 |
<th width="20"></th>
|
|
|
85 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
86 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
87 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
88 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
89 |
<th class="last bottom_border">Description</th>
|
|
|
90 |
</tr>
|
|
|
91 |
</thead>
|
|
|
92 |
|
|
|
93 |
<tbody>
|
|
|
94 |
<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">DataTables instance</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">Configuration object for FixedColumns. Options are defined by <a href="FixedColumns.defaults.html">FixedColumns.defaults</a></td></tr>
|
|
|
95 |
</tbody>
|
|
|
96 |
</table><h5>Example:</h5>
|
|
|
97 |
<div class="example-code">
|
|
|
98 |
<pre class="brush: js"> var oTable = $('#example').dataTable( {
|
|
|
99 |
"sScrollX": "100%"
|
|
|
100 |
} );
|
|
|
101 |
new FixedColumns( oTable );</pre>
|
|
|
102 |
</div>
|
|
|
103 |
</dl><h3 class="subsection-title">Requires</h3>
|
|
|
104 |
<ul>
|
|
|
105 |
<li>jQuery 1.3+</li><li>DataTables 1.8.0.dev+</li>
|
|
|
106 |
</ul>
|
|
|
107 |
</div>
|
|
|
108 |
|
|
|
109 |
<div class="doc_summary">
|
|
|
110 |
<a name="summary"></a>
|
|
|
111 |
<h2>Summary</h2>
|
|
|
112 |
|
|
|
113 |
<div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3>
|
|
|
114 |
<dl>
|
|
|
115 |
<dt class="even"><span class="type-name"><a href="FixedColumns.defaults.html">defaults</a></span></dt><dd class="even">FixedColumns default settings for initialisation</dd><dt class="odd"><span class="type-name"><a href="FixedColumns_dom.html">dom</a></span></dt><dd class="odd">DOM elements used by the class instance</dd><dt class="even"><span class="type-name"><a href="FixedColumns_s.html">s</a></span></dt><dd class="even">Settings object which contains customisable information for FixedColumns instance</dd>
|
|
|
116 |
</dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods</h3>
|
|
|
117 |
|
|
|
118 |
<dl>
|
|
|
119 |
<dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#fnRecalculateHeight_details">fnRecalculateHeight</a></span><span class="type-sig"><span class="type-brace">(</span> nTr:<span class="type-param">Node</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class=" even">Mark a row such that it's height should be recalculated when using 'semiauto' row
|
|
|
120 |
height matching. This function will have no effect when 'none' or 'auto' row height
|
|
|
121 |
matching is used.</dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#fnRedrawLayout_details">fnRedrawLayout</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class=" odd">Recalculate the resizes of the 3x3 grid that FixedColumns uses for display of the table.
|
|
|
122 |
This is useful if you update the width of the table container. Note that FixedColumns will
|
|
|
123 |
perform this function automatically when the window.resize event is fired.</dd><dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#fnSetRowHeight_details">fnSetRowHeight</a></span><span class="type-sig"><span class="type-brace">(</span> nTarget:<span class="type-param">Node</span>, iHeight:<span class="type-param">int</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class=" even">Set the height of a given row - provides cross browser compatibility</dd><dt class=" odd"><span class="type-attr"></span><span class="type-name"><a href="#fnUpdate_details">fnUpdate</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class=" odd">Update the fixed columns - including headers and footers. Note that FixedColumns will
|
|
|
124 |
automatically update the display whenever the host DataTable redraws.</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnClone_details">_fnClone</a></span><span class="type-sig"><span class="type-brace">(</span> oClone:<span class="type-param">Object</span>, oGrid:<span class="type-param">Object</span>, aiColumns:<span class="type-param">Array</span>, bAll:<span class="type-param">Boolean</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private even">Clone the DataTable nodes and place them in the DOM (sized correctly)</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnCloneLeft_details">_fnCloneLeft</a></span><span class="type-sig"><span class="type-brace">(</span> bAll:<span class="type-param">Boolean</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private odd">Clone the left columns</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnCloneRight_details">_fnCloneRight</a></span><span class="type-sig"><span class="type-brace">(</span> bAll:<span class="type-param">Boolean</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private even">Clone the right columns</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnConstruct_details">_fnConstruct</a></span><span class="type-sig"><span class="type-brace">(</span> oInit:<span class="type-param">Object</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private odd">Initialisation for FixedColumns</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnCopyLayout_details">_fnCopyLayout</a></span><span class="type-sig"><span class="type-brace">(</span> aoOriginal:<span class="type-param">Object</span>, aiColumns:<span class="type-param">Object</span> <span class="type-brace">)</span>:<span class="type-return">Array</span></span></dt><dd class="private even">Make a copy of the layout object for a header or footer element from DataTables. Note that
|
|
|
125 |
this method will clone the nodes in the layout object.</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnDraw_details">_fnDraw</a></span><span class="type-sig"><span class="type-brace">(</span> bAll:<span class="type-param">Boolean</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private odd">Clone and position the fixed columns</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnEqualiseHeights_details">_fnEqualiseHeights</a></span><span class="type-sig"><span class="type-brace">(</span> nodeName:<span class="type-param">String</span>, original:<span class="type-param">Node</span>, clone:<span class="type-param">Node</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private even">Equalise the heights of the rows in a given table node in a cross browser way</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnGetTrNodes_details">_fnGetTrNodes</a></span><span class="type-sig"><span class="type-brace">(</span> nIn:<span class="type-param">Node</span> <span class="type-brace">)</span>:<span class="type-return">Array</span></span></dt><dd class="private odd">From a given table node (THEAD etc), get a list of TR direct child elements</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnGridHeight_details">_fnGridHeight</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private even">Recalculate and set the height of the grid components used for positioning of the
|
|
|
126 |
FixedColumn display grid.</dd><dt class="private odd"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnGridLayout_details">_fnGridLayout</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private odd">Style and position the grid used for the FixedColumns layout based on the instance settings.
|
|
|
127 |
Specifically sLeftWidth ('fixed' or 'absolute'), iLeftWidth (px if fixed, % if absolute) and
|
|
|
128 |
there 'right' counterparts.</dd><dt class="private even"><span class="type-attr"><private> </span><span class="type-name"><a href="#_fnGridSetup_details">_fnGridSetup</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></dt><dd class="private even">Set up the DOM for the fixed column. The way the layout works is to create a 1x3 grid
|
|
|
129 |
for the left column, the DataTable (for which we just reuse the scrolling element DataTable
|
|
|
130 |
puts into the DOM) and the right column. In each of he two fixed column elements there is a
|
|
|
131 |
grouping wrapper element and then a head, body and footer wrapper. In each of these we then
|
|
|
132 |
place the cloned header, body or footer tables. This effectively gives as 3x3 grid structure.</dd>
|
|
|
133 |
</dl></div><div class="doc_group"><a name="summary_events"></a><h3 class="subsection-title">Events</h3>
|
|
|
134 |
<dl>
|
|
|
135 |
<dt class=" even"><span class="type-attr"></span><span class="type-name"><a href="#draw_details">draw</a></span><span class="type-sig"></span></dt><dd class=" even">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.</dd>
|
|
|
136 |
</dd></div>
|
|
|
137 |
</div>
|
|
|
138 |
|
|
|
139 |
|
|
|
140 |
<div class="doc_details">
|
|
|
141 |
<a name="details"></a>
|
|
|
142 |
<h2>Details</h2>
|
|
|
143 |
<div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods</h3>
|
|
|
144 |
<dl>
|
|
|
145 |
<dt id="FixedColumns#fnRecalculateHeight" class=" even"><a name="fnRecalculateHeight_details"></a><span class="type-attr"></span><span class="type-name"><a>fnRecalculateHeight</a></span><span class="type-sig"><span class="type-brace">(</span> nTr:<span class="type-param">Node</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class=" even"><p class="description">Mark a row such that it's height should be recalculated when using 'semiauto' row
|
|
|
146 |
height matching. This function will have no effect when 'none' or 'auto' row height
|
|
|
147 |
matching is used.</p><dl class="details">
|
|
|
148 |
|
|
|
149 |
|
|
|
150 |
|
|
|
151 |
|
|
|
152 |
|
|
|
153 |
|
|
|
154 |
|
|
|
155 |
|
|
|
156 |
|
|
|
157 |
|
|
|
158 |
|
|
|
159 |
|
|
|
160 |
|
|
|
161 |
</dl><h5>Parameters:</h5>
|
|
|
162 |
|
|
|
163 |
<table class="params">
|
|
|
164 |
<thead>
|
|
|
165 |
<tr>
|
|
|
166 |
<th width="20"></th>
|
|
|
167 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
168 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
169 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
170 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
171 |
<th class="last bottom_border">Description</th>
|
|
|
172 |
</tr>
|
|
|
173 |
</thead>
|
|
|
174 |
|
|
|
175 |
<tbody>
|
|
|
176 |
<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">TR element that should have it's height recalculated</td></tr>
|
|
|
177 |
</tbody>
|
|
|
178 |
</table><h5>Example:</h5>
|
|
|
179 |
<div class="example-code">
|
|
|
180 |
<pre class="brush: js"> var oTable = $('#example').dataTable( {
|
|
|
181 |
"sScrollX": "100%"
|
|
|
182 |
} );
|
|
|
183 |
var oFC = new FixedColumns( oTable );
|
|
|
184 |
|
|
|
185 |
// manipulate the table - mark the row as needing an update then update the table
|
|
|
186 |
// this allows the redraw performed by DataTables fnUpdate to recalculate the row
|
|
|
187 |
// height
|
|
|
188 |
oFC.fnRecalculateHeight();
|
|
|
189 |
oTable.fnUpdate( $('#example tbody tr:eq(0)')[0], ["insert date", 1, 2, 3 ... ]);</pre>
|
|
|
190 |
</div>
|
|
|
191 |
<dt id="FixedColumns#fnRedrawLayout" class=" odd"><a name="fnRedrawLayout_details"></a><span class="type-attr"></span><span class="type-name"><a>fnRedrawLayout</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class=" odd"><p class="description">Recalculate the resizes of the 3x3 grid that FixedColumns uses for display of the table.
|
|
|
192 |
This is useful if you update the width of the table container. Note that FixedColumns will
|
|
|
193 |
perform this function automatically when the window.resize event is fired.</p><dl class="details">
|
|
|
194 |
|
|
|
195 |
|
|
|
196 |
|
|
|
197 |
|
|
|
198 |
|
|
|
199 |
|
|
|
200 |
|
|
|
201 |
|
|
|
202 |
|
|
|
203 |
|
|
|
204 |
|
|
|
205 |
|
|
|
206 |
|
|
|
207 |
</dl><h5>Example:</h5>
|
|
|
208 |
<div class="example-code">
|
|
|
209 |
<pre class="brush: js"> var oTable = $('#example').dataTable( {
|
|
|
210 |
"sScrollX": "100%"
|
|
|
211 |
} );
|
|
|
212 |
var oFC = new FixedColumns( oTable );
|
|
|
213 |
|
|
|
214 |
// Resize the table container and then have FixedColumns adjust its layout....
|
|
|
215 |
$('#content').width( 1200 );
|
|
|
216 |
oFC.fnRedrawLayout();</pre>
|
|
|
217 |
</div>
|
|
|
218 |
<dt id="FixedColumns#fnSetRowHeight" class=" even"><a name="fnSetRowHeight_details"></a><span class="type-attr"></span><span class="type-name"><a>fnSetRowHeight</a></span><span class="type-sig"><span class="type-brace">(</span> nTarget:<span class="type-param">Node</span>, iHeight:<span class="type-param">int</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class=" even"><p class="description">Set the height of a given row - provides cross browser compatibility</p><dl class="details">
|
|
|
219 |
|
|
|
220 |
|
|
|
221 |
|
|
|
222 |
|
|
|
223 |
|
|
|
224 |
|
|
|
225 |
|
|
|
226 |
|
|
|
227 |
|
|
|
228 |
|
|
|
229 |
|
|
|
230 |
|
|
|
231 |
|
|
|
232 |
</dl><h5>Parameters:</h5>
|
|
|
233 |
|
|
|
234 |
<table class="params">
|
|
|
235 |
<thead>
|
|
|
236 |
<tr>
|
|
|
237 |
<th width="20"></th>
|
|
|
238 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
239 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
240 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
241 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
242 |
<th class="last bottom_border">Description</th>
|
|
|
243 |
</tr>
|
|
|
244 |
</thead>
|
|
|
245 |
|
|
|
246 |
<tbody>
|
|
|
247 |
<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">TR element that should have it's height recalculated</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">Height in pixels to set</td></tr>
|
|
|
248 |
</tbody>
|
|
|
249 |
</table><h5>Example:</h5>
|
|
|
250 |
<div class="example-code">
|
|
|
251 |
<pre class="brush: js"> var oTable = $('#example').dataTable( {
|
|
|
252 |
"sScrollX": "100%"
|
|
|
253 |
} );
|
|
|
254 |
var oFC = new FixedColumns( oTable );
|
|
|
255 |
|
|
|
256 |
// You may want to do this after manipulating a row in the fixed column
|
|
|
257 |
oFC.fnSetRowHeight( $('#example tbody tr:eq(0)')[0], 50 );</pre>
|
|
|
258 |
</div>
|
|
|
259 |
<dt id="FixedColumns#fnUpdate" class=" odd"><a name="fnUpdate_details"></a><span class="type-attr"></span><span class="type-name"><a>fnUpdate</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class=" odd"><p class="description">Update the fixed columns - including headers and footers. Note that FixedColumns will
|
|
|
260 |
automatically update the display whenever the host DataTable redraws.</p><dl class="details">
|
|
|
261 |
|
|
|
262 |
|
|
|
263 |
|
|
|
264 |
|
|
|
265 |
|
|
|
266 |
|
|
|
267 |
|
|
|
268 |
|
|
|
269 |
|
|
|
270 |
|
|
|
271 |
|
|
|
272 |
|
|
|
273 |
|
|
|
274 |
</dl><h5>Example:</h5>
|
|
|
275 |
<div class="example-code">
|
|
|
276 |
<pre class="brush: js"> var oTable = $('#example').dataTable( {
|
|
|
277 |
"sScrollX": "100%"
|
|
|
278 |
} );
|
|
|
279 |
var oFC = new FixedColumns( oTable );
|
|
|
280 |
|
|
|
281 |
// at some later point when the table has been manipulated....
|
|
|
282 |
oFC.fnUpdate();</pre>
|
|
|
283 |
</div>
|
|
|
284 |
<dt id="FixedColumns#_fnClone" class="private even"><a name="_fnClone_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnClone</a></span><span class="type-sig"><span class="type-brace">(</span> oClone:<span class="type-param">Object</span>, oGrid:<span class="type-param">Object</span>, aiColumns:<span class="type-param">Array</span>, bAll:<span class="type-param">Boolean</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private even"><p class="description">Clone the DataTable nodes and place them in the DOM (sized correctly)</p><dl class="details">
|
|
|
285 |
|
|
|
286 |
|
|
|
287 |
|
|
|
288 |
|
|
|
289 |
|
|
|
290 |
|
|
|
291 |
|
|
|
292 |
|
|
|
293 |
|
|
|
294 |
|
|
|
295 |
|
|
|
296 |
|
|
|
297 |
|
|
|
298 |
</dl><h5>Parameters:</h5>
|
|
|
299 |
|
|
|
300 |
<table class="params">
|
|
|
301 |
<thead>
|
|
|
302 |
<tr>
|
|
|
303 |
<th width="20"></th>
|
|
|
304 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
305 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
306 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
307 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
308 |
<th class="last bottom_border">Description</th>
|
|
|
309 |
</tr>
|
|
|
310 |
</thead>
|
|
|
311 |
|
|
|
312 |
<tbody>
|
|
|
313 |
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oClone</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last">Object containing the header, footer and body cloned DOM elements</td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oGrid</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last">Grid object containing the display grid elements for the cloned
|
|
|
314 |
column (left or right)</td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">aiColumns</td><td class="type type-param">Array</td><td class="attributes"></td><td class="default"></td><td class="description last">Column indexes which should be operated on from the DataTable</td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">bAll</td><td class="type type-param">Boolean</td><td class="attributes"></td><td class="default"></td><td class="description last">Indicate if the header and footer should be updated as well (true)</td></tr>
|
|
|
315 |
</tbody>
|
|
|
316 |
</table><dt id="FixedColumns#_fnCloneLeft" class="private odd"><a name="_fnCloneLeft_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnCloneLeft</a></span><span class="type-sig"><span class="type-brace">(</span> bAll:<span class="type-param">Boolean</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private odd"><p class="description">Clone the left columns</p><dl class="details">
|
|
|
317 |
|
|
|
318 |
|
|
|
319 |
|
|
|
320 |
|
|
|
321 |
|
|
|
322 |
|
|
|
323 |
|
|
|
324 |
|
|
|
325 |
|
|
|
326 |
|
|
|
327 |
|
|
|
328 |
|
|
|
329 |
|
|
|
330 |
</dl><h5>Parameters:</h5>
|
|
|
331 |
|
|
|
332 |
<table class="params">
|
|
|
333 |
<thead>
|
|
|
334 |
<tr>
|
|
|
335 |
<th width="20"></th>
|
|
|
336 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
337 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
338 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
339 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
340 |
<th class="last bottom_border">Description</th>
|
|
|
341 |
</tr>
|
|
|
342 |
</thead>
|
|
|
343 |
|
|
|
344 |
<tbody>
|
|
|
345 |
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bAll</td><td class="type type-param">Boolean</td><td class="attributes"></td><td class="default"></td><td class="description last">Indicate if the header and footer should be updated as well (true)</td></tr>
|
|
|
346 |
</tbody>
|
|
|
347 |
</table><dt id="FixedColumns#_fnCloneRight" class="private even"><a name="_fnCloneRight_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnCloneRight</a></span><span class="type-sig"><span class="type-brace">(</span> bAll:<span class="type-param">Boolean</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private even"><p class="description">Clone the right columns</p><dl class="details">
|
|
|
348 |
|
|
|
349 |
|
|
|
350 |
|
|
|
351 |
|
|
|
352 |
|
|
|
353 |
|
|
|
354 |
|
|
|
355 |
|
|
|
356 |
|
|
|
357 |
|
|
|
358 |
|
|
|
359 |
|
|
|
360 |
|
|
|
361 |
</dl><h5>Parameters:</h5>
|
|
|
362 |
|
|
|
363 |
<table class="params">
|
|
|
364 |
<thead>
|
|
|
365 |
<tr>
|
|
|
366 |
<th width="20"></th>
|
|
|
367 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
368 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
369 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
370 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
371 |
<th class="last bottom_border">Description</th>
|
|
|
372 |
</tr>
|
|
|
373 |
</thead>
|
|
|
374 |
|
|
|
375 |
<tbody>
|
|
|
376 |
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bAll</td><td class="type type-param">Boolean</td><td class="attributes"></td><td class="default"></td><td class="description last">Indicate if the header and footer should be updated as well (true)</td></tr>
|
|
|
377 |
</tbody>
|
|
|
378 |
</table><dt id="FixedColumns#_fnConstruct" class="private odd"><a name="_fnConstruct_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnConstruct</a></span><span class="type-sig"><span class="type-brace">(</span> oInit:<span class="type-param">Object</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private odd"><p class="description">Initialisation for FixedColumns</p><dl class="details">
|
|
|
379 |
|
|
|
380 |
|
|
|
381 |
|
|
|
382 |
|
|
|
383 |
|
|
|
384 |
|
|
|
385 |
|
|
|
386 |
|
|
|
387 |
|
|
|
388 |
|
|
|
389 |
|
|
|
390 |
|
|
|
391 |
|
|
|
392 |
</dl><h5>Parameters:</h5>
|
|
|
393 |
|
|
|
394 |
<table class="params">
|
|
|
395 |
<thead>
|
|
|
396 |
<tr>
|
|
|
397 |
<th width="20"></th>
|
|
|
398 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
399 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
400 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
401 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
402 |
<th class="last bottom_border">Description</th>
|
|
|
403 |
</tr>
|
|
|
404 |
</thead>
|
|
|
405 |
|
|
|
406 |
<tbody>
|
|
|
407 |
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oInit</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last">User settings for initialisation</td></tr>
|
|
|
408 |
</tbody>
|
|
|
409 |
</table><dt id="FixedColumns#_fnCopyLayout" class="private even"><a name="_fnCopyLayout_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnCopyLayout</a></span><span class="type-sig"><span class="type-brace">(</span> aoOriginal:<span class="type-param">Object</span>, aiColumns:<span class="type-param">Object</span> <span class="type-brace">)</span>:<span class="type-return">Array</span></span></span></dt><dd class="private even"><p class="description">Make a copy of the layout object for a header or footer element from DataTables. Note that
|
|
|
410 |
this method will clone the nodes in the layout object.</p><dl class="details">
|
|
|
411 |
|
|
|
412 |
|
|
|
413 |
|
|
|
414 |
|
|
|
415 |
|
|
|
416 |
|
|
|
417 |
|
|
|
418 |
|
|
|
419 |
|
|
|
420 |
|
|
|
421 |
|
|
|
422 |
|
|
|
423 |
|
|
|
424 |
</dl><h5>Parameters:</h5>
|
|
|
425 |
|
|
|
426 |
<table class="params">
|
|
|
427 |
<thead>
|
|
|
428 |
<tr>
|
|
|
429 |
<th width="20"></th>
|
|
|
430 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
431 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
432 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
433 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
434 |
<th class="last bottom_border">Description</th>
|
|
|
435 |
</tr>
|
|
|
436 |
</thead>
|
|
|
437 |
|
|
|
438 |
<tbody>
|
|
|
439 |
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">aoOriginal</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last">Layout array from DataTables (aoHeader or aoFooter)</td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">aiColumns</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last">Columns to copy</td></tr>
|
|
|
440 |
</tbody>
|
|
|
441 |
</table><h5>Returns:</h5><p class="returns">Copy of the layout array</p><dt id="FixedColumns#_fnDraw" class="private odd"><a name="_fnDraw_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnDraw</a></span><span class="type-sig"><span class="type-brace">(</span> bAll:<span class="type-param">Boolean</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private odd"><p class="description">Clone and position the fixed columns</p><dl class="details">
|
|
|
442 |
|
|
|
443 |
|
|
|
444 |
|
|
|
445 |
|
|
|
446 |
|
|
|
447 |
|
|
|
448 |
|
|
|
449 |
|
|
|
450 |
|
|
|
451 |
|
|
|
452 |
|
|
|
453 |
|
|
|
454 |
|
|
|
455 |
</dl><h5>Parameters:</h5>
|
|
|
456 |
|
|
|
457 |
<table class="params">
|
|
|
458 |
<thead>
|
|
|
459 |
<tr>
|
|
|
460 |
<th width="20"></th>
|
|
|
461 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
462 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
463 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
464 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
465 |
<th class="last bottom_border">Description</th>
|
|
|
466 |
</tr>
|
|
|
467 |
</thead>
|
|
|
468 |
|
|
|
469 |
<tbody>
|
|
|
470 |
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bAll</td><td class="type type-param">Boolean</td><td class="attributes"></td><td class="default"></td><td class="description last">Indicate if the header and footer should be updated as well (true)</td></tr>
|
|
|
471 |
</tbody>
|
|
|
472 |
</table><dt id="FixedColumns#_fnEqualiseHeights" class="private even"><a name="_fnEqualiseHeights_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnEqualiseHeights</a></span><span class="type-sig"><span class="type-brace">(</span> nodeName:<span class="type-param">String</span>, original:<span class="type-param">Node</span>, clone:<span class="type-param">Node</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private even"><p class="description">Equalise the heights of the rows in a given table node in a cross browser way</p><dl class="details">
|
|
|
473 |
|
|
|
474 |
|
|
|
475 |
|
|
|
476 |
|
|
|
477 |
|
|
|
478 |
|
|
|
479 |
|
|
|
480 |
|
|
|
481 |
|
|
|
482 |
|
|
|
483 |
|
|
|
484 |
|
|
|
485 |
|
|
|
486 |
</dl><h5>Parameters:</h5>
|
|
|
487 |
|
|
|
488 |
<table class="params">
|
|
|
489 |
<thead>
|
|
|
490 |
<tr>
|
|
|
491 |
<th width="20"></th>
|
|
|
492 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
493 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
494 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
495 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
496 |
<th class="last bottom_border">Description</th>
|
|
|
497 |
</tr>
|
|
|
498 |
</thead>
|
|
|
499 |
|
|
|
500 |
<tbody>
|
|
|
501 |
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nodeName</td><td class="type type-param">String</td><td class="attributes"></td><td class="default"></td><td class="description last">Node type - thead, tbody or tfoot</td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">original</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last">Original node to take the heights from</td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">clone</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last">Copy the heights to</td></tr>
|
|
|
502 |
</tbody>
|
|
|
503 |
</table><dt id="FixedColumns#_fnGetTrNodes" class="private odd"><a name="_fnGetTrNodes_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnGetTrNodes</a></span><span class="type-sig"><span class="type-brace">(</span> nIn:<span class="type-param">Node</span> <span class="type-brace">)</span>:<span class="type-return">Array</span></span></span></dt><dd class="private odd"><p class="description">From a given table node (THEAD etc), get a list of TR direct child elements</p><dl class="details">
|
|
|
504 |
|
|
|
505 |
|
|
|
506 |
|
|
|
507 |
|
|
|
508 |
|
|
|
509 |
|
|
|
510 |
|
|
|
511 |
|
|
|
512 |
|
|
|
513 |
|
|
|
514 |
|
|
|
515 |
|
|
|
516 |
|
|
|
517 |
</dl><h5>Parameters:</h5>
|
|
|
518 |
|
|
|
519 |
<table class="params">
|
|
|
520 |
<thead>
|
|
|
521 |
<tr>
|
|
|
522 |
<th width="20"></th>
|
|
|
523 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
524 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
525 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
526 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
527 |
<th class="last bottom_border">Description</th>
|
|
|
528 |
</tr>
|
|
|
529 |
</thead>
|
|
|
530 |
|
|
|
531 |
<tbody>
|
|
|
532 |
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nIn</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last">Table element to search for TR elements (THEAD, TBODY or TFOOT element)</td></tr>
|
|
|
533 |
</tbody>
|
|
|
534 |
</table><h5>Returns:</h5><p class="returns">List of TR elements found</p><dt id="FixedColumns#_fnGridHeight" class="private even"><a name="_fnGridHeight_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnGridHeight</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private even"><p class="description">Recalculate and set the height of the grid components used for positioning of the
|
|
|
535 |
FixedColumn display grid.</p><dl class="details">
|
|
|
536 |
|
|
|
537 |
|
|
|
538 |
|
|
|
539 |
|
|
|
540 |
|
|
|
541 |
|
|
|
542 |
|
|
|
543 |
|
|
|
544 |
|
|
|
545 |
|
|
|
546 |
|
|
|
547 |
|
|
|
548 |
|
|
|
549 |
</dl><dt id="FixedColumns#_fnGridLayout" class="private odd"><a name="_fnGridLayout_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnGridLayout</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private odd"><p class="description">Style and position the grid used for the FixedColumns layout based on the instance settings.
|
|
|
550 |
Specifically sLeftWidth ('fixed' or 'absolute'), iLeftWidth (px if fixed, % if absolute) and
|
|
|
551 |
there 'right' counterparts.</p><dl class="details">
|
|
|
552 |
|
|
|
553 |
|
|
|
554 |
|
|
|
555 |
|
|
|
556 |
|
|
|
557 |
|
|
|
558 |
|
|
|
559 |
|
|
|
560 |
|
|
|
561 |
|
|
|
562 |
|
|
|
563 |
|
|
|
564 |
|
|
|
565 |
</dl><dt id="FixedColumns#_fnGridSetup" class="private even"><a name="_fnGridSetup_details"></a><span class="type-attr"><private> </span><span class="type-name"><a>_fnGridSetup</a></span><span class="type-sig"><span class="type-brace">(</span> <span class="type-brace">)</span>:<span class="type-return">void</span></span></span></dt><dd class="private even"><p class="description">Set up the DOM for the fixed column. The way the layout works is to create a 1x3 grid
|
|
|
566 |
for the left column, the DataTable (for which we just reuse the scrolling element DataTable
|
|
|
567 |
puts into the DOM) and the right column. In each of he two fixed column elements there is a
|
|
|
568 |
grouping wrapper element and then a head, body and footer wrapper. In each of these we then
|
|
|
569 |
place the cloned header, body or footer tables. This effectively gives as 3x3 grid structure.</p><dl class="details">
|
|
|
570 |
|
|
|
571 |
|
|
|
572 |
|
|
|
573 |
|
|
|
574 |
|
|
|
575 |
|
|
|
576 |
|
|
|
577 |
|
|
|
578 |
|
|
|
579 |
|
|
|
580 |
|
|
|
581 |
|
|
|
582 |
|
|
|
583 |
</dl>
|
|
|
584 |
</dd></div><div class="doc_group"><a name="details_events"></a><h3 class="subsection-title">Events</h3>
|
|
|
585 |
<dl>
|
|
|
586 |
<dt id="FixedColumns#event:draw" class=" even"><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 class="description">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><dl class="details">
|
|
|
587 |
|
|
|
588 |
|
|
|
589 |
|
|
|
590 |
|
|
|
591 |
|
|
|
592 |
|
|
|
593 |
|
|
|
594 |
|
|
|
595 |
|
|
|
596 |
|
|
|
597 |
|
|
|
598 |
|
|
|
599 |
|
|
|
600 |
</dl><h5>Parameters:</h5>
|
|
|
601 |
|
|
|
602 |
<table class="params">
|
|
|
603 |
<thead>
|
|
|
604 |
<tr>
|
|
|
605 |
<th width="20"></th>
|
|
|
606 |
<th width="12%" class="bottom_border name">Name</th>
|
|
|
607 |
<th width="10%" class="bottom_border">Type</th>
|
|
|
608 |
<th width="10%" class="bottom_border">Attributes</th>
|
|
|
609 |
<th width="10%" class="bottom_border">Default</th>
|
|
|
610 |
<th class="last bottom_border">Description</th>
|
|
|
611 |
</tr>
|
|
|
612 |
</thead>
|
|
|
613 |
|
|
|
614 |
<tbody>
|
|
|
615 |
<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">jQuery event object</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">Event parameters from FixedColumns</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">Instance's object dom.clone.left for easy reference. This object contains references to the left fixed clumn column's nodes</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">Instance's object dom.clone.right for easy reference. This object contains references to the right fixed clumn column's nodes</td></tr>
|
|
|
616 |
</tbody>
|
|
|
617 |
</table>
|
|
|
618 |
</dd></div>
|
|
|
619 |
</div>
|
|
|
620 |
</div>
|
|
|
621 |
|
|
|
622 |
</div>
|
|
|
623 |
|
|
|
624 |
<div class="fw_footer">
|
|
|
625 |
FixedColumns: Copyright 2010-2011 Allan Jardine, all rights reserved<br>
|
|
|
626 |
|
|
|
627 |
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
|
|
|
628 |
26th Jun 2011 - 09:40
|
|
|
629 |
with the <a href="http://datatables.net/">DataTables</a> template.
|
|
|
630 |
</div>
|
|
|
631 |
</body>
|
|
|
632 |
</html>
|