| 
0
 | 
     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 		<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": "150%",
 | 
| 
 | 
    20 					"bScrollCollapse": true
 | 
| 
 | 
    21 				} );
 | 
| 
 | 
    22 				new FixedColumns( oTable, {
 | 
| 
 | 
    23 					"iLeftColumns": 0,
 | 
| 
 | 
    24 					"iRightColumns": 1
 | 
| 
 | 
    25 				} );
 | 
| 
 | 
    26 			} );
 | 
| 
 | 
    27 		</script>
 | 
| 
 | 
    28 	</head>
 | 
| 
 | 
    29 	<body id="dt_example">
 | 
| 
 | 
    30 		<div id="container">
 | 
| 
 | 
    31 			<div class="full_width big">
 | 
| 
 | 
    32 				FixedColumns example - right hand column only fixed
 | 
| 
 | 
    33 			</div>
 | 
| 
 | 
    34 			
 | 
| 
 | 
    35 			<h1>Preamble</h1>
 | 
| 
 | 
    36 			<p>FixedColumns has the ability to freeze columns on both the left and right hand sides of the table. By default it will fix the first column on the left, but using the initialisation parameters <i>iLeftColumns</i> and <i>iRightColumns</i> you can alter this to fix the columns on the right as well. This example shows a single column fixed in place, in this case the right most column.</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": 0,
 | 
| 
 | 
   478 		"iRightColumns": 1
 | 
| 
 | 
   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 © Allan Jardine 2011.<br>
 | 
| 
 | 
   516 				</span>
 | 
| 
 | 
   517 			</div>
 | 
| 
 | 
   518 		</div>
 | 
| 
 | 
   519 	</body>
 | 
| 
 | 
   520 </html> |