jQuery Scrollable Table Plugin

141 responses to “jQuery Scrollable Table Plugin”

1. 
   Leenix May 27, 2011 at 3:45 am | Permalink

   Great Plugin, thx.

   However, ive found it acts very strange when the table your effecting is itself wrapped in a normal table (it adds rightside padding for some reason)

   If i get to the bottom of it, ill post further.

2. 
   Leenix May 27, 2011 at 6:20 am | Permalink

   I found changing width:0px; on line 39 of the code resolved my issue.

   Hope that helps someone else.

3. 
   Deepak Kr Sharma June 16, 2011 at 2:48 am | Permalink

   Please explain the use of flush. I want to have the vertical scroll on the right of the total width of newly created div not at the end of Thead and TBody column???

   Plz.

4. 
   ColdFusion Developer June 29, 2011 at 2:04 pm | Permalink

   Thanks for developing this. I can totally relate to your comment about “build[ing] out of necessity”. You saved me a bunch of time by sharing this project. Kudos!

5. 
   Collymitch July 27, 2011 at 3:30 am | Permalink

   Nice Plugin, exactly what I was looking for.

   Thanks also to Larry Woods (February 4, 2011 at 7:49 pm), I also had issues where the CSS formatting was missing if the number of rows resulted in the height being less than the scroll bar height.

   Looking great now.
   Thanks!

6. 
   Christian Magill July 29, 2011 at 9:49 am | Permalink

   Nice! I’d love to see a sort by column option as well.

7. 
   joshintosh August 8, 2011 at 10:02 am | Permalink

   Hi Dimas,
   Markus Ernst asked a while back about getting the data in the table to display for print. I had the same problem and discovered that if you use this rule in your print css you can get the data to display for print:
   .tablescroll_wrapper {
   overflow: visible !important;
   height: 100% !important;
   }
   Hope that helps someone. Thanks for the plugin Dimas!

8. 
   David McFarlane August 10, 2011 at 10:32 pm | Permalink

   I have been trying to plug this into some tables today that sometimes have a second set of titles (spanning multiple columns).

   I replaced this line:

   var thead_tr_first = $('thead tr:first',tb);
   

   with:

   if (spantitle)
   {
   	var thead_tr_first = $('thead tr:eq(1)',tb);
   }
   else
   {
   	var thead_tr_first = $('thead tr:eq(0)',tb);
   }
   

   and set the spantitle variable before calling tablescroll.

   If spantitle is true, it skips over the widths for the first row and uses the second row as the basis for the column widths.

   I hope this helps others. I’d also like to add my thanks. Apart from this minor issue, this works great.

9. 
   ramana August 10, 2011 at 11:57 pm | Permalink

   Table header are not properly aligned with the data, looks like the header widths are not measured properly. My table is retrieved through a AJAX call when i click on a tab. Here is the code snippet.

   $(function(){
   	$('#tabs').tabs({
   		select: function(event, ui) {
   			if(ui.panel.id == 'tabs-7'){
   				$('#tabs-7').html($.ajax({url: "./scripts/table.php",async: false}).responseText);
   				$('#mytbl').tableScroll({height:400,width:800}); 
   			}
   		}
   	});
   });
   

10. 
    Gary August 16, 2011 at 10:18 am | Permalink

    Its a great plugin…
    How can i make this work with live or livequery, any ideas?

11. 
    Gary August 16, 2011 at 1:15 pm | Permalink

    Figured out how to take it live

    jQuery(document).ready(function($)
    {
    	$('#thetable').livequery(function(){
    		$(this).tableScroll({height:650});
    	});
    	$('#thetable2').livequery(function(){
    		$(this).tableScroll({height:650});
    	});
    });
    

12. 
    Brian August 23, 2011 at 6:28 am | Permalink

    You really helped me out here, thanks!

13. 
    borconi August 25, 2011 at 7:18 am | Permalink

    @ramana try this:

    $(function(){
    	$('#tabs').tabs({
    		select: function(event, ui) {
    			if(ui.panel.id == 'tabs-7'){
    				$('#tabs-7').html($.ajax({url: "./scripts/table.php",async: false}).responseText);
    				$('#mytbl').tableScroll({height:400,width:800,flush:false});
    			}
    		}
    	});
    });
    

