144 responses to “jQuery Scrollable Table Plugin”

  1. Leenix

    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

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

    Hope that helps someone else.

  3. Deepak Kr Sharma

    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

    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

    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

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

  7. joshintosh

    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

    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

    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

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

  11. Gary

    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

    You really helped me out here, thanks!

  13. borconi

    @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

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

  15. Thomas Huber

    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

    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

    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

    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

    Is there a way to lock the first 2 columns?

  20. Aslam Doctor

    Awesome plugin, Thanks

  21. bob

    can you set the columns to a specified width?

    thanks!
    Bob

  22. Dan

    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

    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

    Please see the code for my previous comment/ question:

    x
    y
    z

  25. Jacob

    @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