Scrolling rows vertically / scrolling table horizontally

abargnesi

Hello,

Great work on the 1.5.2 version. I'm glad to see JQueryUI now supported.

I'm currently trying to wrap an html table that has upwards of 30 columns. The container for this html table has a fixed width and height so it should be scrollable.

Is it possible to customize certain dataTable css styles to achieve the scrolling or is there an API extension for this feature?

Thanks,
Anthony Bargnesi

allan

Hi Anthony,

'Infinite scrolling' is a fairly commonly asked for feature, and it's very much on my to-do list! I view this as a CSS problem - in most modern browsers you can just do something like:

tbody { height: 100px; overflow: scroll }

But of course this doesn't work in IE. The way most other table libraries get around this is to split the header, body and footer in different DIV elements, which doesn't sit all that well with me since it's not semantically correct :-). I'm sure there is a way of getting IE6/7 to work correctly (not yet tested the overflow option with IE8) but it's just a case of finding the right combination of hacks and workarounds...

Regards,
Allan

TheSpy

Maybe that would help somehow:
[code]


.outer {
position:relative;
padding: 23px 0px;
}

.inner {
overflow:auto;
height:300px;
}

thead tr {
position:absolute;
top:0px;
}

tfoot tr {
position:absolute;
bottom: 0px;
}












[/code]

allan

Hi TheSpy,

Looks very interesting indeed! Does this work in IE6/7/8? If so you might have just solves one of the most asked outstanding questions about DataTables.... :-) :-)

Regards,
Allan

allan

Hi TheSky,

I've just given your suggestion a shot, but unfortunately I've not had much success. The results and code I used are shown below:

http://datatables.net/dev/Scroll_IE8.png
http://datatables.net/dev/Scroll_Safari4.png (Firefox 3.5 gives similar results)

[code]
$(document).ready(function() {
$('#example').dataTable({
"iDisplayLength": "15",
"sDom": 'lfr<"outer"<"inner"t>>ip',
"bPaginate": false,
"bFilter": false
});
} );
[/code]
I suspect that the thead etc are being giving absolute positioning rather than table-row is messing up the rendering engines, causing the cells to misalign quite badly, as can be seen in the Safari4 screenshot.

Can you think of any refinements?

Regards,
Allan

TheSpy

Hello Allan,
that's what I got after some improvements.

[code]
$(document).ready(function() {
$('#example').dataTable( {
"sDom": 'lfr<"outer"<"inner"t>>ip',
"bPaginate": false,
"bFilter": false,
"bInfo": false
} );
} );



.outer {
position:relative;
margin-bottom: 32px;
margin-top: 32px;

}

.inner {
overflow-y: scroll;
overflow-x: hidden;
height:300px;
}

.outer thead tr {
position:absolute;
top:-32px;
left: 0px;
}

.outer tfoot tr {
position:absolute;
bottom: -32px;
}


[/code]

IE8
http://img301.imageshack.us/img301/7583/internetexplorer8.jpg
Chrome
http://img402.imageshack.us/img402/4651/chromes.jpg
Firefox 3.5.5
http://img301.imageshack.us/img301/7964/firefoxks.jpg

You may also check the http://mm.ktv.lt/datatables-test.php

I think now it looks better, just some refinements on the footer are required.
What do you think?

allan

Hi TheSpy,

I say not bad at all!! I've just tried it with IE7/8 and a bunch of other browsers, and that looks good to me. As you say, just to footer issue, and then that looks like that is about it. Very nice work indeed.

Funny that the header works but the footer doesn't with that. Actually, almost surprised that it works at all, with the TR being pulled out to be absolutely positioned. But delighted that it does... :-)

Regards,
Allan