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