webapp/resources/datatables-1.9.4/examples/api/tabs_and_scrolling.html

   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.datatables.net/favicon.ico" />
   6
   7                 <title>DataTables example</title>
   8                 <style type="text/css" title="currentStyle">
   9                         @import "../../media/css/demo_page.css";
  10                         @import "../../media/css/demo_table_jui.css";
  11                         @import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
  12                         .ui-tabs .ui-tabs-panel { padding: 10px }
  13                 </style>
  14                 <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
  15                 <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
  16                 <script type="text/javascript" language="javascript" src="../examples_support/jquery-ui-tabs.js"></script>
  17                 <script type="text/javascript" charset="utf-8">
  18                         $(document).ready(function() {
  19                                 $("#tabs").tabs( {
  20                                         "show": function(event, ui) {
  21                                                 var table = $.fn.dataTable.fnTables(true);
  22                                                 if ( table.length > 0 ) {
  23                                                         $(table).dataTable().fnAdjustColumnSizing();
  24                                                 }
  25                                         }
  26                                 } );
  27
  28                                 $('table.display').dataTable( {
  29                                         "sScrollY": "200px",
  30                                         "bScrollCollapse": true,
  31                                         "bPaginate": false,
  32                                         "bJQueryUI": true,
  33                                         "aoColumnDefs": [
  34                                                 { "sWidth": "10%", "aTargets": [ -1 ] }
  35                                         ]
  36                                 } );
  37                         } );
  38                 </script>
  39         </head>
  40         <body id="dt_example">
  41                 <div id="container">
  42                         <div class="full_width big">
  43                                 DataTables scrolling and jQuery UI tabs
  44                         </div>
  45
  46                         <h1>Preamble</h1>
  47                         <p>This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden (display:none) element when it is initialised). The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.</p>
  48                         <p>The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.</p>
  49
  50                         <h1>Live example</h1>
  51                         <div id="demo">
  52                                 <div id="tabs">
  53                                         <ul>
  54                                                 <li><a href="#tabs-1">Trident browsers</a></li>
  55                                                 <li><a href="#tabs-2">Gecko browsers</a></li>
  56                                         </ul>
  57
  58                                         <div id="tabs-1">
  59 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
  60         <thead>
  61                 <tr>
  62                         <th>Rendering engine</th>
  63                         <th>Browser</th>
  64                         <th>Platform(s)</th>
  65                         <th>Engine version</th>
  66                         <th>Grade</th>
  67                 </tr>
  68         </thead>
  69         <tfoot>
  70                 <tr>
  71                         <th>Rendering engine</th>
  72                         <th>Browser</th>
  73                         <th>Platform(s)</th>
  74                         <th>Engine version</th>
  75                         <th>Grade</th>
  76                 </tr>
  77         </tfoot>
  78         <tbody>
  79                 <tr class="odd gradeX">
  80                         <td>Trident</td>
  81                         <td>Internet
  82                                  Explorer 4.0</td>
  83                         <td>Win 95+</td>
  84                         <td class="center">4</td>
  85                         <td class="center">X</td>
  86                 </tr>
  87                 <tr class="odd gradeC">
  88                         <td>Trident</td>
  89                         <td>Internet
  90                                  Explorer 5.0</td>
  91                         <td>Win 95+</td>
  92                         <td class="center">5</td>
  93                         <td class="center">C</td>
  94                 </tr>
  95                 <tr class="odd gradeA">
  96                         <td>Trident</td>
  97                         <td>Internet
  98                                  Explorer 5.5</td>
  99                         <td>Win 95+</td>
 100                         <td class="center">5.5</td>
 101                         <td class="center">A</td>
 102                 </tr>
 103                 <tr class="odd gradeA">
 104                         <td>Trident</td>
 105                         <td>Internet
 106                                  Explorer 6</td>
 107                         <td>Win 98+</td>
 108                         <td class="center">6</td>
 109                         <td class="center">A</td>
 110                 </tr>
 111                 <tr class="odd gradeA">
 112                         <td>Trident</td>
 113                         <td>Internet Explorer 7</td>
 114                         <td>Win XP SP2+</td>
 115                         <td class="center">7</td>
 116                         <td class="center">A</td>
 117                 </tr>
 118                 <tr class="odd gradeA">
 119                         <td>Trident</td>
 120                         <td>AOL browser (AOL desktop)</td>
 121                         <td>Win XP</td>
 122                         <td class="center">6</td>
 123                         <td class="center">A</td>
 124                 </tr>
 125         <tbody>
 126 </table>
 127                                         </div>
 128
 129
 130                                         <div id="tabs-2">
 131 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
 132         <thead>
 133                 <tr>
 134                         <th>Rendering engine</th>
 135                         <th>Browser</th>
 136                         <th>Platform(s)</th>
 137                         <th>Engine version</th>
 138                         <th>Grade</th>
 139                 </tr>
 140         </thead>
 141         <tfoot>
 142                 <tr>
 143                         <th>Rendering engine</th>
 144                         <th>Browser</th>
 145                         <th>Platform(s)</th>
 146                         <th>Engine version</th>
 147                         <th>Grade</th>
 148                 </tr>
 149         </tfoot>
 150         <tbody>
 151                 <tr class="gradeA">
 152                         <td>Gecko</td>
 153                         <td>Firefox 1.0</td>
 154                         <td>Win 98+ / OSX.2+</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>Firefox 1.5</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>Firefox 2.0</td>
 168                         <td>Win 98+ / OSX.2+</td>
 169                         <td class="center">1.8</td>
 170                         <td class="center">A</td>
 171                 </tr>
 172                 <tr class="gradeA">
 173                         <td>Gecko</td>
 174                         <td>Firefox 3.0</td>
 175                         <td>Win 2k+ / OSX.3+</td>
 176                         <td class="center">1.9</td>
 177                         <td class="center">A</td>
 178                 </tr>
 179                 <tr class="gradeA">
 180                         <td>Gecko</td>
 181                         <td>Camino 1.0</td>
 182                         <td>OSX.2+</td>
 183                         <td class="center">1.8</td>
 184                         <td class="center">A</td>
 185                 </tr>
 186                 <tr class="gradeA">
 187                         <td>Gecko</td>
 188                         <td>Camino 1.5</td>
 189                         <td>OSX.3+</td>
 190                         <td class="center">1.8</td>
 191                         <td class="center">A</td>
 192                 </tr>
 193                 <tr class="gradeA">
 194                         <td>Gecko</td>
 195                         <td>Netscape 7.2</td>
 196                         <td>Win 95+ / Mac OS 8.6-9.2</td>
 197                         <td class="center">1.7</td>
 198                         <td class="center">A</td>
 199                 </tr>
 200                 <tr class="gradeA">
 201                         <td>Gecko</td>
 202                         <td>Netscape Browser 8</td>
 203                         <td>Win 98SE+</td>
 204                         <td class="center">1.7</td>
 205                         <td class="center">A</td>
 206                 </tr>
 207                 <tr class="gradeA">
 208                         <td>Gecko</td>
 209                         <td>Netscape Navigator 9</td>
 210                         <td>Win 98+ / OSX.2+</td>
 211                         <td class="center">1.8</td>
 212                         <td class="center">A</td>
 213                 </tr>
 214                 <tr class="gradeA">
 215                         <td>Gecko</td>
 216                         <td>Mozilla 1.0</td>
 217                         <td>Win 95+ / OSX.1+</td>
 218                         <td class="center">1</td>
 219                         <td class="center">A</td>
 220                 </tr>
 221                 <tr class="gradeA">
 222                         <td>Gecko</td>
 223                         <td>Mozilla 1.1</td>
 224                         <td>Win 95+ / OSX.1+</td>
 225                         <td class="center">1.1</td>
 226                         <td class="center">A</td>
 227                 </tr>
 228                 <tr class="gradeA">
 229                         <td>Gecko</td>
 230                         <td>Mozilla 1.2</td>
 231                         <td>Win 95+ / OSX.1+</td>
 232                         <td class="center">1.2</td>
 233                         <td class="center">A</td>
 234                 </tr>
 235                 <tr class="gradeA">
 236                         <td>Gecko</td>
 237                         <td>Mozilla 1.3</td>
 238                         <td>Win 95+ / OSX.1+</td>
 239                         <td class="center">1.3</td>
 240                         <td class="center">A</td>
 241                 </tr>
 242                 <tr class="gradeA">
 243                         <td>Gecko</td>
 244                         <td>Mozilla 1.4</td>
 245                         <td>Win 95+ / OSX.1+</td>
 246                         <td class="center">1.4</td>
 247                         <td class="center">A</td>
 248                 </tr>
 249                 <tr class="gradeA">
 250                         <td>Gecko</td>
 251                         <td>Mozilla 1.5</td>
 252                         <td>Win 95+ / OSX.1+</td>
 253                         <td class="center">1.5</td>
 254                         <td class="center">A</td>
 255                 </tr>
 256                 <tr class="gradeA">
 257                         <td>Gecko</td>
 258                         <td>Mozilla 1.6</td>
 259                         <td>Win 95+ / OSX.1+</td>
 260                         <td class="center">1.6</td>
 261                         <td class="center">A</td>
 262                 </tr>
 263                 <tr class="gradeA">
 264                         <td>Gecko</td>
 265                         <td>Mozilla 1.7</td>
 266                         <td>Win 98+ / OSX.1+</td>
 267                         <td class="center">1.7</td>
 268                         <td class="center">A</td>
 269                 </tr>
 270                 <tr class="gradeA">
 271                         <td>Gecko</td>
 272                         <td>Mozilla 1.8</td>
 273                         <td>Win 98+ / OSX.1+</td>
 274                         <td class="center">1.8</td>
 275                         <td class="center">A</td>
 276                 </tr>
 277                 <tr class="gradeA">
 278                         <td>Gecko</td>
 279                         <td>Seamonkey 1.1</td>
 280                         <td>Win 98+ / OSX.2+</td>
 281                         <td class="center">1.8</td>
 282                         <td class="center">A</td>
 283                 </tr>
 284                 <tr class="gradeA">
 285                         <td>Gecko</td>
 286                         <td>Epiphany 2.20</td>
 287                         <td>Gnome</td>
 288                         <td class="center">1.8</td>
 289                         <td class="center">A</td>
 290                 </tr>
 291         </tbody>
 292 </table>
 293                                         </div>
 294                                 </div>
 295                         </div>
 296                         <div class="spacer"></div>
 297
 298
 299                         <h1>Initialisation code</h1>
 300                         <pre class="brush: js;">$(document).ready(function() {
 301         $("#tabs").tabs( {
 302                 "show": function(event, ui) {
 303                         var table = $.fn.dataTable.fnTables(true);
 304                         if ( table.length &gt; 0 ) {
 305                                 $(table).dataTable().fnAdjustColumnSizing();
 306                         }
 307                 }
 308         } );
 309
 310         $('table.display').dataTable( {
 311                 "sScrollY": "200px",
 312                 "bScrollCollapse": true,
 313                 "bPaginate": false,
 314                 "bJQueryUI": true,
 315                 "aoColumnDefs": [
 316                         { "sWidth": "10%", "aTargets": [ -1 ] }
 317                 ]
 318         } );
 319 } );</pre>
 320                         <style type="text/css">
 321                                 @import "../examples_support/syntax/css/shCore.css";
 322                         </style>
 323                         <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 324
 325
 326                         <h1>Other examples</h1>
 327                         <div class="demo_links">
 328                                 <h2>Basic initialisation</h2>
 329                                 <ul>
 330                                         <li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
 331                                         <li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
 332                                         <li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
 333                                         <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
 334                                         <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
 335                                         <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 336                                         <li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 337                                         <li><a href="../basic_init/dom.html">DOM positioning</a></li>
 338                                         <li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 339                                         <li><a href="../basic_init/state_save.html">State saving</a></li>
 340                                         <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 341                                         <li>Scrolling: <br>
 342                                                 <a href="../basic_init/scroll_x.html">Horizontal</a> /
 343                                                 <a href="../basic_init/scroll_y.html">Vertical</a> /
 344                                                 <a href="../basic_init/scroll_xy.html">Both</a> /
 345                                                 <a href="../basic_init/scroll_y_theme.html">Themed</a> /
 346                                                 <a href="../basic_init/scroll_y_infinite.html">Infinite</a>
 347                                         </li>
 348                                         <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
 349                                         <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
 350                                 </ul>
 351
 352                                 <h2>Advanced initialisation</h2>
 353                                 <ul>
 354                                         <li>Events: <br>
 355                                                 <a href="../advanced_init/events_live.html">Live events</a> /
 356                                                 <a href="../advanced_init/events_pre_init.html">Pre-init</a> /
 357                                                 <a href="../advanced_init/events_post_init.html">Post-init</a>
 358                                         </li>
 359                                         <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 360                                         <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
 361                                         <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
 362                                         <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
 363                                         <li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
 364                                         <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
 365                                         <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
 366                                         <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
 367                                         <li><a href="../advanced_init/row_callback.html">Row callback</a></li>
 368                                         <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 369                                         <li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 370                                         <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
 371                                         <li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
 372                                         <li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
 373                                         <li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 374                                 </ul>
 375
 376                                 <h2>API</h2>
 377                                 <ul>
 378                                         <li><a href="../api/add_row.html">Dynamically add a new row</a></li>
 379                                         <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
 380                                         <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
 381                                         <li><a href="../api/highlight.html">Highlight rows and columns</a></li>
 382                                         <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
 383                                         <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
 384                                         <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
 385                                         <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
 386                                         <li><a href="../api/form.html">Submit form with elements in table</a></li>
 387                                         <li><a href="../api/counter_column.html">Index column (static number column)</a></li>
 388                                         <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
 389                                         <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
 390                                         <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
 391                                         <li><a href="../api/regex.html">Regular expression filtering</a></li>
 392                                 </ul>
 393                         </div>
 394
 395                         <div class="demo_links">
 396                                 <h2>Data sources</h2>
 397                                 <ul>
 398                                         <li><a href="../data_sources/dom.html">DOM</a></li>
 399                                         <li><a href="../data_sources/js_array.html">Javascript array</a></li>
 400                                         <li><a href="../data_sources/ajax.html">Ajax source</a></li>
 401                                         <li><a href="../data_sources/server_side.html">Server side processing</a></li>
 402                                 </ul>
 403
 404                                 <h2>Server-side processing</h2>
 405                                 <ul>
 406                                         <li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
 407                                         <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
 408                                         <li><a href="../server_side/post.html">Use HTTP POST</a></li>
 409                                         <li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
 410                                         <li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
 411                                         <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
 412                                         <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
 413                                         <li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 414                                         <li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 415                                         <li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
 416                                         <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 417                                 </ul>
 418
 419                                 <h2>Ajax data source</h2>
 420                                 <ul>
 421                                         <li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
 422                                         <li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
 423                                         <li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
 424                                         <li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
 425                                         <li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
 426                                         <li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
 427                                         <li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
 428                                 </ul>
 429
 430                                 <h2>Plug-ins</h2>
 431                                 <ul>
 432                                         <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
 433                                         <li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
 434                                         <li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
 435                                         <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
 436                                         <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
 437                                         <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
 438                                         <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
 439                                 </ul>
 440                         </div>
 441
 442
 443                         <div id="footer" class="clear" style="text-align:center;">
 444                                 <p>
 445                                         Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
 446                                         Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
 447                                 </p>
 448
 449                                 <span style="font-size:10px;">
 450                                         DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
 451                                         DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
 452                                 </span>
 453                         </div>
 454                 </div>
 455         </body>
 456 </html>