218 lines
6.4 KiB
HTML
218 lines
6.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<title>Fixed-header-table by Mark Malek</title>
|
|
|
|
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
<link rel="stylesheet" href="stylesheets/defaultTheme.css">
|
|
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<header>
|
|
<h1>Fixed-header-table</h1>
|
|
<p>jQuery plugin for tables with fixed headers </p>
|
|
|
|
<p class="view"><a href="https://github.com/markmalek/Fixed-Header-Table">View the Project on GitHub <small>markmalek/Fixed-Header-Table</small></a></p>
|
|
|
|
|
|
<ul>
|
|
<li><a href="https://github.com/markmalek/Fixed-Header-Table/zipball/master">Download <strong>ZIP File</strong></a></li>
|
|
<li><a href="https://github.com/markmalek/Fixed-Header-Table/tarball/master">Download <strong>TAR Ball</strong></a></li>
|
|
<li><a href="https://github.com/markmalek/Fixed-Header-Table">View On <strong>GitHub</strong></a></li>
|
|
</ul>
|
|
</header>
|
|
<section>
|
|
<h3>Why use this plugin?</h3>
|
|
|
|
<p>FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.
|
|
Some options include a fixed footer using the tables tfoot element or cloning the thead as a fixed footer. This plugin is meant to be lightweight, easy to use and performant.</p>
|
|
|
|
<h3>How it works.</h3>
|
|
|
|
<p>Using this plugin is very simple. All that is needed is valid table mark-up.</p>
|
|
|
|
<pre><code><table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</code></pre>
|
|
|
|
<p>Fixed Header Table will do the rest for you. Both fixed width columns and non-fixed width columns are supported. Current browser support includes Internet explorer 6-9, Chrome, Firefox, and Safari.</p>
|
|
|
|
<h3>Theming</h3>
|
|
|
|
<p>Adding an optional themeClass will add the class to the plugin wrapper. This will allow for easy theming for the table.</p>
|
|
|
|
<h2>Demo time!</h2>
|
|
|
|
<div id="tableBlock">
|
|
<table id="demo" class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Committer</th>
|
|
<th>Commit Date</th>
|
|
<th>Commit Message</th>
|
|
<th>Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>Committer</th>
|
|
<th>Commit Date</th>
|
|
<th>Commit Message</th>
|
|
<th>Details</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Docs</h2>
|
|
|
|
<h3>Methods</h3>
|
|
|
|
<h4>destroy</h4>
|
|
|
|
<p>Remove the fixedHeaderTable functionality completely. This will return the element back to its pre-init state.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable('destroy');
|
|
</code></pre>
|
|
|
|
<h4>hide</h4>
|
|
|
|
<p>Hide the table.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable('hide');
|
|
</code></pre>
|
|
|
|
<h4>show</h4>
|
|
|
|
<p>Show the table.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable('show');
|
|
</code></pre>
|
|
|
|
<h3>Events</h3>
|
|
|
|
<h4>create</h4>
|
|
|
|
<p>This event is triggered when .fixedHeaderTable is created.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({
|
|
create: function() { ... }
|
|
});
|
|
</code></pre>
|
|
|
|
<h3>Options</h3>
|
|
|
|
<h4>altClass</h4>
|
|
|
|
<p>The specified class name will be added to odd rows (tr) for theming.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({ altClass: 'className' });
|
|
</code></pre>
|
|
|
|
<h4>autoShow</h4>
|
|
|
|
<p>When autoShow is false the table will be hidden automatically when fixedHeaderTable is called. The table will remain hidden until .fixedHeaderTable('show') is called on it.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({ autoShow: true });
|
|
</code></pre>
|
|
|
|
<h4>cloneHeadToFoot</h4>
|
|
|
|
<p>When cloneHeadToFoot is true the table header will be cloned and used as the table footer.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({ cloneHeadToFoot: true });
|
|
</code></pre>
|
|
|
|
<h4>fixedColumn <strong>version 1.3 only</strong>
|
|
</h4>
|
|
|
|
<p>When fixedColumn is true the first column will be fixed if the table scrolls horizontally.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({ fixedColumn: true });
|
|
</code></pre>
|
|
|
|
<h4>footer</h4>
|
|
|
|
<p>When footer is true the TFOOT of the table will be used as a fixed footer. A TFOOT must be included in the table mark-up.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({ footer: true });
|
|
</code></pre>
|
|
|
|
<h4>height</h4>
|
|
|
|
<p>When height is set the table thead, tbody, and optional tfoot will be equal to the height value. Height is in pixels.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({ height: 500 });
|
|
</code></pre>
|
|
|
|
<h4>width</h4>
|
|
|
|
<p>When width is set the table width will be equal to the width value. Width is in pixels.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({ width: 500 });
|
|
</code></pre>
|
|
|
|
<h4>themeClass</h4>
|
|
|
|
<p>The specified class name will be added to the table for theming.
|
|
Code example:</p>
|
|
|
|
<pre><code>$('selector').fixedHeaderTable({ themeClass: 'className' });
|
|
</code></pre>
|
|
</section>
|
|
<footer>
|
|
<p>This project is maintained by <a href="https://github.com/markmalek">Mark Malek</a></p>
|
|
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
|
|
</footer>
|
|
</div>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
|
|
<script src="//raw.github.com/markmalek/Fixed-Header-Table/master/jquery.fixedheadertable.js"></script>
|
|
<script src="javascripts/demo.js"></script>
|
|
<script src="javascripts/scale.fix.js"></script>
|
|
<script type="text/javascript">
|
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
|
</script>
|
|
<script type="text/javascript">
|
|
try {
|
|
var pageTracker = _gat._getTracker("UA-10972058-2");
|
|
pageTracker._trackPageview();
|
|
} catch(err) {}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |