Infinite Scroll Height

oswiki

Hi! I am loving the new infinite scroll feature. I do have a question about it.

It seems that the height of the table (before you start scrolling) is determined by how many rows are in the table, overall. I am initializing the table with this code:

$(document).ready(function() {
$('#osw-edit-version-control').dataTable( {
"aaSorting": [ [1,'asc'], [2,'asc'] ],
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px"
} );
} );

I thought that changing the sScrollY value would make my table taller (that is, show more rows before you have to start scrolling). However, changing it doesn't seem to have any effect that I can see. Right now, my table has a mere 7 rows, so I only see the first 4 (before scrolling). If I add more rows, then I see more (again, before scrolling). I was hoping to set the table height such that I would see at least 10 rows before scrolling. Is this doable?

Thanks!

allan

sScrollY is the height of the DataTables viewport - so in the case above it should be 200px in height. To increase the number of rows initially visible, you just need to bump that up. You might also need to include iDisplayLength set to say 20 or so, in order to have enough rows to force the scrolling.

Allan

oswiki

Hi Allan,

Thanks for your reply! I have tried increasing the value of sScrollY, but nothing happens. However, lowering the value below 100px causes it to get smaller. I added iDisplayLength, set to 20, but increasing values of sScrollY still had no effect.

This what I'm current trying, to no avail...

[code]
$(document).ready(function() {
$('#osw-edit-version-control').dataTable( {
"bJQueryUI": true,
"aaSorting": [ [1,'asc'], [2,'asc'] ],
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "500px",
"iDisplayLength": 20
} );
} );
[/code]

allan

Are there enough rows to take up 500px height? You said the table has only 7 rows, so I guess it's not going to take much more than say 200px? Since you have bScrollCollapse set to true, DataTabels will 'fold' the table container down to the height of the table if there would otherwise be white space. Try setting it to false and your container will be 500px.

Allan

oswiki

Aha! Perfect. Thank you Allan!

Prem

Allan, I have a doubt regarding the infiniteScroll.. Even though I have enough data to have a view port height more than 250px, the infinite scrolling doesnt seem to be working if I give a value more than 250px for sScrollY. Am i missing something or is this some known issue?
This issue I noticed even in this page http://datatables.net/ref#bScrollInfinite when I run the code in JS Bin. In the example given in that page, if I increase the sScrollY value to something like 300px or more, its not showing any scroll bar.

allan

> if I increase the sScrollY value to something like 300px or more, its not showing any scroll bar.

That does look like bug. There is no scrolling there because it isn't needed on the first draw, thus there is no way to trigger a scroll event on the element. DataTables should perhaps detect that and automatically add more rows to force scrolling.

The alternative is simply to add more rows to the first draw with iDisplayLength : http://live.datatables.net/utevak/edit .

The second alternative (because there is always more than one :-) ) is to use Scroller - although that is finite virtual scrolling rather than infinite scrolling.

Allan

dreamer79

Ok, why infinite scrolling only? Can't there be an option to have a finite scroller based on the iTotalDisplayRecords? I don't understand why the user should try to find out if data is over or he can scroll more. The main idea for scrolling and not using pagination is more about having an mvc grid simulation where you can scroll inside large tables without having to scroll to bottom, then try more scrolling down and so on. ExtJS has a good scrolling implementation for the grid, but I don't know if it's easy to make such one in jquery.

allan

> Ok, why infinite scrolling only?

I don't really understand I'm afraid, why what infinite scrolling only?

DataTables has three scrolling options:

- "Normal" scrolling where all nodes are in the DOM and scrolling works the same way as any only regular scrolling element.
- infinite scrolling when items are added as you get close to the end of the current display set (like how twitter and Facebook do infinite loading)
- Scroller, which Is a lot like normal scrolling but uses virtual scrolling techniques to improve performance.

Which one is best will depend on what interaction you want and how you want to implement it. Any suggestions for other scrolling interactions are very welcome!

Allan

Prem

Allan, thanks for the help man.. The solution which you gave worked absolutely fine..Really appreciate your quick response..

Prem

Allan, more help required with this vertical scrolling feature.. When ever the vertical scroll appears in data table, the column alignment(the alignment of the headers and the columns below) is getting distorted. I could see that, this is because data table renders the header and the contents in two different tables, for the purpose of making only the content scrollable. And when the scroll bar occupies some space in the content table, the alignment is going for a toss.. Any help on this will be highly appreciated.. Thanks in advance..

allan

Can you give me a link to your page please so I can try to reproduce the issue? I would suspect that the data being loaded when scrolling is larger in width than the initial content, thus requiring the columns to need a resizing.

To be honest I'm not a fan of the infinite scrolling and I've considered dropping it from future versions - I won't for a while, and there would be at least one or two major versions where it is deprecated first - but as a user having the scroll bar jump around on a finite data set seems a bit odd. Scroller is effectively designed to address this problem - but then as you might expect, DataTables can only work with the data it is given, so column adjustment might be required there as well.

Thanks,
Allan

XIU

I still seem to have the problem with the infinite scroll not automatically adding new contents if the scrollheight is bigger then the first page.

Using the test page on http://live.datatables.net/utevak/edit with the following settings you can see the problem.

{
"bScrollInfinite": true,
"bScrollCollapse": false,
"sScrollY": "400px",
"iDisplayLength": 10
}

Any workarounds for this?