src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/plugins/datatables/extensions/FixedHeader/examples/two_tables.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta charset="utf-8">
   5         <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
   6         <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
   7
   8         <title>FixedHeader example - Multiple tables</title>
   9         <link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
  10         <link rel="stylesheet" type="text/css" href="../css/dataTables.fixedHeader.css">
  11         <link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
  12         <link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
  13         <style type="text/css" class="init">
  14
  15         </style>
  16         <script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
  17         <script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
  18         <script type="text/javascript" language="javascript" src="../js/dataTables.fixedHeader.js"></script>
  19         <script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
  20         <script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
  21         <script type="text/javascript" language="javascript" class="init">
  22
  23
  24 $(document).ready(function() {
  25         var t1 = $('table.display').eq(0).DataTable();
  26         new $.fn.dataTable.FixedHeader( t1, {
  27                 bottom: true
  28         } );
  29
  30         var t2 = $('table.display').eq(1).DataTable();
  31         new $.fn.dataTable.FixedHeader( t2, {
  32                 bottom: true
  33         } );
  34 } );
  35
  36
  37         </script>
  38 </head>
  39
  40 <body class="dt-example">
  41         <div class="container">
  42                 <section>
  43                         <h1>FixedHeader example <span>Multiple tables</span></h1>
  44
  45                         <div class="info">
  46                                 <p>The following example shows two DataTables enhanced tables both with FixedHeader enabled on them.
  47                                 This is done simply by initialising FixedHeader on each table. This example also shows the footer being
  48                                 fixed in place for the two tables.</p>
  49                         </div>
  50
  51                         <table id="" class="display" cellspacing="0" width="100%">
  52                                 <thead>
  53                                         <tr>
  54                                                 <th>Name</th>
  55                                                 <th>Position</th>
  56                                                 <th>Office</th>
  57                                                 <th>Age</th>
  58                                                 <th>Salary</th>
  59                                         </tr>
  60                                 </thead>
  61
  62                                 <tfoot>
  63                                         <tr>
  64                                                 <th>Name</th>
  65                                                 <th>Position</th>
  66                                                 <th>Office</th>
  67                                                 <th>Age</th>
  68                                                 <th>Salary</th>
  69                                         </tr>
  70                                 </tfoot>
  71
  72                                 <tbody>
  73                                         <tr>
  74                                                 <td>Tiger Nixon</td>
  75                                                 <td>System Architect</td>
  76                                                 <td>Edinburgh</td>
  77                                                 <td>61</td>
  78                                                 <td>$320,800</td>
  79                                         </tr>
  80                                         <tr>
  81                                                 <td>Cedric Kelly</td>
  82                                                 <td>Senior Javascript Developer</td>
  83                                                 <td>Edinburgh</td>
  84                                                 <td>22</td>
  85                                                 <td>$433,060</td>
  86                                         </tr>
  87                                         <tr>
  88                                                 <td>Sonya Frost</td>
  89                                                 <td>Software Engineer</td>
  90                                                 <td>Edinburgh</td>
  91                                                 <td>23</td>
  92                                                 <td>$103,600</td>
  93                                         </tr>
  94                                         <tr>
  95                                                 <td>Quinn Flynn</td>
  96                                                 <td>Support Lead</td>
  97                                                 <td>Edinburgh</td>
  98                                                 <td>22</td>
  99                                                 <td>$342,000</td>
 100                                         </tr>
 101                                         <tr>
 102                                                 <td>Dai Rios</td>
 103                                                 <td>Personnel Lead</td>
 104                                                 <td>Edinburgh</td>
 105                                                 <td>35</td>
 106                                                 <td>$217,500</td>
 107                                         </tr>
 108                                         <tr>
 109                                                 <td>Gavin Joyce</td>
 110                                                 <td>Developer</td>
 111                                                 <td>Edinburgh</td>
 112                                                 <td>42</td>
 113                                                 <td>$92,575</td>
 114                                         </tr>
 115                                         <tr>
 116                                                 <td>Martena Mccray</td>
 117                                                 <td>Post-Sales support</td>
 118                                                 <td>Edinburgh</td>
 119                                                 <td>46</td>
 120                                                 <td>$324,050</td>
 121                                         </tr>
 122                                         <tr>
 123                                                 <td>Jennifer Acosta</td>
 124                                                 <td>Junior Javascript Developer</td>
 125                                                 <td>Edinburgh</td>
 126                                                 <td>43</td>
 127                                                 <td>$75,650</td>
 128                                         </tr>
 129                                         <tr>
 130                                                 <td>Shad Decker</td>
 131                                                 <td>Regional Director</td>
 132                                                 <td>Edinburgh</td>
 133                                                 <td>51</td>
 134                                                 <td>$183,000</td>
 135                                         </tr>
 136                                 </tbody>
 137                         </table>
 138
 139                         <table id="" class="display" cellspacing="0" width="100%">
 140                                 <thead>
 141                                         <tr>
 142                                                 <th>Name</th>
 143                                                 <th>Position</th>
 144                                                 <th>Office</th>
 145                                                 <th>Age</th>
 146                                                 <th>Salary</th>
 147                                         </tr>
 148                                 </thead>
 149
 150                                 <tfoot>
 151                                         <tr>
 152                                                 <th>Name</th>
 153                                                 <th>Position</th>
 154                                                 <th>Office</th>
 155                                                 <th>Age</th>
 156                                                 <th>Salary</th>
 157                                         </tr>
 158                                 </tfoot>
 159
 160                                 <tbody>
 161                                         <tr>
 162                                                 <td>Jena Gaines</td>
 163                                                 <td>Office Manager</td>
 164                                                 <td>London</td>
 165                                                 <td>30</td>
 166                                                 <td>$90,560</td>
 167                                         </tr>
 168                                         <tr>
 169                                                 <td>Haley Kennedy</td>
 170                                                 <td>Senior Marketing Designer</td>
 171                                                 <td>London</td>
 172                                                 <td>43</td>
 173                                                 <td>$313,500</td>
 174                                         </tr>
 175                                         <tr>
 176                                                 <td>Tatyana Fitzpatrick</td>
 177                                                 <td>Regional Director</td>
 178                                                 <td>London</td>
 179                                                 <td>19</td>
 180                                                 <td>$385,750</td>
 181                                         </tr>
 182                                         <tr>
 183                                                 <td>Michael Silva</td>
 184                                                 <td>Marketing Designer</td>
 185                                                 <td>London</td>
 186                                                 <td>66</td>
 187                                                 <td>$198,500</td>
 188                                         </tr>
 189                                         <tr>
 190                                                 <td>Bradley Greer</td>
 191                                                 <td>Software Engineer</td>
 192                                                 <td>London</td>
 193                                                 <td>41</td>
 194                                                 <td>$132,000</td>
 195                                         </tr>
 196                                         <tr>
 197                                                 <td>Angelica Ramos</td>
 198                                                 <td>Chief Executive Officer (CEO)</td>
 199                                                 <td>London</td>
 200                                                 <td>47</td>
 201                                                 <td>$1,200,000</td>
 202                                         </tr>
 203                                         <tr>
 204                                                 <td>Suki Burks</td>
 205                                                 <td>Developer</td>
 206                                                 <td>London</td>
 207                                                 <td>53</td>
 208                                                 <td>$114,500</td>
 209                                         </tr>
 210                                         <tr>
 211                                                 <td>Prescott Bartlett</td>
 212                                                 <td>Technical Author</td>
 213                                                 <td>London</td>
 214                                                 <td>27</td>
 215                                                 <td>$145,000</td>
 216                                         </tr>
 217                                         <tr>
 218                                                 <td>Timothy Mooney</td>
 219                                                 <td>Office Manager</td>
 220                                                 <td>London</td>
 221                                                 <td>37</td>
 222                                                 <td>$136,200</td>
 223                                         </tr>
 224                                         <tr>
 225                                                 <td>Bruno Nash</td>
 226                                                 <td>Software Engineer</td>
 227                                                 <td>London</td>
 228                                                 <td>38</td>
 229                                                 <td>$163,500</td>
 230                                         </tr>
 231                                         <tr>
 232                                                 <td>Hermione Butler</td>
 233                                                 <td>Regional Director</td>
 234                                                 <td>London</td>
 235                                                 <td>47</td>
 236                                                 <td>$356,250</td>
 237                                         </tr>
 238                                         <tr>
 239                                                 <td>Lael Greer</td>
 240                                                 <td>Systems Administrator</td>
 241                                                 <td>London</td>
 242                                                 <td>21</td>
 243                                                 <td>$103,500</td>
 244                                         </tr>
 245                                 </tbody>
 246                         </table>
 247
 248                         <ul class="tabs">
 249                                 <li class="active">Javascript</li>
 250                                 <li>HTML</li>
 251                                 <li>CSS</li>
 252                                 <li>Ajax</li>
 253                                 <li>Server-side script</li>
 254                         </ul>
 255
 256                         <div class="tabs">
 257                                 <div class="js">
 258                                         <p>The Javascript shown below is used to initialise the table shown in this
 259                                         example:</p><code class="multiline brush: js;">$(document).ready(function() {
 260         var t1 = $('table.display').eq(0).DataTable();
 261         new $.fn.dataTable.FixedHeader( t1, {
 262                 bottom: true
 263         } );
 264
 265         var t2 = $('table.display').eq(1).DataTable();
 266         new $.fn.dataTable.FixedHeader( t2, {
 267                 bottom: true
 268         } );
 269 } );</code>
 270
 271                                         <p>In addition to the above code, the following Javascript library files are loaded for use in this
 272                                         example:</p>
 273
 274                                         <ul>
 275                                                 <li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
 276                                                 <li><a href=
 277                                                 "../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
 278                                                 <li><a href="../js/dataTables.fixedHeader.js">../js/dataTables.fixedHeader.js</a></li>
 279                                         </ul>
 280                                 </div>
 281
 282                                 <div class="table">
 283                                         <p>The HTML shown below is the raw HTML table element, before it has been enhanced by
 284                                         DataTables:</p>
 285                                 </div>
 286
 287                                 <div class="css">
 288                                         <div>
 289                                                 <p>This example uses a little bit of additional CSS beyond what is loaded from the library
 290                                                 files (below), in order to correctly display the table. The additional CSS used is shown
 291                                                 below:</p><code class="multiline brush: js;"></code>
 292                                         </div>
 293
 294                                         <p>The following CSS library files are loaded for use in this example to provide the styling of the
 295                                         table:</p>
 296
 297                                         <ul>
 298                                                 <li><a href=
 299                                                 "../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
 300                                                 <li><a href="../css/dataTables.fixedHeader.css">../css/dataTables.fixedHeader.css</a></li>
 301                                         </ul>
 302                                 </div>
 303
 304                                 <div class="ajax">
 305                                         <p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
 306                                         will update automatically as any additional data is loaded.</p>
 307                                 </div>
 308
 309                                 <div class="php">
 310                                         <p>The script used to perform the server-side processing for this table is shown below. Please note
 311                                         that this is just an example script using PHP. Server-side processing scripts can be written in any
 312                                         language, using <a href="//datatables.net/manual/server-side">the protocol described in the
 313                                         DataTables documentation</a>.</p>
 314                                 </div>
 315                         </div>
 316                 </section>
 317         </div>
 318
 319         <section>
 320                 <div class="footer">
 321                         <div class="gradient"></div>
 322
 323                         <div class="liner">
 324                                 <h2>Other examples</h2>
 325
 326                                 <div class="toc">
 327                                         <div class="toc-group">
 328                                                 <h3><a href="./index.html">Examples</a></h3>
 329                                                 <ul class="toc active">
 330                                                         <li><a href="./simple.html">Basic initialisation</a></li>
 331                                                         <li><a href="./header_footer.html">Header and footer fixed</a></li>
 332                                                         <li><a href="./top_left_right.html">Header, left and right all fixed</a></li>
 333                                                         <li class="active"><a href="./two_tables.html">Multiple tables</a></li>
 334                                                         <li><a href="./zIndexes.html">z-index order control</a></li>
 335                                                 </ul>
 336                                         </div>
 337                                 </div>
 338
 339                                 <div class="epilogue">
 340                                         <p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
 341                                         information about its API properties and methods.<br>
 342                                         Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
 343                                         <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
 344                                         DataTables.</p>
 345
 346                                         <p class="copyright">DataTables designed and created by <a href=
 347                                         "http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
 348                                         DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 349                                 </div>
 350                         </div>
 351                 </div>
 352         </section>
 353 </body>
 354 </html>