Introducing Scroller - Virtual Scrolling for DataTables

Introducing Scroller - Virtual Scrolling for DataTables

allanallan Posts: 27,567Questions: 0Answers: 1,681
edited June 2011 in Announcements
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:

Documentation for Scroller is available here:

And examples here:

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



  • numberonenumberone Posts: 86Questions: 0Answers: 0
    edited June 2011
    Hey Allan,

    Thats a really nice plug-in.

    Ive tried it with Ignited Datatables (wrapper library for codeigniter) and it's working great. (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.

  • allanallan Posts: 27,567Questions: 0Answers: 1,681
    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 ( ) 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.

  • kciveykcivey Posts: 3Questions: 0Answers: 0
    There's a quote missing in the markup in the second paragraph, so a chunk of text between two links is being swallowed.
  • allanallan Posts: 27,567Questions: 0Answers: 1,681
    Oops - thanks for spotting that and letting me know :-). All fixed now.

  • NympheasiNympheasi Posts: 24Questions: 0Answers: 0
    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 th, td { white-space: nowrap; }. 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"
  • allanallan Posts: 27,567Questions: 0Answers: 1,681
    Nympheasi said: Do you plan to fix it in further release?

    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!

This discussion has been closed.