jQuery Scrollable Table Plugin

All I can say is thank God for you and your plugin. I’ve been trying to get IE8 to allow me to scroll the body of a table but it doesn’t seem to like any height restrictions on table body length. This plugin helped me soo much-I wish I wouldn’t have spent the past 6 hours trying to figure out how to do this….

omg .. i find the plugin cound’t work in IE7.

Do you have any idea how to make it work ?

ermmm…

now it work back? i wonder whether is my IE issue or not.

I’m using the IETester to test whether it work. it some how the past few hour didn’t work .. now I close all and open it back .. it seem work.

i need to do a few more test .. btw, do you have any recommend tool to test in IE7 ?

dear dimas,

ok .. i also have a virtualbox (plugable version) recently, haven’t install with the troublesome browsers yet.

now i think i found what is the problem that cause in my application,
i use the following at the end of the code
$(‘#mytable’).tableScroll({ height: 200 });

where I suppose to use
$(document).ready(function() { $(‘#mytable’).tableScroll({ height: 200 }); });

but it work fine for me to use the previous method in IE6 and IE8 without problem.

i also wanna use your plugin together with the tablesorter.com, i think the combination will be the perfect solution

anyway .. will do more testing and report you if got any problem .. thanks a lot for your quick response and help ..

Hi Dimas

Thanks for you solution which works really well. I would be greatful if you could show me how to modify the plugin so that the header and first row as well as the first column can be frozen?

Many Thanks

Thanks for your quick reply which is much appreciated. Annoyingly its the locking of the first column that we are really keen to get working as we work with large tables. I was thinking along the lines of selecting the first column using JQuery from the original table then passing it to the plugin. Even a quick hack will be much appreciated.

Many thanks again

hi,
one problem is when setting the width of a table to 100% when the scrollbar is added to the right, thus enlarging the width of the full table and i have to scroll the window to the right to see the whole scrollbar. i need some solution to keep the table width with the scrollbar the same as the table without scrollbar.
thanks

Hi Dimas,

This solution is just what we are after altough we also have a requirement to be able to freeze the first column akin Excel as per Gee’s and now considering other third party datagrids. The only snag I came across from this solution is that the header columns didn’t appear to be inline with the datagrid. Any advice suggestion from anyone would be greatly appreciated.

thanks

Girma

Sorry: I made a mistake. The problem is the scaling of table’s column contained in a div with Width 100%.

There seems to be a bug in your code…

In your undo function you have…

container.empty();

- This leave’s an empty div as an artifact in the dom, running your undo function multiple times leaves multiple artifacts.

Try using this…

container.remove();

Seems like a good replacement to me…

I have also written another line to reset the width’s of the table, leaving the table in its original state after the undo function is run.

Here’s my own take on your undo function.
Hope you find a use for this

if (options == 'undo') {
    var container = $(this).parent().parent();
    container.find('.tablescroll_head thead').prependTo(this);
    container.find('.tablescroll_foot tfoot').appendTo(this);
    container.find('.tablescroll_body, th, td').width('');
    container.before(this);
    container.remove();
    return;
}

Your plugin works well but I think it needs some CSS adjustments…

I copied the example from your site and adapted it to my web app. I noticed a slight difference between the spacing of some header columns and their corresponding data columns.

I went through your code and finally discovered that removing this CSS specification :

/*
.tablescroll td
{ padding:3px 5px; }
*/

…makes everything work as expected! Looks like adding some padding to the table cells makes the width calculations go wrong.

I’m not sure of this one but when table header’s width is set by using the $(this).width() of its child cell, maybe the padding is appended to the previously retrieved width . As a result, the total width gets larger than expected.

I’m using FF 3.6.6.

Thanks!

Mat

Nice one!

But I am having a problem with alignment when using “colspan” in any cell inside tbody group.

can anyone help with this?

Example:

	<tbody>
		<tr class="first">
		  <td colspan="6">Holtsville</td>
		</tr>
		<tr>
		  <td>Holtsville</td>
		  <td>NY</td>
		  <td>00501</td>
		  <td>40.8152</td>
		 <td>-73.0455</td>
		  <td>Suffolk</td>
		</tr>
		<tr>
		  <td>Holtsville</td>
		  <td>NY</td>
		  <td>00544</td>
		  <td>40.8152</td>
		  <td>-73.0455</td>
		  <td>Suffolk</td>
		</tr>
	</tbody>

Doesn’t seem to get the widths of the column headers right if I have hidden columns in my table (I need the hidden columns for the table sorting plugin that I’m using.

hi dimas,

sorry – i accidentaly submitted my post too early ..

thx for your reply. i’ve tried the undo method but unfortunately it seems to be a bit buggy.

i’ve used the sample supplied from the download and changed the code as u suggested:

jQuery(document).ready(function($)
{
$(‘#thetable’).tableScroll({height:150});
$(‘#thetable’).tableScroll(‘undo’);
$(‘#thetable’).tableScroll({height:150});

$(‘#thetable2′).tableScroll();
});

when checking the source code after that, you’ll notice that inside the <div class=”tablescroll> there’s a second, obsolete div:

<div class=”tablescroll” ></div>

if u undo + re-apply a several times it will be added each time!

when using the plugin on a table which is placed within several other wrappers, things are chaotic – unfortunately i couldn’t reproduce yet – but other div elements outside the table are getting involved as if there’s injected some div which isn’t closed and the html gets messed up.

so i think the easiest way to solve this should be a “init” flag after the plugin is applied for the first time and if it’s already initialized it should only perform the required other functions.

hope i could describe my problem properly

thx