mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
This commit is contained in:
Mottie
parent
cb63aade3f
commit
bc85c32190
@ -8,6 +8,8 @@
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui-latest.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
@ -41,28 +43,40 @@
|
||||
|
||||
<script id="js">$(function(){
|
||||
|
||||
$("table").tablesorter({
|
||||
$('.tablesorter').tablesorter({
|
||||
theme: 'jui',
|
||||
widthFixed : true,
|
||||
showProcessing: true,
|
||||
headerTemplate : '{content} {icon}',
|
||||
widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
|
||||
widgetOptions : {
|
||||
scroller_height : 300,
|
||||
scroller_barWidth : 18,
|
||||
scroller_upAfterSort: true,
|
||||
scroller_jumpToHeader: true,
|
||||
scroller_idPrefix : 's_'
|
||||
// In tablesorter v2.18.5 the scroll bar width is auto-detected
|
||||
// add a value here to override the auto-detected setting
|
||||
scroller_barWidth : null
|
||||
// scroll_idPrefix was removed in v2.18.0
|
||||
// scroller_idPrefix : 's_'
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
<script>
|
||||
$(function() {
|
||||
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
|
||||
|
||||
$('.options').tablesorter({
|
||||
theme: 'jui',
|
||||
headerTemplate : '{content} {icon}',
|
||||
widthFixed: true,
|
||||
widgets: ['uitheme','stickyHeaders']
|
||||
});
|
||||
|
||||
$('link.theme').each(function(){ this.disabled = true; });
|
||||
|
||||
var b = true, $tbl,
|
||||
$c = $('#case'),
|
||||
themes = 'default blue green grey ice black-ice dark dropbox',
|
||||
themes = 'default blue green grey ice black-ice dark dropbox metro-dark',
|
||||
i, o = '', t = themes.split(' ');
|
||||
for (i = 0; i < t.length; i++) {
|
||||
o += '<option value="' + t[i] + '">' + t[i] + '</option>';
|
||||
@ -70,19 +84,26 @@ $(function() {
|
||||
|
||||
$('select')
|
||||
.append(o)
|
||||
.val('jui')
|
||||
.change(function(){
|
||||
var theme = $(this).val().toLowerCase(),
|
||||
name = theme === 'jui' ? 'ui-theme' : theme,
|
||||
// ui-theme is added by the themeswitcher
|
||||
files = $('link.theme, link.ui-theme').each(function(){
|
||||
files = $('link.theme').each(function(){
|
||||
this.disabled = true;
|
||||
});
|
||||
files.filter('.' + name).each(function(){
|
||||
this.disabled = false;
|
||||
});
|
||||
$('table')
|
||||
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
|
||||
.addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme) );
|
||||
|
||||
// refresh uitheme widget class names
|
||||
$('.tablesorter').each(function(){
|
||||
if (this.config) {
|
||||
this.config.theme = theme === 'black-ice' ? 'blackice' : theme;
|
||||
}
|
||||
});
|
||||
$('table').trigger('applyWidgets');
|
||||
|
||||
// make sure columns align
|
||||
$(window).trigger('resize');
|
||||
}).change();
|
||||
@ -111,8 +132,12 @@ $(function() {
|
||||
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<p></p>
|
||||
<br>
|
||||
<div class="accordion">
|
||||
|
||||
<h3><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.17+</span>
|
||||
<ul>
|
||||
@ -125,18 +150,78 @@ $(function() {
|
||||
</li>
|
||||
<li>This widget can not be applied to the original plugin and requires jQuery version 1.4+ to function properly; if you need to make it work with older versions of jQuery and the plugin, please use <a href="http://tconnell.com/samples/scroller/">this version</a> of the widget.</li>
|
||||
<li>This widget was originally written by <a href="http://tconnell.com/samples/scroller/">Connell & Associates, Inc.</a> and is dual-licensed under the MIT and GPL licenses. It has been modified to work with tablesorter version 2.9+.</li>
|
||||
<li>Scroller widget options include:
|
||||
<ul>
|
||||
<li><code>scroller_height</code> - Set the height of the scroll window in pixels (default is <code>300</code>).</li>
|
||||
<li><code>scroller_barWidth</code> - Set the width (default is <code>17</code>) of the scroll bar in pixels. This will need to be changed if using a custom scroll bar plugin.</li>
|
||||
<li><code>scroller_idPrefix</code> - This option contains a prefix string which is added to a random number. This id is then assigned to the wrapping scroll element. Modification is not necessary unless the prefix interferes with ID's already on your page.</li>
|
||||
<li><code>scroller_upAfterSort</code> - when <code>true</code> (default), the scroller automatically scrolls the inner window back to the top after sorting. Set this option to <code>false</code> to prevent this, or stop the window from scrolling after interacting with a table cell (e.g. clicking on a checkbox); new in <span class="version">v2.17.3</span>.</li>
|
||||
<li><code>scroller_jumpToHeader</code> - When <code>true</code>, this option makes the table header jump into view when the table body is not scolled to the top and while scrolling up the page. It's not perfect, but it works. Disable it as desired.<br>
|
||||
<span class="remark">*</span> <em>To see the difference, toggle the button in the demo below, then scroll down & up the page using a mouse wheel with the cursor at the horizontal center of the page and about 100 pixels from the top, so the cursor is within the table body.</em></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</div>
|
||||
|
||||
<h3><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<h4>Filter widget defaults (added inside of tablesorter <code>widgetOptions</code>)</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-jui" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="scroller-height">
|
||||
<td><span class="permalink">scroller_height</span></td>
|
||||
<td>300</td>
|
||||
<td>Set the height of the scroll window in pixels.</td>
|
||||
</tr>
|
||||
|
||||
<tr id="scroller-bar-width">
|
||||
<td><a href="#" class="permalink">scroller_barWidth</a></td>
|
||||
<td>null</td>
|
||||
<td>Set the width of the scroll bar in pixels (<span class="version">v2.18.5</span>)
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
As of <span class="version">v2.18.5</span>, this option's default was changed to <code>null</code> because internal code was added to detect the scroll bar width which changes dramatically depending on the browser window zoom level.<br>
|
||||
<br>
|
||||
If you are using a custom scroll bar plugin, this option will still accept a scroll bar width value which overrides the scroll bar width auto-detection.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="scroller-id-prefix">
|
||||
<td><a href="#" class="permalink alert">scroller_idPrefix</a></td>
|
||||
<td>"s_"</td>
|
||||
<td>This option contains a prefix string which is added to a random number (<span class="alert">Removed</span>).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This option was been completely removed in <span class="version alert">v2.18.0</span> as the id is now obtained from the unique namespace.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="scroller-up-after-sort">
|
||||
<td><a href="#" class="permalink">scroller_upAfterSort</a></td>
|
||||
<td>true</td>
|
||||
<td>
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
When <code>true</code>, the scroller automatically scrolls the inner window back to the top after sorting.<br>
|
||||
<br>
|
||||
Set this option to <code>false</code> to prevent this behaviour, or to stop the window from scrolling after interacting with a table cell (e.g. clicking on a checkbox); new in <span class="version">v2.17.3</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="scroller-jump-to-header">
|
||||
<td><a href="#" class="permalink">scroller_jumpToHeader</a></td>
|
||||
<td>true</td>
|
||||
<td>
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
When <code>true</code>, this option makes the table header jump into view when the table body is not scolled to the top and while scrolling up the page. It's not perfect, but it works. Disable it as desired.<br>
|
||||
<br>
|
||||
<span class="remark">*</span> <em>To see the difference, toggle the button in the demo below, then scroll down & up the page using a mouse wheel with the cursor at the horizontal center of the page and about 100 pixels from the top, so the cursor is within the table body.</em>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
@ -150,7 +235,7 @@ $(function() {
|
||||
</select><br>
|
||||
<br>
|
||||
<button type="button">Toggle</button> scroller_jumpToHeader : <span id="case">true</span> (see the note above)<span class="remark">*</span>
|
||||
<br>
|
||||
<p></p>
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
|
||||
@ -508,7 +508,7 @@
|
||||
<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.18.0</span>)</li>
|
||||
<li><span class="results">†</span> <a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.18.0</span>)</li>
|
||||
<li><span class="results">†</span> <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>; <span class="version updated">v2.18.0</span>).</li>
|
||||
<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.18.5</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>; <span class="version updated">v2.17.3</span>).</li>
|
||||
<li><span class="results">†</span> <a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1; <span class="version updated">v2.18.0</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.18.3</span>).</li>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
Resizable scroller widget for the jQuery tablesorter plugin
|
||||
|
||||
Version 2.0 - modified by Rob Garrison 4/12/2013; updated 10/26/2014 (v2.18.0)
|
||||
Version 2.0 - modified by Rob Garrison 4/12/2013; updated 1/15/2015 (v2.18.5)
|
||||
Requires jQuery v1.7+
|
||||
Requires the tablesorter plugin, v2.8+, available at http://mottie.github.com/tablesorter/docs/
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
Website: www.tconnell.com
|
||||
*/
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
;(function($){
|
||||
;(function($, window){
|
||||
"use strict";
|
||||
|
||||
$.fn.hasScrollBar = function(){
|
||||
@ -52,6 +52,7 @@ ts.window_resize = function(){
|
||||
// Add extra scroller css
|
||||
$(function(){
|
||||
var s = '<style>' +
|
||||
'.tablesorter-scrollbar-measure { width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px; } ' +
|
||||
'.tablesorter-scroller-reset { width: auto !important; } ' +
|
||||
'.tablesorter-scroller { text-align: left; overflow: hidden; }' +
|
||||
'.tablesorter-scroller-header { overflow: hidden; }' +
|
||||
@ -70,9 +71,10 @@ ts.addWidget({
|
||||
priority: 60, // run after the filter widget
|
||||
options: {
|
||||
scroller_height : 300,
|
||||
scroller_barWidth : 18,
|
||||
scroller_jumpToHeader: true,
|
||||
scroller_upAfterSort: true
|
||||
scroller_upAfterSort: true,
|
||||
// bar width is now calculated; set a value to override
|
||||
scroller_barWidth : null
|
||||
},
|
||||
init: function(table, thisWidget, c, wo){
|
||||
var $win = $(window),
|
||||
@ -83,7 +85,7 @@ ts.addWidget({
|
||||
.bind('resizeEnd' + namespace, function() {
|
||||
// init is run before format, so scroller_resizeWidth
|
||||
// won't be defined within the "c" or "wo" parameters
|
||||
if (typeof table.config.widgetOptions.scroller_resizeWidth === 'function') {
|
||||
if ($.isFunction(table.config.widgetOptions.scroller_resizeWidth)) {
|
||||
// IE calls resize when you modify content, so we have to unbind the resize event
|
||||
// so we don't end up with an infinite loop. we can rebind after we're done.
|
||||
$win.unbind('resize' + namespace, ts.window_resize);
|
||||
@ -93,28 +95,37 @@ ts.addWidget({
|
||||
});
|
||||
},
|
||||
format: function(table, c, wo) {
|
||||
var h, $hdr, t, resize, $cells,
|
||||
var maxHt, tbHt, $hdr, resize, getBarWidth, $cells,
|
||||
// c.namespace contains a unique tablesorter ID, per table
|
||||
id = c.namespace.slice(1) + 'tsscroller',
|
||||
$win = $(window),
|
||||
$tbl = c.$table;
|
||||
|
||||
if (!c.isScrolling) {
|
||||
h = wo.scroller_height || 300;
|
||||
t = $tbl.find('tbody').height();
|
||||
if (t !== 0 && h > t) { h = t + 10; } // Table is less than h px
|
||||
maxHt = wo.scroller_height || 300;
|
||||
tbHt = $tbl.children('tbody').height();
|
||||
if (tbHt !== 0 && maxHt > tbHt) { maxHt = tbHt + 10; } // Table is less than h px
|
||||
|
||||
$hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $tbl.find('thead:first').html() + '</thead></table>');
|
||||
$hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0>' +
|
||||
'<thead>' + $tbl.find('thead:first').html() + '</thead>' +
|
||||
'</table>');
|
||||
if (c.$extraTables && c.$extraTables.length) {
|
||||
c.$extraTables = c.$extraTables.add($hdr);
|
||||
} else {
|
||||
c.$extraTables = $hdr;
|
||||
}
|
||||
$tbl
|
||||
.wrap('<div id="' + id + '" class="tablesorter-scroller" />')
|
||||
.before($hdr)
|
||||
// shrink filter row but don't completely hide it because the inputs/selectors may distort the columns
|
||||
.find('.tablesorter-filter-row').addClass('hideme');
|
||||
|
||||
$cells = $hdr
|
||||
.wrap('<div class="tablesorter-scroller-header" style="width:' + $tbl.width() + ';" />')
|
||||
.find('.' + ts.css.header);
|
||||
|
||||
$tbl.wrap('<div class="tablesorter-scroller-table" style="height:' + h + 'px;width:' + $tbl.width() + ';" />');
|
||||
// use max-height, so the height resizes dynamically while filtering
|
||||
$tbl.wrap('<div class="tablesorter-scroller-table" style="max-height:' + maxHt + 'px;width:' + $tbl.width() + ';" />');
|
||||
|
||||
// make scroller header sortable
|
||||
ts.bindEvents(table, $cells);
|
||||
@ -124,37 +135,59 @@ ts.addWidget({
|
||||
ts.filter.bindSearch( $tbl, $hdr.find('.' + ts.css.filter) );
|
||||
}
|
||||
|
||||
// modified from http://davidwalsh.name/detect-scrollbar-width
|
||||
getBarWidth = function(){
|
||||
var $scrollDiv = $('<div class="tablesorter-scrollbar-measure">').appendTo('body'),
|
||||
div = $scrollDiv[0],
|
||||
barWidth = div.offsetWidth - div.clientWidth;
|
||||
$scrollDiv.remove();
|
||||
return barWidth;
|
||||
};
|
||||
|
||||
resize = function(){
|
||||
var d, b, $h, $th, w,
|
||||
// Hide other scrollers so we can resize
|
||||
$div = $('div.scroller[id != "' + id + '"]').hide();
|
||||
$div = $('div.tablesorter-scroller[id != "' + id + '"]').hide();
|
||||
|
||||
$tbl.find('thead').show();
|
||||
$tbl.children('thead').show();
|
||||
// only remove colgroup if it was added by the plugin
|
||||
// the $.tablesorter.fixColumnWidth() function already does this (v2.18.5)
|
||||
// but we need to get "accurate" resized measurements here - see issue #680
|
||||
$tbl.children('colgroup.tablesorter-colgroup').remove();
|
||||
$hdr.children('colgroup').remove();
|
||||
|
||||
// Reset sizes so parent can resize.
|
||||
$tbl
|
||||
.addClass('tablesorter-scroller-reset')
|
||||
.find('thead').find('.tablesorter-header-inner').addClass('tablesorter-scroller-reset');
|
||||
.children('thead')
|
||||
.find('.tablesorter-header-inner').addClass('tablesorter-scroller-reset').end()
|
||||
.find('.tablesorter-filter-row').show();
|
||||
d = $tbl.parent();
|
||||
d.addClass('tablesorter-scroller-reset');
|
||||
|
||||
d.parent().trigger('resize');
|
||||
|
||||
// include left & right border widths
|
||||
b = parseInt( $tbl.css('border-left-width'), 10 ) + parseInt( $tbl.css('border-right-width'), 10 );
|
||||
|
||||
// Shrink a bit to accommodate scrollbar
|
||||
d.width( d.parent().innerWidth() - ( d.parent().hasScrollBar() ? wo.scroller_barWidth : 0 ) );
|
||||
w = d.innerWidth() - ( d.hasScrollBar() ? wo.scroller_barWidth : 0 );
|
||||
w = ( wo.scroller_barWidth || getBarWidth() ) + b;
|
||||
|
||||
d.width( d.parent().innerWidth() - ( d.parent().hasScrollBar() ? w : 0 ) );
|
||||
w = d.innerWidth() - ( d.hasScrollBar() ? w : 0 );
|
||||
$tbl.width( w );
|
||||
$hdr.width( w );
|
||||
$hdr.parent().width( w );
|
||||
|
||||
$tbl.closest('.tablesorter-scroller').find('.tablesorter-scroller-reset').removeClass('tablesorter-scroller-reset');
|
||||
$tbl
|
||||
.closest('.tablesorter-scroller')
|
||||
.find('.tablesorter-scroller-reset')
|
||||
.removeClass('tablesorter-scroller-reset');
|
||||
|
||||
// include left & right border widths
|
||||
b = parseInt( $tbl.css('border-left-width'), 10 ) + parseInt( $tbl.css('border-right-width'), 10 );
|
||||
$h = $hdr.find('thead').children().children();
|
||||
|
||||
// adjust cloned header to match original table width - includes wrappers, headers, and header inner div
|
||||
$tbl.find('thead').children().children().each(function(i, c){
|
||||
$tbl.children('thead').children().children().each(function(i, c){
|
||||
$th = $(c).find('.tablesorter-header-inner');
|
||||
if ($th.length) {
|
||||
// I have no idea why this is in here anymore LOL
|
||||
@ -164,14 +197,23 @@ ts.addWidget({
|
||||
} else {
|
||||
w = $th.width();
|
||||
}
|
||||
|
||||
$h.eq(i)
|
||||
.find('.tablesorter-header-inner').width(w - b)
|
||||
// set inner width first
|
||||
.parent()
|
||||
.width( $th.parent().width() - b );
|
||||
}
|
||||
});
|
||||
|
||||
// refresh colgroup & copy to cloned header
|
||||
$.tablesorter.fixColumnWidth( table );
|
||||
$h = $tbl.children('colgroup').clone();
|
||||
if ($h.length) {
|
||||
$hdr.prepend($h);
|
||||
}
|
||||
|
||||
// hide filter row because filterEnd event fires
|
||||
$tbl.children('thead').find('.tablesorter-filter-row').hide();
|
||||
|
||||
$div.show();
|
||||
};
|
||||
|
||||
@ -183,13 +225,13 @@ ts.addWidget({
|
||||
$tbl.find('thead').css('visibility', 'hidden');
|
||||
c.isScrolling = true;
|
||||
|
||||
t = $tbl.parent().parent().height();
|
||||
tbHt = $tbl.parent().parent().height();
|
||||
|
||||
// The header will always jump into view if scrolling the table body
|
||||
$tbl.parent().bind('scroll', function(){
|
||||
if (wo.scroller_jumpToHeader) {
|
||||
var pos = $win.scrollTop() - $hdr.offset().top;
|
||||
if ($(this).scrollTop() !== 0 && pos < t && pos > 0) {
|
||||
if ($(this).scrollTop() !== 0 && pos < tbHt && pos > 0) {
|
||||
$win.scrollTop( $hdr.offset().top );
|
||||
}
|
||||
}
|
||||
@ -217,4 +259,4 @@ ts.addWidget({
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
})(jQuery, window);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user