webapp/resources/datatables-1.9.4/extras/ColVis/two_tables_identical.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.sprymedia.co.uk/media/images/favicon.ico">
   6
   7                 <title>ColVis example</title>
   8                 <style type="text/css" title="currentStyle">
   9                         @import "../../media/css/demo_page.css";
  10                         @import "../../media/css/demo_table.css";
  11                         @import "media/css/ColVis.css";
  12                 </style>
  13                 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
  14                 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
  15                 <script type="text/javascript" charset="utf-8" src="media/js/ColVis.js"></script>
  16                 <script type="text/javascript" charset="utf-8">
  17                         $(document).ready( function () {
  18                                 var oTables = $('table').dataTable( {
  19                                         "sDom": 'lfrtip'
  20                                 } );
  21
  22                                 var oColVis = new ColVis( oTables.fnSettings(), {
  23                                         "fnStateChange": function ( iColumn, bVisible ) {
  24                                                 var jqTables = $('table:not(#example)'); // ColVis will do #example
  25                                                 for ( var i=0, iLen=jqTables.length ; i<iLen ; i++ ) {
  26                                                         $(jqTables[i]).dataTable().fnSetColumnVis( iColumn, bVisible );
  27                                                 }
  28                                         }
  29                                 } );
  30
  31                                 document.getElementById('buttonInsert').appendChild(oColVis.dom.wrapper);
  32                                 oColVis.fnRebuild();
  33                         } );
  34                 </script>
  35         </head>
  36         <body id="dt_example">
  37                 <div id="container">
  38                         <div class="full_width big">
  39                                 ColVis example - two tables with shared control
  40                         </div>
  41
  42                         <h1>Preamble</h1>
  43                         <p>This example shows how the API that ColVis presents can be used to control the column visibility of two tables with a single instance of ColVis. The result is that changing a button state will effect all tables on the page. This can be useful when looking at multiple tables which have the same column structure.</p>
  44
  45                         <h1>Live example</h1>
  46                         <form>
  47                         <div id="demo">
  48 <div id="buttonInsert">
  49
  50 </div>
  51 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
  52         <thead>
  53                 <tr>
  54                         <th>Rendering engine</th>
  55                         <th>Browser</th>
  56                         <th>Platform(s)</th>
  57                         <th>Engine version</th>
  58                         <th>CSS grade</th>
  59                 </tr>
  60         </thead>
  61         <tfoot>
  62                 <tr>
  63                         <th>Rendering engine</th>
  64                         <th>Browser</th>
  65                         <th>Platform(s)</th>
  66                         <th>Engine version</th>
  67                         <th>CSS grade</th>
  68                 </tr>
  69         </tfoot>
  70         <tbody>
  71                 <tr class="odd_gradeX">
  72                         <td>Trident</td>
  73                         <td>Internet Explorer 4.0</td>
  74                         <td>Win 95+ (Entity: &amp;)</td>
  75                         <td class="center">4</td>
  76                         <td class="center">X</td>
  77                 </tr>
  78                 <tr class="even_gradeC">
  79                         <td>Trident</td>
  80                         <td>Internet Explorer 5.0</td>
  81                         <td>Win 95+</td>
  82                         <td class="center">5</td>
  83                         <td class="center">C</td>
  84                 </tr>
  85                 <tr class="odd_gradeA">
  86                         <td>Trident</td>
  87                         <td>Internet Explorer 5.5</td>
  88                         <td>Win 95+</td>
  89                         <td class="center">5.5</td>
  90                         <td class="center">A</td>
  91                 </tr>
  92                 <tr class="even_gradeA">
  93                         <td>Trident</td>
  94                         <td>Internet Explorer 6</td>
  95                         <td>Win 98+</td>
  96                         <td class="center">6</td>
  97                         <td class="center">A</td>
  98                 </tr>
  99                 <tr class="odd_gradeA">
 100                         <td>Trident</td>
 101                         <td>Internet Explorer 7</td>
 102                         <td>Win XP SP2+</td>
 103                         <td class="center">7</td>
 104                         <td class="center">A</td>
 105                 </tr>
 106                 <tr class="even_gradeA">
 107                         <td>Trident</td>
 108                         <td>AOL browser (AOL desktop)</td>
 109                         <td>Win XP</td>
 110                         <td class="center">6</td>
 111                         <td class="center">A</td>
 112                 </tr>
 113         </tbody>
 114 </table>
 115
 116 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
 117         <thead>
 118                 <tr>
 119                         <th>Rendering engine</th>
 120                         <th>Browser</th>
 121                         <th>Platform(s)</th>
 122                         <th>Engine version</th>
 123                         <th>CSS grade</th>
 124                 </tr>
 125         </thead>
 126         <tfoot>
 127                 <tr>
 128                         <th>Rendering engine</th>
 129                         <th>Browser</th>
 130                         <th>Platform(s)</th>
 131                         <th>Engine version</th>
 132                         <th>CSS grade</th>
 133                 </tr>
 134         </tfoot>
 135         <tbody>
 136                 <tr class="odd_gradeA">
 137                         <td>Gecko (UTF-8: $¢€)</td>
 138                         <td>Firefox 1.0</td>
 139                         <td>Win 98+ / OSX.2+</td>
 140                         <td class="center">1.7</td>
 141                         <td class="center">A</td>
 142                 </tr>
 143                 <tr class="even_gradeA">
 144                         <td>Gecko</td>
 145                         <td>Firefox 1.5</td>
 146                         <td>Win 98+ / OSX.2+</td>
 147                         <td class="center">1.8</td>
 148                         <td class="center">A</td>
 149                 </tr>
 150                 <tr class="odd_gradeA">
 151                         <td>Gecko</td>
 152                         <td>Firefox 2.0</td>
 153                         <td>Win 98+ / OSX.2+</td>
 154                         <td class="center">1.8</td>
 155                         <td class="center">A</td>
 156                 </tr>
 157                 <tr class="even_gradeA">
 158                         <td>Gecko</td>
 159                         <td>Firefox 3.0</td>
 160                         <td>Win 2k+ / OSX.3+</td>
 161                         <td class="center">1.9</td>
 162                         <td class="center">A</td>
 163                 </tr>
 164                 <tr class="odd_gradeA">
 165                         <td>Gecko</td>
 166                         <td>Camino 1.0</td>
 167                         <td>OSX.2+</td>
 168                         <td class="center">1.8</td>
 169                         <td class="center">A</td>
 170                 </tr>
 171                 <tr class="even_gradeA">
 172                         <td>Gecko</td>
 173                         <td>Camino 1.5</td>
 174                         <td>OSX.3+</td>
 175                         <td class="center">1.8</td>
 176                         <td class="center">A</td>
 177                 </tr>
 178                 <tr class="odd_gradeA">
 179                         <td>Gecko</td>
 180                         <td>Netscape 7.2</td>
 181                         <td>Win 95+ / Mac OS 8.6-9.2</td>
 182                         <td class="center">1.7</td>
 183                         <td class="center">A</td>
 184                 </tr>
 185                 <tr class="even_gradeA">
 186                         <td>Gecko</td>
 187                         <td>Netscape Browser 8</td>
 188                         <td>Win 98SE+</td>
 189                         <td class="center">1.7</td>
 190                         <td class="center">A</td>
 191                 </tr>
 192                 <tr class="odd_gradeA">
 193                         <td>Gecko</td>
 194                         <td>Netscape Navigator 9</td>
 195                         <td>Win 98+ / OSX.2+</td>
 196                         <td class="center">1.8</td>
 197                         <td class="center">A</td>
 198                 </tr>
 199                 <tr class="even_gradeA">
 200                         <td>Gecko</td>
 201                         <td>Mozilla 1.0</td>
 202                         <td>Win 95+ / OSX.1+</td>
 203                         <td class="center">1</td>
 204                         <td class="center">A</td>
 205                 </tr>
 206                 <tr class="odd_gradeA">
 207                         <td>Gecko</td>
 208                         <td>Mozilla 1.1</td>
 209                         <td>Win 95+ / OSX.1+</td>
 210                         <td class="center">1.1</td>
 211                         <td class="center">A</td>
 212                 </tr>
 213                 <tr class="even_gradeA">
 214                         <td>Gecko</td>
 215                         <td>Mozilla 1.2</td>
 216                         <td>Win 95+ / OSX.1+</td>
 217                         <td class="center">1.2</td>
 218                         <td class="center">A</td>
 219                 </tr>
 220                 <tr class="odd_gradeA">
 221                         <td>Gecko</td>
 222                         <td>Mozilla 1.3</td>
 223                         <td>Win 95+ / OSX.1+</td>
 224                         <td class="center">1.3</td>
 225                         <td class="center">A</td>
 226                 </tr>
 227                 <tr class="even_gradeA">
 228                         <td>Gecko</td>
 229                         <td>Mozilla 1.4</td>
 230                         <td>Win 95+ / OSX.1+</td>
 231                         <td class="center">1.4</td>
 232                         <td class="center">A</td>
 233                 </tr>
 234                 <tr class="odd_gradeA">
 235                         <td>Gecko</td>
 236                         <td>Mozilla 1.5</td>
 237                         <td>Win 95+ / OSX.1+</td>
 238                         <td class="center">1.5</td>
 239                         <td class="center">A</td>
 240                 </tr>
 241                 <tr class="even_gradeA">
 242                         <td>Gecko</td>
 243                         <td>Mozilla 1.6</td>
 244                         <td>Win 95+ / OSX.1+</td>
 245                         <td class="center">1.6</td>
 246                         <td class="center">A</td>
 247                 </tr>
 248                 <tr class="odd_gradeA">
 249                         <td>Gecko</td>
 250                         <td>Mozilla 1.7</td>
 251                         <td>Win 98+ / OSX.1+</td>
 252                         <td class="center">1.7</td>
 253                         <td class="center">A</td>
 254                 </tr>
 255                 <tr class="even_gradeA">
 256                         <td>Gecko</td>
 257                         <td>Mozilla 1.8</td>
 258                         <td>Win 98+ / OSX.1+</td>
 259                         <td class="center">1.8</td>
 260                         <td class="center">A</td>
 261                 </tr>
 262                 <tr class="odd_gradeA">
 263                         <td>Gecko</td>
 264                         <td>Seamonkey 1.1</td>
 265                         <td>Win 98+ / OSX.2+</td>
 266                         <td class="center">1.8</td>
 267                         <td class="center">A</td>
 268                 </tr>
 269                 <tr class="even_gradeA">
 270                         <td>Gecko</td>
 271                         <td>Epiphany 2.20</td>
 272                         <td>Gnome</td>
 273                         <td class="center">1.8</td>
 274                         <td class="center">A</td>
 275                 </tr>
 276         </tbody>
 277 </table>
 278                         </div>
 279                 </form>
 280                         <div class="spacer"></div>
 281
 282
 283                         <h1>Examples</h1>
 284                         <ul>
 285                                 <li><a href="index.html">Basic initialisation</a></li>
 286                                 <li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
 287                                 <li><a href="text.html">Custom text in the button</a></li>
 288                                 <li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
 289                                 <li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
 290                                 <li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
 291                                 <li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
 292                                 <li><a href="style.html">Alternative styling and reset to original</a></li>
 293                                 <li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
 294                         </ul>
 295
 296
 297                         <h1>Initialisation code</h1>
 298                         <pre>$(document).ready( function () {
 299         var oTables = $('table').dataTable( {
 300                 "sDom": 'lfrtip'
 301         } );
 302
 303         var oColVis = new ColVis( oTables.fnSettings() );
 304         $(oColVis).bind('stateChange', function (e, data) {
 305                 var jqTables = $('table:not(#example)');
 306                 for ( var i=0, iLen=jqTables.length ; i&lt;iLen ; i++ ) {
 307                         $(jqTables[i]).dataTable().fnSetColumnVis( data.iColumn, data.bVisible );
 308                 }
 309         } );
 310
 311         document.getElementById('buttonInsert').appendChild(oColVis.dom.wrapper);
 312         oColVis.fnRebuild();
 313 } );</pre>
 314
 315                         <div id="footer" style="text-align:center;">
 316                                 <span style="font-size:10px;">
 317                                         ColVis and DataTables &copy; Allan Jardine 2009-2010
 318                                 </span>
 319                         </div>
 320                 </div>
 321         </body>
 322 </html>