Infinite scroll suggestion

adam

Hi Allan

Thanks for the recent DT updates. This is great work.

I've been playing around with the new infinite scroll option....(http://www.datatables.net/examples/basic_init/scroll_y_infinite.html)
....But can't help but think that it would be nice if this worked like other infinite scrolls (e.g. Twitter). So instead of it repopulating the same fixed table size with a larger result set, it appends the current result table size with the next one and then the table becomes longer.

The way you've currently built it is great because any dev can add it to their existing DT in 2mins and it works seamlessly. But for tables with 100 rows from the start (and each one including images, checkboxes etc), having 2 scroll bars is quite off putting to some users (*groan* - I know). But to be honest, having the table grown longer when the user scrolls to the bottom would make this much easier to use for larger result tables.

I'm just wondering if this is in the pipeline?

Adam

allan

Hi Adam,

I'm not quite sure I follow - sorry. The way you describe infinite scrolling with twitter (add on to the end of the current result set) is how DataTables currently implements infinite scrolling. It basically makes use of the pagination option in DataTables (not displaying the pagination controls of course) to get the next 'page' and append it to the current data set that DataTables knows about. So if you start with 100 records, and then scroll to the bottom it will load the next page of 100 records.

I don't quite get the two scroll bars either. Are you seeing one inside another?

Allan

adam

Hi Allan

Sorry, I'll try and explain better...

With Twitter I see a table of rows by default. When I scroll to the bottom of the *page* I see an ajax loading icon when is then replaced with the next page of results. This is added to the bottom of the current table. So the table has doubled in height. Try: http://twitter.com/#!/anrpalmer

With DT I have a fixed height table. I can scroll all the rows within the table rather then seeing them all. When I scroll to the bottom of the *table*, the second page is added to the table. But the table is still the same height. Everything is squashed into the same space.
Try: http://www.datatables.net/examples/basic_init/scroll_y_infinite.html

My suggestion is to allow users to make an infinite scroll option to work like the twitter example. i.e. don't limit the table height and scroll to the bottom of the page to trigger the ajax. This would then display under the table and flow like a waterfall.

Your example works well with an 8 row table, but if you have 100 rows by default then you end up with a table "below the fold". This will give you a browser scroll bar as well as the DT infinite scroll bar which is a little fiddly.

Adam

allan

Oh I see! So you want to use the browser windows scrolling rather than the DataTables container. Yes that sounds like a perfectly reasonable thing to do :-). It isn't built into DataTables, but it is quite possible to do more or less that (also I've not tried it, so speculation in part! But it should be reasonable speculation!).

What you need to do is to have the scroll infinite option on (not sScrollY, just the infinite scroll to kick the DataTables internals into what is needed), and then add an event listener to the page such that when the scrolling reaches the bottom of the page, it will call fnPageChange('next');

Regards,
Allan

mm2ha

Hi Allan,

I must say that DataTables is an awesome product and I love using it in my projects.

I would be very interested in using this type of scrolling in couple of my websites. How exactly should I go about it? I am not sure what you mean by "adding an event listener to the page".

Thanks!

Marko

allan

[code]
$(window).scroll( function () { ... } );
[/code]

will add a scroll listener to the page. I have to say though that it will be a lot more complicated than that! What you will probably need to do is something a bit like Scroller: http://datatables.net/blog/Introducing_Scroller_-_Virtual_Scrolling_for_DataTables . It would be worth looking at and understanding the source for how Scroller works, as you would probably need to do something similar - albeit slightly different - i.e. the Scroller code would need to be rewritten for the suggestion Adam made.

Allan

dazell

Hi Allan, hi adam,

I'm really interesting in that suggestion too.
I wonder if you will prepare an option to do that ina future datatable realese ?

Dazell

mm2ha

Hi Allan,

I finally got some time again to work on my side project. I am still trying to implement a Facebook/Twitter style adding of data when you reach the bottom of the page, while taking into account all the filtering that needs to be done.

I have taken a look at both infinite scrolling and the Scroller plugin, and I think that for what I am trying to accomplish adapting the infinite scroll is a better solution. Here are the basic steps that I am trying to accomplish:
1) display the first page of data based on filtering
2) when user scrolls to the bottom of the page, append the next page of data to the table

So basically everything that the infinite scrolling is doing right now, but I think that I need to be able to do the following:
1) disable call to appending data when scrolling within the table
2) allow the table to grow (I don't need headers or footers), so I don't need to set specific height for the table
3) when the scroll listener is fired, I want to fire the same function that the infinite scroller would do, which essentially adds the next page of results to the already existing ones

So my question is, is there a way to call the same functionality that the infinite scrolling does from outside the table, without actually setting up the infinite scrolling?

Thanks a ton!

Marko

allan

I'm not sure that there is a way of doing this without modifying DataTables itself, but I've not tried it, so I honestly couldn't say.

What I would suggest as an alternative, if you don't want to root around in DataTables is to simply use fnAddData to the table when you reach the bottom of the page to add more data tot he table. With paging disabled, then that will have exactly the effect you are looking for I believe. You need to watch sorting and so on, but possibly server-side processing with an adjustable table length would be the easiest way of doing it.

Allan

allan

Actually thinking about it - you could do client-side processing with paging enabled, but just don't show the paging control. Then as you scroll down, increase the page length as required.

Allan

nikki

Allen, how does the initial record load size get adjusted? I'm attempting to use the infinite scroll, it works great, but it only loads 10 records to start. how can make it load 50 at start and 50 each load after that?

allan

Use iDisplayLength .

Allan

jeremy

Has anybody successfully implemented the twitter-style infinite scroll? I am planning to implement something similar in my project, and would like to hear about how it was actually implemented.

Jeremy

jcready

I have, but it doesn't work very efficiently with thousands of rows. Basically all you do is add an scroll event listener on whatever your container element is around the DataTable.

[code]$(window).scroll( function() {
var perPage = 100;
var position = $("#example tbody td:last").offset().top;
var scrollHeight = $(window).scrollTop() + $(window).height();
if (scrollHeight > position) {
/* Add another page worth of rows to the DisplayLength */
/* Then redraw the table */
}
});[/code]

penguincoder

jcready: your solution works okay for thousands rows in my implementation, but i was having some issues with the scroll event firing many, many times for only "one" scroll. I modified your solution to actually use allan's paginated solution with the baked-in infinite scrolling to get this to work with window scrolling instead of viewport scrolling.

[code]
$(document).ready(function() {
var my_data_table = $('#my_data_table').dataTable({ bServerSide: true, sAjaxSource: "/my_url_endpoint", bScrollInfinite: true });
$(window).scroll(function() {
var position, scroll_height, table_settings;
table_settings = my_data_table.fnSettings();
if(!table_settings.bDrawing && (table_settings._iDisplayStart + table_settings._iDisplayLength) < table_settings.fnRecordsDisplay() && $(window).scrollTop() !== 0) {
position = $('#my_data_table tbody td:last').offset().top;
scroll_height = $(window).scrollTop() + $(window).height();
if(scroll_height > position) {
my_data_table.fnPageChange('next');
}
});
});
[/code]

Since i spent a few hours working this out, hopefully someone will put this into the official examples of infinite scrolling. :)

EDIT: i have updated this to not scroll past the end of the list by checking the bounds just like the regular pagination tool does.