From aa4017339de8eb242af8e86df82604e19b0fb900 Mon Sep 17 00:00:00 2001 From: Christopher Thomas Date: Thu, 29 Aug 2013 10:35:38 -0500 Subject: [PATCH] table resize table sizes are transformed into percentages for automatic resizing --- jquery.tablescroll.js | 181 +++++++++++++++++++++++++++++------------- 1 file changed, 127 insertions(+), 54 deletions(-) diff --git a/jquery.tablescroll.js b/jquery.tablescroll.js index 7596b3f..ce0a38e 100644 --- a/jquery.tablescroll.js +++ b/jquery.tablescroll.js @@ -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 = $('
'); - $('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(''+head+'')).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) @@ -85,6 +85,7 @@ OTHER DEALINGS IN THE SOFTWARE. else { wrapper = $('
').insertBefore(tb).append(tb); } + var parent=wrapper.parent(); // check for a predefined container if (!wrapper.parent('div').hasClass(settings.containerClass)) @@ -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 @@ -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) @@ -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 = $('
'); + $('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