library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add cssStickyHeaders_attachTo widget option. Fixes #453

Browse Source
This commit is contained in:
Mottie 2013-12-08 14:02:02 -06:00
parent 328bba34a7
commit 196729829e
3 changed files with 75 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
docs/example-widget-css-sticky-header.html
View File

@ -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>&quot;.wrapper&quot;</code>) or jQuery object (<code>$(&quot;.wrapper&quot;)</code>) to attach the sticky header to this element - see the second example below.</li>
<li>Removed <code>cssStickyHeaders_offsetX</code> option &amp; 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>

2
docs/index.html
View File

@ -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> &amp; <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>

52
js/widgets/widget-cssStickyHeaders.js
View File

@ -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,27 +9,35 @@
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;
$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!
$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)"
$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)"
});
});
},
@ -38,7 +46,11 @@
$(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" : ""
});
}
});