Skip to content

table resize #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

table resize #15

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 127 additions & 54 deletions jquery.tablescroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,50 +31,50 @@ OTHER DEALINGS IN THE SOFTWARE.
;(function($){

var scrollbarWidth = 0;

String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
// http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
function getScrollbarWidth()
{
if (scrollbarWidth) return scrollbarWidth;
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'auto');
var w2 = $('div', div).innerWidth();
$(div).remove();
scrollbarWidth = (w1 - w2);
return scrollbarWidth;
}

$.fn.tableScroll = function(options)
{
if (options == 'undo')
{
var container = $(this).parent().parent();
if (container.hasClass('tablescroll_wrapper'))
{
container.find('.tablescroll_head thead').prependTo(this);
container.find('.tablescroll_foot tfoot').appendTo(this);
container.before(this);
container.empty();
}
return;
}
var methods={
undo:function(){
return this.each(function(){
if($(this).hasClass('tablescroll_body')){
var container=$(this).parent().parent().parent();
var thead=container.find('.tablescroll_head');
var head=thead.find('th').attr({style:''}).parent().html();

if(thead.length>0){

container.append($(this).removeClass('tablescroll_body').prepend('<thead>'+head+'<thead>')).find('.tablescroll').remove();
}
else{
container.append($(this).removeClass('tablescroll_body')).find('.tablescroll').remove();
}
$(this).find('thead:empty').remove();
}
});


},
init:function(options){


var settings = $.extend({},$.fn.tableScroll.defaults,options);

// Bail out if there's no vertical overflow
//if ($(this).height() <= settings.height)
//{
// return this;
//}

settings.scrollbarWidth = getScrollbarWidth();
settings.scrollbarWidth = core.getScrollbarWidth();

this.each(function()
return this.each(function()
{
var flush = settings.flush;

var flush = settings.flush;
var total=0;
var tb = $(this).addClass('tablescroll_body');

// find or create the wrapper div (allows tableScroll to be re-applied)
Expand All @@ -85,6 +85,7 @@ OTHER DEALINGS IN THE SOFTWARE.
else {
wrapper = $('<div class="tablescroll_wrapper"></div>').insertBefore(tb).append(tb);
}
var parent=wrapper.parent();

// check for a predefined container
if (!wrapper.parent('div').hasClass(settings.containerClass))
Expand All @@ -93,29 +94,25 @@ OTHER DEALINGS IN THE SOFTWARE.
}

var width = settings.width ? settings.width : tb.outerWidth();

width=core.toPixels(width,parent);
wrapper.css
({
'width': width+'px',
'height': settings.height+'px',
'width': width/parent.width()*100+'%',
'height': settings.height,
'overflow': 'auto'
});

tb.css('width',width+'px');
tb.css('width',width/tb.parent().width()*100+'%');

// with border difference
var wrapper_width = wrapper.outerWidth();
var diff = wrapper_width-width;

// assume table will scroll
wrapper.css({width:((width-diff)+settings.scrollbarWidth)+'px'});
tb.css('width',(width-diff)+'px');
wrapper.css({width:(width-diff)/parent.width()*100+'%'});
tb.css('width',(wrapper.width()-settings.scrollbarWidth)/tb.parent().width()*100+'%');

if (tb.outerHeight() <= settings.height)
{
wrapper.css({height:'auto',width:(width-diff)+'px'});
flush = false;
}


// using wrap does not put wrapper in the DOM right
// away making it unavailable for use during runtime
Expand All @@ -134,10 +131,12 @@ OTHER DEALINGS IN THE SOFTWARE.
$('th, td',thead_tr_first).each(function(i)
{
w = $(this).width();

$('th:eq('+i+'), td:eq('+i+')',thead_tr_first).css('width',w+'px');
$('th:eq('+i+'), td:eq('+i+')',tbody_tr_first).css('width',w+'px');
if (has_tfoot) $('th:eq('+i+'), td:eq('+i+')',tfoot_tr_first).css('width',w+'px');

var wpar=w/$(this).parent().width()*100+'%';


$('th:eq('+i+'), td:eq('+i+')',thead_tr_first).css('width',wpar);
if (has_tfoot) $('th:eq('+i+'), td:eq('+i+')',tfoot_tr_first).css('width',wpar);
});

if (has_thead)
Expand All @@ -152,28 +151,102 @@ OTHER DEALINGS IN THE SOFTWARE.

if (tbh != undefined)
{
tbh.css('width',width+'px');
tbh.css('width',width/parent.width()*100+'%');

if (flush)
{
$('tr:first th:last, tr:first td:last',tbh).css('width',(w+settings.scrollbarWidth)+'px');
tbh.css('width',wrapper.outerWidth() + 'px');
$('tr:first th:last, tr:first td:last',tbh).css('width',w/tb.width()*100+'%');
tbh.css('width',wrapper.outerWidth()/parent.width()*100+'%');
}
}

if (tbf != undefined)
{
tbf.css('width',width+'px');
tbf.css('width',width/parent.width()*100+'%');

if (flush)
{
$('tr:first th:last, tr:first td:last',tbf).css('width',(w+settings.scrollbarWidth)+'px');
tbf.css('width',wrapper.outerWidth() + 'px');
$('tr:first th:last, tr:first td:last',tbf).css('width',w/tb.width()*100+'%');
tbf.css('width',wrapper.outerWidth()/parent.width()*100+'%');
}
}
var ths=tbh.find('th');
var len=ths.length;
ths.each(function(i)
{

w = $(this).outerWidth();
var current=w/tb.outerWidth()*100;


var td = $('th:eq('+i+'), td:eq('+i+')',tbody_tr_first);
if(i!=(len-1)){
total+=current;

td.css('width',current+'%');
}
else{
td.css('width',(100-total)+'%');
}

});
});

return this;



}
};
var core={
toPixels:function(adjust,main){
adjust=String(adjust);

if(adjust.endsWith('%')){
size=parseInt(adjust.slice(0,-1))*main.parent().width()/100;
}
else if(adjust.endsWith('px')){
size=parseInt(adjust.slice(0,-2));
}
else if(adjust.endsWith('em')){
size=parseInt(adjust.slice(0,-1))*10;
}
else{
size=adjust*1;
}
return size;
},
getScrollbarWidth:function()
{
if (scrollbarWidth) return scrollbarWidth;
var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');
$('body').append(div);
var w1 = $('div', div).innerWidth();
div.css('overflow-y', 'auto');
var w2 = $('div', div).innerWidth();
$(div).remove();
scrollbarWidth = (w1 - w2);
return scrollbarWidth;
}
}
$.fn.tableScroll = function()
{
method=arguments[0];

// Check if the passed method exists
if(methods[method]) {

// If the method exists, store it for use
// Note: I am only doing this for repetition when using "each()", later.
method = methods[method];
arguments = Array.prototype.slice.call(arguments, 1);
// If the method is not found, check if the method is an object (JSON Object) or one was not sent.
}
else{

// If we passed parameters as the first object or no arguments, just use the "init" methods
method = methods.init;

}
return method.apply(this, arguments);
};

// public
Expand Down