/[projects]/misc/horsensspejder-web/jquery/DataTables-1.9.4/extras/FixedColumns/two_columns.html
ViewVC logotype

Annotation of /misc/horsensspejder-web/jquery/DataTables-1.9.4/extras/FixedColumns/two_columns.html

Parent Directory Parent Directory | Revision Log Revision Log

Revision 2125 - (hide annotations) (download) (as text)
Wed Mar 12 19:30:05 2014 UTC (10 years, 4 months ago) by torben
File MIME type: text/html
File size: 13032 byte(s) 
initial import
1 torben 2125 <!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     <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
6    
7     <title>FixedColumns example</title>
8     <style type="text/css" title="currentStyle">
9     @import "../../media/css/demo_page.css";
10     @import "../../media/css/demo_table.css";
11     </style>
12     <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
13     <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
14     <script type="text/javascript" charset="utf-8" src="media/js/FixedColumns.js"></script>
15     <script type="text/javascript" charset="utf-8">
16     $(document).ready( function () {
17     var oTable = $('#example').dataTable( {
18     "sScrollX": "100%",
19     "sScrollXInner": "140%",
20     "bScrollCollapse": true
21     } );
22     new FixedColumns( oTable, {
23     "iLeftColumns": 2,
24     "iLeftWidth": 350
25     } );
26     } );
27     </script>
28     </head>
29     <body id="dt_example">
30     <div id="container">
31     <div class="full_width big">
32     FixedColumns example - two columns fixed
33     </div>
34    
35     <h1>Preamble</h1>
36     <p>FixedColumns allows more than one column to be frozen into place using the <i>iLeftColumns</i> parameter. The example below shows two columns fixed.</p>
37    
38     <h1>Live example</h1>
39     <div id="demo">
40     <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
41     <thead>
42     <tr>
43     <th>Rendering engine</th>
44     <th>Browser</th>
45     <th>Platform(s)</th>
46     <th>Engine version</th>
47     <th>CSS grade</th>
48     </tr>
49     </thead>
50     <tbody>
51     <tr class="gradeX">
52     <td>Trident</td>
53     <td>Internet
54     Explorer 4.0</td>
55     <td>Win 95+</td>
56     <td class="center">4</td>
57     <td class="center">X</td>
58     </tr>
59     <tr class="gradeC">
60     <td>Trident</td>
61     <td>Internet
62     Explorer 5.0</td>
63     <td>Win 95+</td>
64     <td class="center">5</td>
65     <td class="center">C</td>
66     </tr>
67     <tr class="gradeA">
68     <td>Trident</td>
69     <td>Internet
70     Explorer 5.5</td>
71     <td>Win 95+</td>
72     <td class="center">5.5</td>
73     <td class="center">A</td>
74     </tr>
75     <tr class="gradeA">
76     <td>Trident</td>
77     <td>Internet
78     Explorer 6</td>
79     <td>Win 98+</td>
80     <td class="center">6</td>
81     <td class="center">A</td>
82     </tr>
83     <tr class="gradeA">
84     <td>Trident</td>
85     <td>Internet Explorer 7</td>
86     <td>Win XP SP2+</td>
87     <td class="center">7</td>
88     <td class="center">A</td>
89     </tr>
90     <tr class="gradeA">
91     <td>Trident</td>
92     <td>AOL browser (AOL desktop)</td>
93     <td>Win XP</td>
94     <td class="center">6</td>
95     <td class="center">A</td>
96     </tr>
97     <tr class="gradeA">
98     <td>Gecko</td>
99     <td>Firefox 1.0</td>
100     <td>Win 98+ / OSX.2+</td>
101     <td class="center">1.7</td>
102     <td class="center">A</td>
103     </tr>
104     <tr class="gradeA">
105     <td>Gecko</td>
106     <td>Firefox 1.5</td>
107     <td>Win 98+ / OSX.2+</td>
108     <td class="center">1.8</td>
109     <td class="center">A</td>
110     </tr>
111     <tr class="gradeA">
112     <td>Gecko</td>
113     <td>Firefox 2.0</td>
114     <td>Win 98+ / OSX.2+</td>
115     <td class="center">1.8</td>
116     <td class="center">A</td>
117     </tr>
118     <tr class="gradeA">
119     <td>Gecko</td>
120     <td>Firefox 3.0</td>
121     <td>Win 2k+ / OSX.3+</td>
122     <td class="center">1.9</td>
123     <td class="center">A</td>
124     </tr>
125     <tr class="gradeA">
126     <td>Gecko</td>
127     <td>Camino 1.0</td>
128     <td>OSX.2+</td>
129     <td class="center">1.8</td>
130     <td class="center">A</td>
131     </tr>
132     <tr class="gradeA">
133     <td>Gecko</td>
134     <td>Camino 1.5</td>
135     <td>OSX.3+</td>
136     <td class="center">1.8</td>
137     <td class="center">A</td>
138     </tr>
139     <tr class="gradeA">
140     <td>Gecko</td>
141     <td>Netscape 7.2</td>
142     <td>Win 95+ / Mac OS 8.6-9.2</td>
143     <td class="center">1.7</td>
144     <td class="center">A</td>
145     </tr>
146     <tr class="gradeA">
147     <td>Gecko</td>
148     <td>Netscape Browser 8</td>
149     <td>Win 98SE+</td>
150     <td class="center">1.7</td>
151     <td class="center">A</td>
152     </tr>
153     <tr class="gradeA">
154     <td>Gecko</td>
155     <td>Netscape Navigator 9</td>
156     <td>Win 98+ / OSX.2+</td>
157     <td class="center">1.8</td>
158     <td class="center">A</td>
159     </tr>
160     <tr class="gradeA">
161     <td>Gecko</td>
162     <td>Mozilla 1.0</td>
163     <td>Win 95+ / OSX.1+</td>
164     <td class="center">1</td>
165     <td class="center">A</td>
166     </tr>
167     <tr class="gradeA">
168     <td>Gecko</td>
169     <td>Mozilla 1.1</td>
170     <td>Win 95+ / OSX.1+</td>
171     <td class="center">1.1</td>
172     <td class="center">A</td>
173     </tr>
174     <tr class="gradeA">
175     <td>Gecko</td>
176     <td>Mozilla 1.2</td>
177     <td>Win 95+ / OSX.1+</td>
178     <td class="center">1.2</td>
179     <td class="center">A</td>
180     </tr>
181     <tr class="gradeA">
182     <td>Gecko</td>
183     <td>Mozilla 1.3</td>
184     <td>Win 95+ / OSX.1+</td>
185     <td class="center">1.3</td>
186     <td class="center">A</td>
187     </tr>
188     <tr class="gradeA">
189     <td>Gecko</td>
190     <td>Mozilla 1.4</td>
191     <td>Win 95+ / OSX.1+</td>
192     <td class="center">1.4</td>
193     <td class="center">A</td>
194     </tr>
195     <tr class="gradeA">
196     <td>Gecko</td>
197     <td>Mozilla 1.5</td>
198     <td>Win 95+ / OSX.1+</td>
199     <td class="center">1.5</td>
200     <td class="center">A</td>
201     </tr>
202     <tr class="gradeA">
203     <td>Gecko</td>
204     <td>Mozilla 1.6</td>
205     <td>Win 95+ / OSX.1+</td>
206     <td class="center">1.6</td>
207     <td class="center">A</td>
208     </tr>
209     <tr class="gradeA">
210     <td>Gecko</td>
211     <td>Mozilla 1.7</td>
212     <td>Win 98+ / OSX.1+</td>
213     <td class="center">1.7</td>
214     <td class="center">A</td>
215     </tr>
216     <tr class="gradeA">
217     <td>Gecko</td>
218     <td>Mozilla 1.8</td>
219     <td>Win 98+ / OSX.1+</td>
220     <td class="center">1.8</td>
221     <td class="center">A</td>
222     </tr>
223     <tr class="gradeA">
224     <td>Gecko</td>
225     <td>Seamonkey 1.1</td>
226     <td>Win 98+ / OSX.2+</td>
227     <td class="center">1.8</td>
228     <td class="center">A</td>
229     </tr>
230     <tr class="gradeA">
231     <td>Gecko</td>
232     <td>Epiphany 2.20</td>
233     <td>Gnome</td>
234     <td class="center">1.8</td>
235     <td class="center">A</td>
236     </tr>
237     <tr class="gradeA">
238     <td>Webkit</td>
239     <td>Safari 1.2</td>
240     <td>OSX.3</td>
241     <td class="center">125.5</td>
242     <td class="center">A</td>
243     </tr>
244     <tr class="gradeA">
245     <td>Webkit</td>
246     <td>Safari 1.3</td>
247     <td>OSX.3</td>
248     <td class="center">312.8</td>
249     <td class="center">A</td>
250     </tr>
251     <tr class="gradeA">
252     <td>Webkit</td>
253     <td>Safari 2.0</td>
254     <td>OSX.4+</td>
255     <td class="center">419.3</td>
256     <td class="center">A</td>
257     </tr>
258     <tr class="gradeA">
259     <td>Webkit</td>
260     <td>Safari 3.0</td>
261     <td>OSX.4+</td>
262     <td class="center">522.1</td>
263     <td class="center">A</td>
264     </tr>
265     <tr class="gradeA">
266     <td>Webkit</td>
267     <td>OmniWeb 5.5</td>
268     <td>OSX.4+</td>
269     <td class="center">420</td>
270     <td class="center">A</td>
271     </tr>
272     <tr class="gradeA">
273     <td>Webkit</td>
274     <td>iPod Touch / iPhone</td>
275     <td>iPod</td>
276     <td class="center">420.1</td>
277     <td class="center">A</td>
278     </tr>
279     <tr class="gradeA">
280     <td>Webkit</td>
281     <td>S60</td>
282     <td>S60</td>
283     <td class="center">413</td>
284     <td class="center">A</td>
285     </tr>
286     <tr class="gradeA">
287     <td>Presto</td>
288     <td>Opera 7.0</td>
289     <td>Win 95+ / OSX.1+</td>
290     <td class="center">-</td>
291     <td class="center">A</td>
292     </tr>
293     <tr class="gradeA">
294     <td>Presto</td>
295     <td>Opera 7.5</td>
296     <td>Win 95+ / OSX.2+</td>
297     <td class="center">-</td>
298     <td class="center">A</td>
299     </tr>
300     <tr class="gradeA">
301     <td>Presto</td>
302     <td>Opera 8.0</td>
303     <td>Win 95+ / OSX.2+</td>
304     <td class="center">-</td>
305     <td class="center">A</td>
306     </tr>
307     <tr class="gradeA">
308     <td>Presto</td>
309     <td>Opera 8.5</td>
310     <td>Win 95+ / OSX.2+</td>
311     <td class="center">-</td>
312     <td class="center">A</td>
313     </tr>
314     <tr class="gradeA">
315     <td>Presto</td>
316     <td>Opera 9.0</td>
317     <td>Win 95+ / OSX.3+</td>
318     <td class="center">-</td>
319     <td class="center">A</td>
320     </tr>
321     <tr class="gradeA">
322     <td>Presto</td>
323     <td>Opera 9.2</td>
324     <td>Win 88+ / OSX.3+</td>
325     <td class="center">-</td>
326     <td class="center">A</td>
327     </tr>
328     <tr class="gradeA">
329     <td>Presto</td>
330     <td>Opera 9.5</td>
331     <td>Win 88+ / OSX.3+</td>
332     <td class="center">-</td>
333     <td class="center">A</td>
334     </tr>
335     <tr class="gradeA">
336     <td>Presto</td>
337     <td>Opera for Wii</td>
338     <td>Wii</td>
339     <td class="center">-</td>
340     <td class="center">A</td>
341     </tr>
342     <tr class="gradeA">
343     <td>Presto</td>
344     <td>Nokia N800</td>
345     <td>N800</td>
346     <td class="center">-</td>
347     <td class="center">A</td>
348     </tr>
349     <tr class="gradeA">
350     <td>Presto</td>
351     <td>Nintendo DS browser</td>
352     <td>Nintendo DS</td>
353     <td class="center">8.5</td>
354     <td class="center">C/A</td>
355     </tr>
356     <tr class="gradeC">
357     <td>KHTML</td>
358     <td>Konqureror 3.1</td>
359     <td>KDE 3.1</td>
360     <td class="center">3.1</td>
361     <td class="center">C</td>
362     </tr>
363     <tr class="gradeA">
364     <td>KHTML</td>
365     <td>Konqureror 3.3</td>
366     <td>KDE 3.3</td>
367     <td class="center">3.3</td>
368     <td class="center">A</td>
369     </tr>
370     <tr class="gradeA">
371     <td>KHTML</td>
372     <td>Konqureror 3.5</td>
373     <td>KDE 3.5</td>
374     <td class="center">3.5</td>
375     <td class="center">A</td>
376     </tr>
377     <tr class="gradeX">
378     <td>Tasman</td>
379     <td>Internet Explorer 4.5</td>
380     <td>Mac OS 8-9</td>
381     <td class="center">-</td>
382     <td class="center">X</td>
383     </tr>
384     <tr class="gradeC">
385     <td>Tasman</td>
386     <td>Internet Explorer 5.1</td>
387     <td>Mac OS 7.6-9</td>
388     <td class="center">1</td>
389     <td class="center">C</td>
390     </tr>
391     <tr class="gradeC">
392     <td>Tasman</td>
393     <td>Internet Explorer 5.2</td>
394     <td>Mac OS 8-X</td>
395     <td class="center">1</td>
396     <td class="center">C</td>
397     </tr>
398     <tr class="gradeA">
399     <td>Misc</td>
400     <td>NetFront 3.1</td>
401     <td>Embedded devices</td>
402     <td class="center">-</td>
403     <td class="center">C</td>
404     </tr>
405     <tr class="gradeA">
406     <td>Misc</td>
407     <td>NetFront 3.4</td>
408     <td>Embedded devices</td>
409     <td class="center">-</td>
410     <td class="center">A</td>
411     </tr>
412     <tr class="gradeX">
413     <td>Misc</td>
414     <td>Dillo 0.8</td>
415     <td>Embedded devices</td>
416     <td class="center">-</td>
417     <td class="center">X</td>
418     </tr>
419     <tr class="gradeX">
420     <td>Misc</td>
421     <td>Links</td>
422     <td>Text only</td>
423     <td class="center">-</td>
424     <td class="center">X</td>
425     </tr>
426     <tr class="gradeX">
427     <td>Misc</td>
428     <td>Lynx</td>
429     <td>Text only</td>
430     <td class="center">-</td>
431     <td class="center">X</td>
432     </tr>
433     <tr class="gradeC">
434     <td>Misc</td>
435     <td>IE Mobile</td>
436     <td>Windows Mobile 6</td>
437     <td class="center">-</td>
438     <td class="center">C</td>
439     </tr>
440     <tr class="gradeC">
441     <td>Misc</td>
442     <td>PSP browser</td>
443     <td>PSP</td>
444     <td class="center">-</td>
445     <td class="center">C</td>
446     </tr>
447     <tr class="gradeU">
448     <td>Other browsers</td>
449     <td>All others</td>
450     <td>-</td>
451     <td class="center">-</td>
452     <td class="center">U</td>
453     </tr>
454     </tbody>
455     <tfoot>
456     <tr>
457     <th>Rendering engine</th>
458     <th>Browser</th>
459     <th>Platform(s)</th>
460     <th>Engine version</th>
461     <th>CSS grade</th>
462     </tr>
463     </tfoot>
464     </table>
465     </div>
466     <div class="spacer"></div>
467    
468    
469     <h1>Initialisation code</h1>
470     <pre>$(document).ready( function () {
471     var oTable = $('#example').dataTable( {
472     "sScrollX": "100%",
473     "sScrollXInner": "150%",
474     "bScrollCollapse": true
475     } );
476     new FixedColumns( oTable, {
477     "iLeftColumns": 2,
478     "iLeftWidth": 350
479     } );
480     } );</pre>
481    
482    
483     <h1>Documentation</h1>
484     <ul>
485     <li><a href="http://datatables.net/extras/fixedcolumns">Usage</a></li>
486     <li><a href="http://datatables.net/docs/FixedColumns">API / parameters</a></li>
487     </ul>
488    
489     <h1>Basic examples</h1>
490     <ul>
491     <li><a href="index.html">Basic demo of FixedColumns with zero initialisation</a></li>
492     <li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
493     <li><a href="index_column.html">Index column attached to side of the table</a></li>
494     <li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
495     <li><a href="two_columns.html">Two columns fixed in place</a></li>
496     <li><a href="right_column.html">Fix the right column in place</a></li>
497     <li><a href="css_size.html">Speeding up row height matching with CSS</a></li>
498     <li><a href="themed.html">jQuery UI themed table with FixedColumns</a></li>
499     </ul>
500    
501     <h1>Advanced examples</h1>
502     <ul>
503     <li><a href="rowspan.html">Using ROWSPAN with FixedColumns</a></li>
504     <li><a href="server-side-processing.html">Server-side processing with FixedColumns</a></li>
505     <li><a href="col_filter.html">Individual column filtering</a></li>
506     <li><a href="scale_fixed.html">Setting the fixed column width and resizing the table</a></li>
507     <li><a href="scale_relative.html">Setting the fixed column width with relative sizing</a></li>
508     <li><a href="row_grouping_height.html">Row grouping by grouping like rows in the fixed column</a></li>
509     <li><a href="row_grouping.html">Row grouping by inserting a grouping row</a></li>
510     <ul>
511    
512    
513     <div id="footer" style="text-align:center;">
514     <span style="font-size:10px;">
515     FixedColumns and DataTables &copy; Allan Jardine 2011.<br>
516     </span>
517     </div>
518     </div>
519     </body>
520     </html>
  ViewVC Help
Powered by ViewVC 1.1.20