242 lines
7.5 KiB
JavaScript
242 lines
7.5 KiB
JavaScript
|
/*!
|
||
|
|
Copyright (C) 2011 T. Connell & Associates, Inc.
|
||
|
|
|
||
|
|
Dual-licensed under the MIT and GPL licenses
|
||
|
|
|
||
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||
|
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
|
||
|
|
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||
|
|
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||
|
|
|
||
|
|
Resizable scroller widget for the jQuery tablesorter plugin
|
||
|
|
|
||
|
|
Version 2.0 - modified by Rob Garrison (4/12/2013)
|
||
|
|
Requires jQuery, v1.2.3 or higher
|
||
|
|
Requires the tablesorter plugin, v2.0 or higher, available at http://mottie.github.com/tablesorter/docs/
|
||
|
|
|
||
|
|
Usage:
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
$('table.tablesorter').tablesorter({
|
||
|
|
widgets: ['zebra', 'scroller'],
|
||
|
|
widgetOptions : {
|
||
|
|
scroller_height : 300, // height of scroll window
|
||
|
|
scroller_barWidth : 17, // scroll bar width
|
||
|
|
scroller_jumpToHeader : true, // header snap to browser top when scrolling the tbody
|
||
|
|
scroller_idPrefix : 's_' // cloned thead id prefix (random number added to end)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
Website: www.tconnell.com
|
||
|
|
*/
|
||
|
|
/*jshint browser:true, jquery:true, unused:false */
|
||
|
|
;(function($){
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
$.fn.hasScrollBar = function(){
|
||
|
|
return this.get(0).scrollHeight > this.height();
|
||
|
|
};
|
||
|
|
var ts = $.tablesorter;
|
||
|
|
|
||
|
|
ts.window_resize = function(){
|
||
|
|
if (this.resize_timer) {
|
||
|
|
clearTimeout(this.resize_timer);
|
||
|
|
}
|
||
|
|
this.resize_timer = setTimeout(function(){
|
||
|
|
$(this).trigger('resizeEnd');
|
||
|
|
}, 250);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Add extra scroller css
|
||
|
|
$(function(){
|
||
|
|
var s = '<style>' +
|
||
|
|
'.tablesorter-scroller-header table.tablesorter { margin-bottom: 0; }' +
|
||
|
|
'.tablesorter-scroller-table table.tablesorter { margin-top: 0; } ' +
|
||
|
|
'.tablesorter-scroller-table .tablesorter-filter-row, .tablesorter-scroller-table tfoot { display: none; }' +
|
||
|
|
'.tablesorter-scroller-table table.tablesorter thead tr.tablesorter-headerRow * {' +
|
||
|
|
'line-height:0;height:0;border:none;background-image:none;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;overflow:hidden;' +
|
||
|
|
'}</style>';
|
||
|
|
$(s).appendTo('body');
|
||
|
|
});
|
||
|
|
|
||
|
|
ts.addWidget({
|
||
|
|
id: 'scroller',
|
||
|
|
priority: 60, // run after the filter widget
|
||
|
|
options: {
|
||
|
|
scroller_height : 300,
|
||
|
|
scroller_barWidth : 17,
|
||
|
|
scroller_jumpToHeader: true,
|
||
|
|
scroller_idPrefix : 's_'
|
||
|
|
},
|
||
|
|
init: function(table, thisWidget, c, wo){
|
||
|
|
var $win = $(window);
|
||
|
|
//Setup window.resizeEnd event
|
||
|
|
$win
|
||
|
|
.bind('resize', ts.window_resize)
|
||
|
|
.bind('resizeEnd', function(e) {
|
||
|
|
// 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') {
|
||
|
|
//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', ts.window_resize);
|
||
|
|
table.config.widgetOptions.scroller_resizeWidth();
|
||
|
|
$win.bind('resize', ts.window_resize);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
format: function(table, c, wo) {
|
||
|
|
var h, $hdr, id, t, resize, $cells,
|
||
|
|
$win = $(window),
|
||
|
|
$tbl = c.$table,
|
||
|
|
flag = false,
|
||
|
|
filterInputs = 'input, select';
|
||
|
|
|
||
|
|
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
|
||
|
|
id = wo.scroller_id = wo.scroller_idPrefix + Math.floor(Math.random() * 101);
|
||
|
|
|
||
|
|
$hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $tbl.find('thead:first').html() + '</thead></table>');
|
||
|
|
$tbl
|
||
|
|
.wrap('<div id="' + id + '" class="tablesorter-scroller" style="text-align:left;" />')
|
||
|
|
.before($hdr)
|
||
|
|
.find('.tablesorter-filter-row').addClass('hideme');
|
||
|
|
|
||
|
|
$cells = $hdr
|
||
|
|
.wrap('<div class="tablesorter-scroller-header" style="width:' + $tbl.width() + ';" />')
|
||
|
|
.find('.' + ts.css.header)
|
||
|
|
.bind('mousedown', function(){
|
||
|
|
this.onselectstart = function(){ return false; };
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$tbl
|
||
|
|
.wrap('<div class="tablesorter-scroller-table" style="height:' + h + 'px;width:' + $tbl.width() + ';overflow-y:scroll;" />')
|
||
|
|
.unbind('sortEnd.tsScroller')
|
||
|
|
.bind('sortEnd.tsScroller', function(){
|
||
|
|
c.$headers.each(function(i){
|
||
|
|
var t = $cells.eq(i);
|
||
|
|
t
|
||
|
|
.attr('class', $(this).attr('class'))
|
||
|
|
// remove processing icon
|
||
|
|
.removeClass(ts.css.processing + ' ' + c.cssProcessing);
|
||
|
|
if (ts.css.icon){
|
||
|
|
t
|
||
|
|
.find('.' + ts.css.icon)
|
||
|
|
.attr('class', $(this).find('.' + ts.css.icon).attr('class'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// make scroller header sortable
|
||
|
|
c.$headers.find(c.selectorSort).add( c.$headers.filter(c.selectorSort) ).each(function(i){
|
||
|
|
var t = $(this);
|
||
|
|
$cells.eq(i)
|
||
|
|
// clicking on new header will trigger a sort
|
||
|
|
.bind('mouseup', function(e){
|
||
|
|
t.trigger(e, true); // external mouseup flag (click timer is ignored)
|
||
|
|
})
|
||
|
|
// prevent header text selection
|
||
|
|
.bind('mousedown', function(){
|
||
|
|
this.onselectstart = function(){ return false; };
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// look for filter widget
|
||
|
|
$tbl.bind('filterEnd', function(){
|
||
|
|
if (flag) { return; }
|
||
|
|
$cells.each(function(i){
|
||
|
|
$(this).find(filterInputs).val( c.$filters.find(filterInputs).eq(i).val() );
|
||
|
|
});
|
||
|
|
});
|
||
|
|
$hdr.find(filterInputs).bind('keyup search', function(e){
|
||
|
|
// ignore arrow and meta keys; allow backspace
|
||
|
|
if ((e.which < 32 && e.which !== 8) || (e.which >= 37 && e.which <=40)) { return; }
|
||
|
|
flag = true;
|
||
|
|
var $f = $(this), col = $f.attr('data-column');
|
||
|
|
c.$filters.find(filterInputs).eq(col)
|
||
|
|
.val( $f.val() )
|
||
|
|
.trigger('search');
|
||
|
|
setTimeout(function(){
|
||
|
|
flag = false;
|
||
|
|
}, wo.filter_searchDelay);
|
||
|
|
});
|
||
|
|
|
||
|
|
resize = function(){
|
||
|
|
var d,
|
||
|
|
//Hide other scrollers so we can resize
|
||
|
|
$div = $('div.scroller[id != "' + id + '"]').hide();
|
||
|
|
|
||
|
|
$tbl.find('thead').show();
|
||
|
|
|
||
|
|
//Reset sizes so parent can resize.
|
||
|
|
$hdr
|
||
|
|
.width(0)
|
||
|
|
.parent().width(0)
|
||
|
|
.find('th,td').width(0);
|
||
|
|
|
||
|
|
$tbl
|
||
|
|
.width(0)
|
||
|
|
.find('thead').find('th,td').width(0);
|
||
|
|
d = $tbl.parent();
|
||
|
|
d.width(0);
|
||
|
|
|
||
|
|
d.parent().trigger('resize');
|
||
|
|
// Shrink a bit to accommodate scrollbar
|
||
|
|
d.width( d.parent().innerWidth() - ( d.parent().hasScrollBar() ? wo.scroller_barWidth : 0 ) );
|
||
|
|
|
||
|
|
$tbl.width( d.innerWidth() - ( d.hasScrollBar() ? wo.scroller_barWidth : 0 ) );
|
||
|
|
$tbl.find('thead').find('th,td').filter(':visible').each(function(i, c){
|
||
|
|
var $th = $(c),
|
||
|
|
//Wrap in browser detect??
|
||
|
|
w = parseInt( $th.css('min-width').replace('auto', '0').replace(/(px|em)/, ''), 10 );
|
||
|
|
if ( $th.width() < w ) {
|
||
|
|
$th.width(w);
|
||
|
|
} else {
|
||
|
|
w = $th.width();
|
||
|
|
}
|
||
|
|
$hdr.find('th,td').eq(i).width(w);
|
||
|
|
});
|
||
|
|
|
||
|
|
$hdr.width($tbl.innerWidth());
|
||
|
|
$div.show();
|
||
|
|
};
|
||
|
|
|
||
|
|
//Expose to external calls
|
||
|
|
wo.scroller_resizeWidth = resize;
|
||
|
|
|
||
|
|
resize();
|
||
|
|
|
||
|
|
$tbl.find('thead').css('visibility', 'hidden');
|
||
|
|
c.isScrolling = true;
|
||
|
|
|
||
|
|
t = $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) {
|
||
|
|
$win.scrollTop( $hdr.offset().top );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//Sorting, so scroll to top
|
||
|
|
$tbl.parent().animate({ scrollTop: 0 }, 'fast');
|
||
|
|
|
||
|
|
},
|
||
|
|
remove : function(table, c, wo){
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
})(jQuery);
|