Introducing Scroller - Virtual Scrolling for DataTables

allan

Hello all,

As part of the DataTables 1.8 package I introduced a new "extra" called Scroller. This plug-in gives DataTables virtual scrolling capabilities, which basically means a scrolling table can be used to show very large datasets with great performance.

There is a blog post discussing Scrolling and how it works here:
http://datatables.net/blog/Introducing_Scroller_-_Virtual_Scrolling_for_DataTables

Documentation for Scroller is available here:
http://datatables.net/docs/Scroller/

And examples here:
http://datatables.net/extras/scroller/examples

Scroller was made possible thanks to the support from John Wiley & Sons, Inc. ( http://wiley.com/ ) and I'd like to take this opportunity to thank them for supporting the DataTables project!

Enjoy!
Allan

numberone

Hey Allan,

Thats a really nice plug-in.

Ive tried it with Ignited Datatables (wrapper library for codeigniter) and it's working great.

http://imbx.us/Rh7.jpg (i dunno why search bar hides there ^^)

It works great with 1000 rows as it seems in the pic.
but ive got some troubles with 13 rows. It is sending "iDisplayStart -5" when i scroll down.

Thanks,
Yusuf

allan

Hi Yusuf,

Great to hear it works well with Ignited Datatables :-). I've just added a small fix for the iDisplayStart issue you were seeing - you can get this from the downloads page ( http://datatables.net/download ) as the 'dev' version of Scroller. Basically the calculation that was being done could result in a negative number as you were seeing - I've added a check and correction for this now.

Regards,
Allan

kcivey

There's a quote missing in the markup in the second paragraph, so a chunk of text between two links is being swallowed.

allan

Oops - thanks for spotting that and letting me know :-). All fixed now.

Allan

Nympheasi

Hi Allan,

Great stuff as usual :)

I saw in the Scroller documentation that the row height calculation is slightly off if it isn't the same for all rows. This is exactly what happened in my case and it's not a possibility for me to add the suggested css [code]th, td { white-space: nowrap; }[/code]. Do you plan to fix it in further release?

And by the way I think there's some words missing in your blog post about the Virtual Scroller right after: "to your CSS, or wrapping the content of the cells in a"

allan

[quote]Nympheasi said: Do you plan to fix it in further release?[/quote]

I'm afraid not - no. The fact that all rows must be the same height is engrained deeply into Scroller. For example, if you have 2 million rows, and want to jump to row 1.5 million - you'd need to know the height of 1.5 million rows, which would kill any CPU! This is why Scroller has to make this assumption.

DataTables can do what you want - just disabled Scroller, keep y-scrolling enabled and disable pagination - however, it means you can't take advantage of the speed optimisations of Scroller.

Thanks for the heads up about the blog post formatting!

Allan