Is there a way to dynamically draw more of the rows in the data set as you scroll down

gordyr

Hi,

I am well aware of the built in scrolling facilities of within dataTables, however this case is specific and doesn't appear to be covered by these methods.

The best way to describe what I am trying to do is to describe the behaviour I wish to emulate.

If you take a look at Facebook's sidebar, the top half gives you live updates. It seems to load about 25 of these rows into the dom. Then if you scroll down to the bottom, it renders more rows, scroll down again and another set are loaded. Each time they are simply added to the dom.

This behaviour is covered within datatables via the scroller plugin and infinite scrolling methods. However both of these solutions require a fixed viewport (scrollY). Like facebooks sidebar mine is a resizable div rendering these methods unusable.

For this this sidebar I am using client side processing. I am pulling in all of the data in one request. Is there any way, via the datatables api or otherwise, that I can add this kind of behaviour? I currently have all rows being drawn in to the DOM by setting the iDisplaylength to '999999'. Obviously this is not optimal if a user ends up with a huge amount of rows to render in one hit.

Any ideas?

allan

Infinite scrolling: http://datatables.net/release-datatables/examples/basic_init/scroll_y_infinite.html

Or virtual scrolling: http://datatables.net/extras/scroller/

Allan

gordyr

Hi Allan,

Yes I am aware of these but they do not work in this situation due to their requirement of having a fixed height container via the scrollY setting.

Unless of course are you suggesting that I can dynamically modify the scrollY setting as the containers resize??

allan

Ah I see - sorry. In that case there is not a built-in way of doing this - however, what I would suggest doing is not using the built in scrolling options, but rather simply have your scroll event listener watch for the user scrolling near the bottom of the document - when they do then add on another x rows to the table. Disable pagination as well :-)

Allan

gordyr

That's exactly what I want to do.... However I cannot seem to work out how to go about adding the rows. I have my event listeners set up etc. it's just how do I add x rows to a table and ensure I am getting the right ones out of memory?

Sorry I'm really struggling to articulate this.

allan

To add data use the fnAddData method :-). To ensure you are getting the right ones - well that depends a little bit on your server-side implementation. What you would probably need to do is hook into DataTables to see what sorting and filtering is applied, and then have your script that is telling you what data to add take that into account when generate the next data set.

Allan

gordyr

Thanks allan, I think i've just grasped how I need to do this now.

My thoughts are.

- Limit the initial GET request to 20 records.
- Attach an event request that performs a POST when you scroll to the bottom that sends the row index to retrieve i.e 21-40, then 41-60 etc.
- Rewrite my server side code to receive those parameters and spit out the JSON of those particular rows.
- On success, loop through the array and add each row manually into the table. Which is easy as I already have written the code to do that.

It's actually quite simple when you think about it


Regardles... I won't be tackling this until after the weekend. But i'll be sure to post up my code when I get it done. Cheers as always!

gordyr

Just for anyone who is interested in seeing how this can be done....

I have solved it completely and have a fully working solution. The code is very specific to my application therefore I'm not going to copy it all out here. However, if someone else is looking for an explanation of how this can be achieved I will try to refactor it into something more generic and post it up. I'm subscribed to this thread so will get a notification of any requests straight away.

Thanks again for such a versatile plugin Allan.