14. 
    Ara August 29, 2011 at 11:47 am | Permalink

    I am having the same problem as @ramana.. The headers won’t align properly with the data…

15. 
    Thomas Huber September 1, 2011 at 11:26 am | Permalink

    I needed to make tables inside of tables for popups to other items… Yeah I know. Just being difficult. So I changed this and it seemed to work. Looks for the immediate child sets so I do not have to worry about it finding every thead or tfoot and pre-pending it to the first thead grouping it does.

    Changed from:

    if (has_thead) 
    {
    	var tbh = $('').insertBefore(wrapper).prepend($('thead',tb));
    }
    
    if (has_tfoot) 
    {
    	var tbf = $('').insertAfter(wrapper).prepend($('tfoot',tb));
    }
    

    Changed to:

    if (has_thead) 
    {
    	var tbh = $('').insertBefore(wrapper).prepend($('> thead',tb));
    }
    
    if (has_tfoot) 
    {
    	var tbf = $('').insertAfter(wrapper).prepend($('> tfoot',tb));
    }
    

16. 
    magnus September 13, 2011 at 11:03 pm | Permalink

    This is great

    However I have the same problem as ramana (the thead seems to get out of sync when refilling the table via ajax.)
    I tried the flush, and that does not work, I also tried to pass an undo string like this
    $(‘#myTable’).tableScroll(“undo”);
    because the code seems to have some support for that, but that does not work either
    anybody got a quick fix for ajax refill?

17. 
    Adriano September 15, 2011 at 8:54 am | Permalink

    Hey, nice plugin. I’ve tried to use many fixed-headers plugins, but only your has worked

    However, it doesnt has a horizontal scroller with a fixed vertical scroll. Do you plan to add this feature on it’s next update?

    Congrats

18. 
    jon simcox September 15, 2011 at 9:13 am | Permalink

    this is a great tool, but the scrollbars are not visible on the iPad and therefore it does not scroll.
    any ideas why?

    thanks

19. 
    vxd September 28, 2011 at 5:57 pm | Permalink

    Is there a way to lock the first 2 columns?

20. 
    Aslam Doctor September 29, 2011 at 4:52 am | Permalink

    Awesome plugin, Thanks

21. 
    bob September 29, 2011 at 11:02 am | Permalink

    can you set the columns to a specified width?

    thanks!
    Bob

22. 
    Dan October 26, 2011 at 6:04 am | Permalink

    Hi,

    Thanks so much for making this.

    I had a little problem with my header lining up with the table, so I added this when I invoked it:
    $(‘.tablescroll_head’).css(‘width’, $(‘.tablescroll_body’).width());
    $(‘.tablescroll_head th’).css(‘padding’,’3px 5px’);

    Dan

23. 
    ViP November 7, 2011 at 10:48 pm | Permalink

    Hi,

    I am using the code, could you provide some guidelines on the following thing:
    I am using while loop for table data as its from database and I want to use it in dynamic way

    and this way for other fields

    The thing is all thing is working fine with Mozilla or chrome, but when trying this on IE-8 its putting some space blank between End of THead and Start of TBody which is same irrespective of browser and its height is same.

    Is it related to while looping in JSP OR
    Its about DocType declaration at the top of the JSP.
    I have searched all possible option.

    Please guide.

    Thanks.

24. 
    ViP November 7, 2011 at 10:54 pm | Permalink

    Please see the code for my previous comment/ question:

    x
    y
    z

25. 
    Jacob November 16, 2011 at 7:01 am | Permalink

    @Dan,

    excuse me, where would you put this you say?
    $(‘.tablescroll_head’).css(‘width’, $(‘.tablescroll_body’).width());
    $(‘.tablescroll_head th’).css(‘padding’,’3px 5px’);

    Thanks!

Leave a Reply Click here to cancel reply.