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

cssStickyHeader: add filteredToTop option

Browse Source
This commit is contained in:
Mottie 2014-05-05 13:25:37 -05:00
parent 1a3f59c747
commit 6b2db42a73
3 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,8 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
@ -48,9 +50,11 @@
widgets: [ 'uitheme', 'zebra', 'cssStickyHeaders', 'filter' ],
widgetOptions: {
cssStickyHeaders_offset : 0,
cssStickyHeaders_addCaption : true,
cssStickyHeaders_attachTo : null
cssStickyHeaders_offset : 0,
cssStickyHeaders_addCaption : true,
cssStickyHeaders_attachTo : null,
cssStickyHeaders_filteredToTop : true,
cssStickyHeaders_zIndex : 10
}
};
@ -102,21 +106,36 @@ $(function() {
<div id="main">
<p class="tip">
<em>NOTE!</em>
<p></p>
<br>
<div id="root" class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<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_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>
</div>
<h3><a href="#">Change log</a></h3>
<div>
<ul>
<li>In <span class="version">v2.16.4</span>, added the <code>cssStickyHeaders_filteredToTop</code> option. When <code>true</code> the table top will scroll into view after being filtered. 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. If setn to <code>false</code>, no scrolling is done.</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>
</ul><br>
</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>
</div>
</div>
<p>
<h1>CSS</h1>
<div id="css">

2
docs/index.html
View File

@ -498,7 +498,7 @@
<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.16.2</span>).</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-static-row.html">StaticRow widget</a> (<span class="version">v2.16</span>).</li>
<li><span class="results">&dagger;</span> <a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1; <span class="version updated">v2.16.2</span>)</li>
<li><a href="example-widget-css-sticky-header.html">Sticky header (css3) widget</a> (<span class="version">v2.14.2</span>; <span class="version updated">v2.16</span>).</li>
<li><a href="example-widget-css-sticky-header.html">Sticky header (css3) widget</a> (<span class="version">v2.14.2</span>; <span class="version updated">v2.16.4</span>).</li>
<li><span class="results">&dagger;</span> UITheme widget (<span class="version updated">v2.16.2</span>):
<ul>
<li><a href="example-widget-ui-theme.html">jQuery UI theme</a> (v2.0.9)</li>

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

@ -1,4 +1,4 @@
/*! tablesorter CSS Sticky Headers widget - updated 12/17/2013 (v2.15.0)
/*! tablesorter CSS Sticky Headers widget - updated 5/5/2014 (v2.16.4)
* Requires a modern browser, tablesorter v2.8+
*/
/*jshint jquery:true, unused:false */
@ -9,10 +9,11 @@
id: "cssStickyHeaders",
priority: 10,
options: {
cssStickyHeaders_offset : 0,
cssStickyHeaders_addCaption : false,
cssStickyHeaders_attachTo : null,
cssStickyHeaders_zIndex : 10
cssStickyHeaders_offset : 0,
cssStickyHeaders_addCaption : false,
cssStickyHeaders_attachTo : null,
cssStickyHeaders_filteredToTop : true,
cssStickyHeaders_zIndex : 10
},
init : function(table, thisWidget, c, wo) {
var $attach = $(wo.cssStickyHeaders_attachTo),
@ -44,8 +45,10 @@
});
});
c.$table.bind('filterEnd', function() {
// scroll top of table into view
window.scrollTo(0, c.$table.position().top);
if (wo.cssStickyHeaders_filteredToTop) {
// scroll top of table into view
window.scrollTo(0, c.$table.position().top);
}
});
},