Blame | Letzte Änderung | Log anzeigen | RSS feed
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"><title>FixedHeader example - Multiple tables</title><link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css"><link rel="stylesheet" type="text/css" href="../css/dataTables.fixedHeader.css"><link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css"><link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css"><style type="text/css" class="init"></style><script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script><script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script><script type="text/javascript" language="javascript" src="../js/dataTables.fixedHeader.js"></script><script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script><script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script><script type="text/javascript" language="javascript" class="init">$(document).ready(function() {var t1 = $('table.display').eq(0).DataTable();new $.fn.dataTable.FixedHeader( t1, {bottom: true} );var t2 = $('table.display').eq(1).DataTable();new $.fn.dataTable.FixedHeader( t2, {bottom: true} );} );</script></head><body class="dt-example"><div class="container"><section><h1>FixedHeader example <span>Multiple tables</span></h1><div class="info"><p>The following example shows two DataTables enhanced tables both with FixedHeader enabled on them.This is done simply by initialising FixedHeader on each table. This example also shows the footer beingfixed in place for the two tables.</p></div><table id="" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></tfoot><tbody><tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>$320,800</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>$433,060</td></tr><tr><td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><td>$103,600</td></tr><tr><td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>22</td><td>$342,000</td></tr><tr><td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>35</td><td>$217,500</td></tr><tr><td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>42</td><td>$92,575</td></tr><tr><td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td><td>46</td><td>$324,050</td></tr><tr><td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td><td>43</td><td>$75,650</td></tr><tr><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>$183,000</td></tr></tbody></table><table id="" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Salary</th></tr></tfoot><tbody><tr><td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>30</td><td>$90,560</td></tr><tr><td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>43</td><td>$313,500</td></tr><tr><td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><td>$385,750</td></tr><tr><td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>66</td><td>$198,500</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>$132,000</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>$1,200,000</td></tr><tr><td>Suki Burks</td><td>Developer</td><td>London</td><td>53</td><td>$114,500</td></tr><tr><td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>27</td><td>$145,000</td></tr><tr><td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>37</td><td>$136,200</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>$163,500</td></tr><tr><td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>47</td><td>$356,250</td></tr><tr><td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>$103,500</td></tr></tbody></table><ul class="tabs"><li class="active">Javascript</li><li>HTML</li><li>CSS</li><li>Ajax</li><li>Server-side script</li></ul><div class="tabs"><div class="js"><p>The Javascript shown below is used to initialise the table shown in thisexample:</p><code class="multiline brush: js;">$(document).ready(function() {var t1 = $('table.display').eq(0).DataTable();new $.fn.dataTable.FixedHeader( t1, {bottom: true} );var t2 = $('table.display').eq(1).DataTable();new $.fn.dataTable.FixedHeader( t2, {bottom: true} );} );</code><p>In addition to the above code, the following Javascript library files are loaded for use in thisexample:</p><ul><li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li><li><a href="../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li><li><a href="../js/dataTables.fixedHeader.js">../js/dataTables.fixedHeader.js</a></li></ul></div><div class="table"><p>The HTML shown below is the raw HTML table element, before it has been enhanced byDataTables:</p></div><div class="css"><div><p>This example uses a little bit of additional CSS beyond what is loaded from the libraryfiles (below), in order to correctly display the table. The additional CSS used is shownbelow:</p><code class="multiline brush: js;"></code></div><p>The following CSS library files are loaded for use in this example to provide the styling of thetable:</p><ul><li><a href="../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li><li><a href="../css/dataTables.fixedHeader.css">../css/dataTables.fixedHeader.css</a></li></ul></div><div class="ajax"><p>This table loads data by Ajax. The latest data that has been loaded is shown below. This datawill update automatically as any additional data is loaded.</p></div><div class="php"><p>The script used to perform the server-side processing for this table is shown below. Please notethat this is just an example script using PHP. Server-side processing scripts can be written in anylanguage, using <a href="//datatables.net/manual/server-side">the protocol described in theDataTables documentation</a>.</p></div></div></section></div><section><div class="footer"><div class="gradient"></div><div class="liner"><h2>Other examples</h2><div class="toc"><div class="toc-group"><h3><a href="./index.html">Examples</a></h3><ul class="toc active"><li><a href="./simple.html">Basic initialisation</a></li><li><a href="./header_footer.html">Header and footer fixed</a></li><li><a href="./top_left_right.html">Header, left and right all fixed</a></li><li class="active"><a href="./two_tables.html">Multiple tables</a></li><li><a href="./zIndexes.html">z-index order control</a></li></ul></div></div><div class="epilogue"><p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for fullinformation about its API properties and methods.<br>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 ofDataTables.</p><p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p></div></div></div></section></body></html>