588 lines
29 KiB
HTML
588 lines
29 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>jQuery tablesorter 2.0 - CSS Sticky Header Widget</title>
|
||
|
|
|
||
|
|
<!-- jQuery -->
|
||
|
|
<script src="js/jquery-latest.min.js"></script>
|
||
|
|
<script src="js/jquery-ui.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Demo stuff -->
|
||
|
|
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
||
|
|
<link rel="stylesheet" href="css/jq.css">
|
||
|
|
<link rel="stylesheet" href="css/prettify.css">
|
||
|
|
<link rel="stylesheet" href="css/magnific-popup.css">
|
||
|
|
<script src="js/prettify.js"></script>
|
||
|
|
<script src="js/docs.js"></script>
|
||
|
|
<script src="js/jquery.magnific-popup.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Tablesorter: theme -->
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.default.css">
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.green.css">
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.grey.css">
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.ice.css">
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.black-ice.css">
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.dark.css">
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.dropbox.css">
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.metro-dark.css">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#main h3 { margin-top: 20px; }
|
||
|
|
#main .accordion h3 { margin-top: 0; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style id="css">/* wrapper of table 2 */
|
||
|
|
.wrapper {
|
||
|
|
position: relative;
|
||
|
|
top: 50px;
|
||
|
|
height: 250px;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Magnific popup */
|
||
|
|
#popup {
|
||
|
|
position: relative;
|
||
|
|
background: #FFF;
|
||
|
|
padding: 20px;
|
||
|
|
width: auto;
|
||
|
|
max-width: 500px;
|
||
|
|
margin: 20px auto;
|
||
|
|
}</style>
|
||
|
|
|
||
|
|
<!-- Tablesorter script: required -->
|
||
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
||
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||
|
|
<script src="../js/widgets/widget-cssStickyHeaders.js"></script>
|
||
|
|
|
||
|
|
<script id="js">$(function() {
|
||
|
|
|
||
|
|
$('.open-popup-link').magnificPopup({
|
||
|
|
type: 'inline',
|
||
|
|
midClick: true,
|
||
|
|
callbacks: {
|
||
|
|
open: function () {
|
||
|
|
// Will fire when this exact popup is opened
|
||
|
|
// this - is Magnific Popup object
|
||
|
|
$('#table0').tablesorter({
|
||
|
|
theme: 'blue',
|
||
|
|
headerTemplate : '{content} {icon}', // Add icon for various themes
|
||
|
|
widgets: ['zebra', 'filter', 'cssStickyHeaders'],
|
||
|
|
widgetOptions: {
|
||
|
|
// caption set by demo button value
|
||
|
|
cssStickyHeaders_addCaption: addCaption,
|
||
|
|
// jQuery selector or object to attach sticky header to
|
||
|
|
cssStickyHeaders_attachTo: '.mfp-wrap',
|
||
|
|
cssStickyHeaders_filteredToTop : true,
|
||
|
|
cssStickyHeaders_offset: 0
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#table1, .nested, #table3').tablesorter({
|
||
|
|
widthFixed : true,
|
||
|
|
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
|
||
|
|
|
||
|
|
widgets: [ 'zebra', 'cssStickyHeaders', 'filter' ],
|
||
|
|
|
||
|
|
widgetOptions: {
|
||
|
|
cssStickyHeaders_addCaption : true,
|
||
|
|
// jQuery selector or object to attach sticky header to
|
||
|
|
cssStickyHeaders_attachTo : null,
|
||
|
|
cssStickyHeaders_filteredToTop : true,
|
||
|
|
cssStickyHeaders_offset : 0
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#table2').tablesorter({
|
||
|
|
widthFixed : true,
|
||
|
|
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
|
||
|
|
|
||
|
|
widgets: [ 'zebra', 'cssStickyHeaders', 'filter' ],
|
||
|
|
|
||
|
|
widgetOptions: {
|
||
|
|
cssStickyHeaders_attachTo : '.wrapper', // or $('.wrapper')
|
||
|
|
cssStickyHeaders_addCaption : true
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
});</script>
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('link.theme').each(function() { this.disabled = true; });
|
||
|
|
|
||
|
|
var themes = 'blue default green grey ice black-ice dark dropbox',
|
||
|
|
i, o = '', t = themes.split(' ');
|
||
|
|
for (i = 0; i < t.length; i++) {
|
||
|
|
o += '<option value="' + t[i] + '">' + t[i] + '</option>';
|
||
|
|
}
|
||
|
|
|
||
|
|
$('select:first')
|
||
|
|
.append(o)
|
||
|
|
.change(function() {
|
||
|
|
var theme = $(this).val().toLowerCase(),
|
||
|
|
files = $('link.theme').each(function() {
|
||
|
|
this.disabled = true;
|
||
|
|
})
|
||
|
|
files.filter('[href$="theme.' + theme + '.css"]').each(function() {
|
||
|
|
this.disabled = false;
|
||
|
|
});
|
||
|
|
$('table')
|
||
|
|
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
|
||
|
|
.addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme) );
|
||
|
|
}).change();
|
||
|
|
|
||
|
|
window.addCaption = true;
|
||
|
|
$('.caption').on('click', function() {
|
||
|
|
addCaption = !addCaption;
|
||
|
|
$(this).html( '' + addCaption );
|
||
|
|
$('#table0, #table1, #table2, #table3, .nested').each(function() {
|
||
|
|
if (this.config) {
|
||
|
|
this.config.widgetOptions.cssStickyHeaders_addCaption = addCaption;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="banner">
|
||
|
|
<h1>table<em>sorter</em></h1>
|
||
|
|
<h2>CSS Sticky Header Widget</h2>
|
||
|
|
<h3>Flexible client-side table sorting</h3>
|
||
|
|
<a href="index.html">Back to documentation</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="main">
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div id="root" class="accordion">
|
||
|
|
|
||
|
|
<h3><a href="#">Notes</a></h3>
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li>In <span class="version">v2.18.4</span>, added a <a href="http://dimsemenov.com/plugins/magnific-popup/">Magnific popup</a> example to this page.</li>
|
||
|
|
<li>In <span class="version">v2.18.1</span>, <code>cssStickyHeaders_addCaption</code> issue fixed & nested tables in IE now work properly.</li>
|
||
|
|
<li>This demo uses the CSS Sticky Headers widget which uses <em>CSS transforms</em> to reposition the table head.</li>
|
||
|
|
<li><a href="http://caniuse.com/#search=transform">CSS transforms</a> are supported by most modern browsers (<strong>not IE8 and older</strong>).</li>
|
||
|
|
<li>The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the <code>cssStickyHeaders_offset</code> option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.<br><br></li>
|
||
|
|
<li>This widget <em>will not work</em> with the original tablesorter, but works optimally with tablesorter v2.8+ (Added <span class="version">v2.14.1</span>; Updated <span class="version updated">v2.18.1</span>)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3><a href="#">Options</a></h3>
|
||
|
|
<div>
|
||
|
|
<h4>cssStickyHeaders widget defaults</h4>
|
||
|
|
<div>
|
||
|
|
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||
|
|
</div>
|
||
|
|
<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
|
||
|
|
<tr id="cssstickyheaders-offset">
|
||
|
|
<td><span class="permalink">cssStickyHeaders_offset</span></td>
|
||
|
|
<td>0</td>
|
||
|
|
<td>Set this to a number (in pixels) or jquery selector targeting the <code>position:fixed</code> element in which to place the sticky header below while scrolling.</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr id="cssstickyheaders-includecaption">
|
||
|
|
<td><span class="permalink">cssStickyHeaders_includeCaption</span></td>
|
||
|
|
<td>true</td>
|
||
|
|
<td>If <code>false</code> and a table caption exist, it won't be included in the sticky header.</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr id="cssstickyheaders-attachto">
|
||
|
|
<td><a href="#" class="permalink">cssStickyHeaders_attachTo</a></td>
|
||
|
|
<td>null</td>
|
||
|
|
<td>Set this option as a jQuery selector or object where the sticky header will be attached.
|
||
|
|
<div class="collapsible">
|
||
|
|
<ul>
|
||
|
|
<li>Setting this option with either a jQuery selector string (<code>".wrapper"</code>) or jQuery object (<code>$(".wrapper")</code>).</li>
|
||
|
|
<li>This option contains the target to which the sticky header will attach - see the <a href="#popup-header">first example</a> below.</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr id="cssstickyheaders-filteredtotop">
|
||
|
|
<td><a href="#" class="permalink">cssStickyHeaders_filteredToTop</a></td>
|
||
|
|
<td>true</td>
|
||
|
|
<td>Scroll table top into view after filtering
|
||
|
|
<div class="collapsible">
|
||
|
|
<br>
|
||
|
|
This is needed when the user choses to filter the table which results in fewer rows than are currently visible in the browser viewport. So, the sticky header may still exist, but the table body may not be seen. Setting this option to <code>true</code> forces the original table header to scroll back into view.
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3><a href="#">Change log</a></h3>
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li><span class="version">v2.18.1</span>:
|
||
|
|
<ul>
|
||
|
|
<li>Nested css sticky headers in IE now work as expected</li>
|
||
|
|
<li>Fixed an issue in Chrome where the height of the caption was still included even though the <code>cssStickyHeaders_addCaption</code> was set to <code>false</code>.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><span class="version">v2.18.0</span>:
|
||
|
|
<ul>
|
||
|
|
<li>Nested css sticky headers now stack; except in IE</li>
|
||
|
|
<li>Removed <code>cssStickyHeaders_zIndex</code> because the headers are not positioned.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><span class="version">v2.16.4</span>:
|
||
|
|
<ul>
|
||
|
|
<li>Added the <code>cssStickyHeaders_filteredToTop</code> option.
|
||
|
|
<ul>
|
||
|
|
<li>When <code>true</code> the table top will scroll into view after being filtered.</li>
|
||
|
|
<li>This is done because if the sticky header is active, and a filter results in say only one row, the table will scroll up out of the browser viewport.</li>
|
||
|
|
<li>If set to <code>false</code>, no scrolling is done.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><span class="version">v2.14.4</span>:
|
||
|
|
<ul>
|
||
|
|
<li>Added <code>cssStickyHeaders_attachTo</code> (default set to <code>null</code>). Setting this option with either a jQuery selector string (<code>".wrapper"</code>) or jQuery object (<code>$(".wrapper")</code>) to attach the sticky header to this element - see the second example below.</li>
|
||
|
|
<li>Removed <code>cssStickyHeaders_offsetX</code> option.</li>
|
||
|
|
<li>Renamed <code>cssStickyHeaders_offsetY</code> to <code>cssStickyHeaders_offset</code> as the horizontal offset is not required.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>v2.14.1: Created css Sticky Headers widget</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<p></p>
|
||
|
|
|
||
|
|
<h1>CSS</h1>
|
||
|
|
<div id="css">
|
||
|
|
<pre class="prettyprint lang-css"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1>Javascript</h1>
|
||
|
|
<div id="javascript">
|
||
|
|
<pre class="prettyprint lang-javascript"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1>Demo</h1>
|
||
|
|
Choose Theme: <select></select>
|
||
|
|
<p></p>
|
||
|
|
Include Caption: <button type="button" class="caption">true</button>
|
||
|
|
<p></p>
|
||
|
|
|
||
|
|
<h3 id="popup-header">Sticky headers in a popup window</h3>
|
||
|
|
<a href="#popup" class="open-popup-link">Show table in Magnific popup window</a>
|
||
|
|
|
||
|
|
<div id="popup" class="white-popup mfp-hide">
|
||
|
|
<table id="table0" class="tablesorter">
|
||
|
|
<caption>Student Grades</caption>
|
||
|
|
<thead>
|
||
|
|
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tfoot>
|
||
|
|
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||
|
|
</tfoot>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||
|
|
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||
|
|
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||
|
|
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||
|
|
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||
|
|
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||
|
|
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||
|
|
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||
|
|
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||
|
|
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||
|
|
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||
|
|
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||
|
|
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||
|
|
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||
|
|
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||
|
|
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||
|
|
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||
|
|
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||
|
|
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||
|
|
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||
|
|
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||
|
|
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||
|
|
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||
|
|
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||
|
|
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||
|
|
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||
|
|
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||
|
|
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||
|
|
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||
|
|
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||
|
|
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||
|
|
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||
|
|
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||
|
|
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||
|
|
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||
|
|
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||
|
|
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||
|
|
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||
|
|
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||
|
|
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||
|
|
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||
|
|
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||
|
|
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||
|
|
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||
|
|
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<h3>Attach sticky header to browser window</h3>
|
||
|
|
<table id="table1" class="tablesorter">
|
||
|
|
<caption>Student Grades</caption>
|
||
|
|
<thead>
|
||
|
|
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tfoot>
|
||
|
|
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||
|
|
</tfoot>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||
|
|
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||
|
|
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||
|
|
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||
|
|
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||
|
|
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||
|
|
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||
|
|
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||
|
|
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||
|
|
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||
|
|
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||
|
|
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||
|
|
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||
|
|
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||
|
|
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||
|
|
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||
|
|
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
|
||
|
|
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||
|
|
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||
|
|
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||
|
|
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||
|
|
<tr><td>student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||
|
|
<tr><td>student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||
|
|
<tr><td>student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||
|
|
<tr><td>student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||
|
|
<tr><td>student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||
|
|
<tr><td>student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||
|
|
<tr><td>student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||
|
|
<tr><td>student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||
|
|
<tr><td>student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||
|
|
<tr><td>student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||
|
|
<tr><td>student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||
|
|
<tr><td>student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||
|
|
<tr><td>student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||
|
|
<tr><td>student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||
|
|
<tr><td>student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||
|
|
<tr><td>student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||
|
|
<tr><td>student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||
|
|
<tr><td>student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||
|
|
<tr><td>student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||
|
|
<tr><td>student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||
|
|
<tr><td>student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||
|
|
<tr><td>student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||
|
|
<tr><td>student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||
|
|
<tr><td>student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Attach sticky header to its parent</h3>
|
||
|
|
<div class="narrow-block wrapper">
|
||
|
|
<table id="table2" class="tablesorter">
|
||
|
|
<caption>Student Grades</caption>
|
||
|
|
<thead>
|
||
|
|
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
||
|
|
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
||
|
|
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
|
||
|
|
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
||
|
|
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
|
||
|
|
<tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
|
||
|
|
<tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
|
||
|
|
<tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
|
||
|
|
<tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
|
||
|
|
<tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
|
||
|
|
<tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
|
||
|
|
<tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
|
||
|
|
<tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
|
||
|
|
<tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
|
||
|
|
<tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Nested sticky header tables</h3>
|
||
|
|
<table id="table3" class="tablesorter">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Main table header</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Main table - row 1</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Main table - row 2</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
Main table - row 3 (with nested table 1)
|
||
|
|
<table id="nested1" class="nested">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Header for the nested table 1</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th class="sorter-false">Second header row for nested table 1</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>data in the nested table 1 - row 1</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 2</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 3</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 4</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 5</td></tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
data in the nested table 1 - row 6 (with nested table 2)
|
||
|
|
<table id="nested2" class="nested">
|
||
|
|
<caption class="dark-row">Nested table 2 caption</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Header for the nested table 2</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th class="sorter-false">Second header row for nested table 2</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>data in the nested table 2 - row 1</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 2</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 3</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 4</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 5</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 6</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 7</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 8</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 9</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 10</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 11</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 12</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 13</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 14</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 15</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 16</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 17</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 18</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 19</td></tr>
|
||
|
|
<tr><td>data in the nested table 2 - row 20</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 7</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 8</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 9</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 10</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 11</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 12</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 13</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 14</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 15</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 16</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 17</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 18</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 19</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 20</td></tr>
|
||
|
|
<tr><td>data in the nested table 1 - row 21</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Main table - row 4</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
Main table - row 5 (with nested table 3)
|
||
|
|
<table id="nested3" class="nested">
|
||
|
|
<caption class="dark-row">Nested table 3 caption</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Header for the nested table 3</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>data in the nested table 3 - row 1</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 2</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 3</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 4</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 5</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 6</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 7</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 8</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 9</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 10</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 11</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 12</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 13</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 14</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 15</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 16</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 17</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 18</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 19</td></tr>
|
||
|
|
<tr><td>data in the nested table 3 - row 20</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Main table - row 6</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div class="spacer"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|