How to create a virtual scroller?

Question

I want to create a table to grid some data. The table can list a lot of data (100K+ rows). So what I want to do is show like 20 rows at a time with maybe a 100 row buffer. As the user scrolls down on the grid, it loads in the extra rows via ajax? I have seen this done but I don't really know how that can be achieved?

Answer 1

It's exactly like you describe.

Imagine jQuery appending <tr>'s to a <table>. It's as easy as that.

SERVER SIDE
Script calls rows with SQL limits

// where ? represents entry_num that will be passed by jQuery
SELECT *
FROM table_x
LIMIT ?, 20

CLIENT SIDE
jQuery puts the new items it gets into the table.

// server side will in check for entry number to give back the proper rows
$.ajax({
  url: "/getRows",
  data: "entry_num="+num,
  cache: false,
  success: function(html){
    $("#table").append(html);
  }
});

Answer 2

Check out jQGrid: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:features

It supports "lazy" pagination, though I'm sure it could be modified to do the whole scrolling thing.

Answer 3

The UX (User eXperience) downside of a virtual scroller is that you're not providing the user with visual feedback on the total height of the scrolled region.

Plus it can be tricky/impossible for the user to quickly move to a relative point in the data set. -- Eg the list is sorted alphabetically and the user wants to jump to the middle or the end of the list. -- May be hard to do in a virtual scroller.

The alternative of a paged view into the large dataset works well for both issues. Check out the YUI Data table widget and community.

Answer 4

I have found that SlickGrid is a great jQuery plugin that can handle this type of massive dataset through use of adaptive virtual scrolling, like you describe. It's also very pretty and has many other advanced features as well.