mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Add cssStickyHeaders_attachTo widget option. Fixes #453
This commit is contained in:
parent
328bba34a7
commit
196729829e
@ -25,9 +25,13 @@
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dark.css">
|
||||
<link class="theme" rel="stylesheet" href="../css/theme.dropbox.css">
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style id="css">/* wrapper of table 2 */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
height: 250px;
|
||||
overflow-x: auto;
|
||||
}</style>
|
||||
|
||||
<!-- Tablesorter script: required -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
@ -36,21 +40,26 @@
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
|
||||
var options = {
|
||||
widthFixed : true,
|
||||
showProcessing: true,
|
||||
|
||||
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
|
||||
|
||||
widgets: [ 'uitheme', 'zebra', 'cssStickyHeaders', 'filter' ],
|
||||
|
||||
widgetOptions: {
|
||||
cssStickyHeaders_offsetX : 0,
|
||||
cssStickyHeaders_offsetY : 0
|
||||
cssStickyHeaders_offset : 0,
|
||||
cssStickyHeaders_addCaption : true,
|
||||
cssStickyHeaders_attachTo : null
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
$("#table1").tablesorter(options);
|
||||
|
||||
/* make second table scroll within its wrapper */
|
||||
options.widgetOptions.cssStickyHeaders_attachTo = '.wrapper' // or $('.wrapper')
|
||||
$("#table2").tablesorter(options);
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
@ -86,7 +95,7 @@ $(function() {
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>CSS Sticky Header Widget (beta)</h2>
|
||||
<h2>CSS Sticky Header Widget</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
@ -96,14 +105,24 @@ $(function() {
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This demo uses the CSS Sticky Headers widget (beta) which uses CSS transforms to reposition the table head.</li>
|
||||
<li>This demo uses the CSS Sticky Headers widget which uses CSS transforms to reposition the table head.</li>
|
||||
<li><a href="http://caniuse.com/#search=transform">CSS transforms</a> are supported by most modern browsers (not IE8 and older).</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_offsetY</code> option as desired. I didn't bother in this demo because it shows more than just the jQuery UI theme.</li>
|
||||
<li><strong>It doesn't seem to work in Internet Explorer v10, but it should</strong>.</li>
|
||||
<li>This widget is still in <span class="label label-info">Beta</span> (<span class="version">v2.14.2</span>)</li>
|
||||
<li>In <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 & renamed <code>cssStickyHeaders_offsetY</code> to <code>cssStickyHeaders_offset</code> as the horizontal offset is not required.</li>
|
||||
</ul>
|
||||
</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.</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.2</span>; Updated <span class="version updated">v2.14.4</span>)</li>
|
||||
</ul>
|
||||
</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>
|
||||
@ -115,9 +134,9 @@ $(function() {
|
||||
<option value="jui">Jquery UI</option>
|
||||
</select>
|
||||
<br><br>
|
||||
|
||||
<table class="tablesorter">
|
||||
<!-- <caption>Student Grades</caption> -->
|
||||
<h1>Attach sticky header to browser window</h1>
|
||||
<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>
|
||||
@ -179,8 +198,10 @@ $(function() {
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="narrow-block">
|
||||
<table class="tablesorter">
|
||||
<h1>Attach sticky header to its parent</h1>
|
||||
<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>
|
||||
|
@ -384,6 +384,7 @@
|
||||
<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
|
||||
<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>).</li>
|
||||
<li><a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1; <span class="version updated">v2.10</span>)</li>
|
||||
<li><a href="example-widget-css-sticky-header.html">css3 sticky header widget</a> (<span class="version">v2.14.2</span>; <span class="version updated">v2.14.4</span>).</li>
|
||||
<li>UITheme widget:
|
||||
<ul>
|
||||
<li><a href="example-widget-ui-theme.html">jQuery UI theme</a> (v2.0.9; <span class="version updated">v2.13.3</span>)</li>
|
||||
@ -458,7 +459,6 @@
|
||||
<li><a href="http://jsfiddle.net/Mottie/4mVfu/1/">tablesorter basic demo with pager plugin</a></li>
|
||||
<li><a href="http://codepen.io/Mottie/pen/eqBbn">tableSorter LESS theme; modify the colors dynamically in this LESS theme demo!</a></li>
|
||||
<li><span class="label label-info">Beta</span> pager widget (<a href="example-widget-pager.html">basic</a> & <a href="example-widget-pager-ajax.html">ajax</a> demos) (<span class="version">v2.12</span>).</li>
|
||||
<li><span class="label label-info">Beta</span> <a href="example-widget-css-sticky-header.html">css3 sticky header widget</a> (<span class="version">v2.14.2</span>).</li>
|
||||
<li><span class="label label-info">Beta</span> <a href="../beta-testing/example-pager-custom-controls.html">Custom pager control script</a></li>
|
||||
<li><span class="label label-info">Beta</span> <a href="../beta-testing/example-external-filters-using-select2.html">External filters using Select2 plugin</a></li>
|
||||
<li><span class="label label-info">Beta</span> <a href="../beta-testing/example-widget-column-reorder.html">Column reorder widget</a> - not working 100% with sticky headers</li>
|
||||
|
@ -1,7 +1,7 @@
|
||||
/*! tablesorter CSS Sticky Headers widget (beta) - updated 12/2/2013 (v2.14.3)
|
||||
* Requires a modern browser, tablesorter v2.8+ and jQuery 1.7+
|
||||
/*! tablesorter CSS Sticky Headers widget - updated 12/8/2013 (v2.14.4)
|
||||
* Requires a modern browser, tablesorter v2.8+
|
||||
*/
|
||||
/*global jQuery: false */
|
||||
/*global jQuery: false, unused:false */
|
||||
;(function($){
|
||||
"use strict";
|
||||
|
||||
@ -9,36 +9,48 @@
|
||||
id: "cssStickyHeaders",
|
||||
priority: 10,
|
||||
options: {
|
||||
cssStickyHeaders_offsetX : 0,
|
||||
cssStickyHeaders_offsetY : 0
|
||||
cssStickyHeaders_offset : 0,
|
||||
cssStickyHeaders_addCaption : false,
|
||||
cssStickyHeaders_attachTo : null
|
||||
},
|
||||
init : function(table, thisWidget, c, wo) {
|
||||
var offset, bottom,
|
||||
var $attach = $(wo.cssStickyHeaders_attachTo),
|
||||
namespace = '.cssstickyheader',
|
||||
$win = $(window),
|
||||
$thead = c.$table.children('thead'),
|
||||
left = 0;
|
||||
$win
|
||||
.bind('scroll resize '.split(' ').join(namespace + ' '), function() {
|
||||
var offset = c.$table.offset(),
|
||||
bottom = c.$table.height() - $thead.height() - (c.$table.find('tfoot').height() || 0),
|
||||
deltaY = $win.scrollTop() - offset.top - 1, // subtract out top border
|
||||
deltaX = $win.scrollLeft() + offset.left;
|
||||
// IE can only transform header cells - fixes #447 thanks to @gakreol!
|
||||
$thead.children().children().css({
|
||||
// this non-prefixed transform has cross-browser support in jQuery 1.8+
|
||||
"transform": "translate(" +
|
||||
(deltaX > 0 && deltaX <= left ? deltaX - wo.cssStickyHeaders_offsetX : 0) + "px," +
|
||||
(deltaY > 0 && deltaY <= bottom ? deltaY - wo.cssStickyHeaders_offsetY : 0) + "px)"
|
||||
});
|
||||
$caption = c.$table.find('caption'),
|
||||
$win = $attach.length ? $attach : $(window);
|
||||
$win.bind('scroll resize '.split(' ').join(namespace + ' '), function() {
|
||||
var top = $attach.length ? $attach.offset().top : $win.scrollTop(),
|
||||
// add caption height; include table padding top & border-spacing or text may be above the fold (jQuery UI themes)
|
||||
// border-spacing needed in Firefox, but not webkit... not sure if I should account for that
|
||||
captionTop = wo.cssStickyHeaders_addCaption ? $caption.outerHeight(true) +
|
||||
(parseInt(c.$table.css('padding-top'), 10) || 0) + (parseInt(c.$table.css('border-spacing'), 10) || 0) : 0,
|
||||
bottom = c.$table.height() - $thead.height() - (c.$table.find('tfoot').height() || 0) - captionTop,
|
||||
deltaY = top - $thead.offset().top + (parseInt(c.$table.css('border-top-width'), 10) || 0) +
|
||||
(wo.cssStickyHeaders_offset || 0) + captionTop,
|
||||
finalY = (deltaY > 0 && deltaY <= bottom ? deltaY : 0),
|
||||
// IE can only transform header cells - fixes #447 thanks to @gakreol!
|
||||
$cells = $thead.children().children();
|
||||
if (wo.cssStickyHeaders_addCaption) {
|
||||
$cells = $cells.add($caption);
|
||||
}
|
||||
$cells.css({
|
||||
"transform": finalY === 0 ? "" : "translate(0px," + finalY + "px)",
|
||||
"-ms-transform": finalY === 0 ? "" : "translate(0px," + finalY + "px)",
|
||||
"-webkit-transform": finalY === 0 ? "" : "translate(0px," + finalY + "px)"
|
||||
});
|
||||
});
|
||||
},
|
||||
remove: function(table, c, wo){
|
||||
var namespace = '.cssstickyheader';
|
||||
$(window).unbind('scroll resize '.split(' ').join(namespace + ' '));
|
||||
c.$table
|
||||
.unbind('update updateAll '.split(' ').join(namespace + ' '))
|
||||
.children('thead').css({ "transform": "translate(0px, 0px)" });
|
||||
.children('thead, caption').css({
|
||||
"transform": "",
|
||||
"-ms-transform" : "",
|
||||
"-webkit-transform" : ""
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user