In this article, I will discuss implementing an Ajax-enabled scrollable table, in which rows are dynamically fetched from the server, as the user scrolls, without the whole page refreshing. This technique is unique and very convenient for implementing pages with a lot of dynamic content in a readable form; for instance, a live news feed. As new items are added to the table, the vertical scroll bar will resize and the never-ending scroll will continue. The asynchronous fetching of the data is done with AJAX (Asynchronous JavaScript and XML). The parsing and dynamic row insertions are done in JavaScript, the requests are done with the XMLHttpRequest object, and the table appearance is controlled by the CSS.

The implementation of the dynamic scroll is possible mostly because of the introduction of the XMLHttpRequest object in the modern browsers. This JavaScript object can send requests asynchronously and receive responses from the server, without page refresh. Many web sites currently participating in the Web 2.0 design methodology often use a lot of Ajax to offer rich client interfaces, the XMLHttpRequest is extensively used on such sites and content of the page changes dynamically based on the user action.

The scrollable table is a good example of a rich client interface, which uses the Web 2.0 approach to the web content usability. The dynamic scroll is also possible in part because of the new CSS2 standards, which are supported by the main browsers as well. In the sample code, I will show how to implement scrollable table that occupies some part of the screen, but if CSS were not supported and only Ajax were, the dynamic table would just resize (and scroll) the whole page, and not part of it.

Here is the example of a dynamic table on the Google reader site. Note that there are 100 items in the table on the first screenshot and, as the vertical scroll bar is moved down more rows appear, the number changes to 140, and the scroll bar also resizes. All other elements remain in the same positions on the page.

Figure 1: A dynamic table showing 100 items.

Figure 2: The same table after 40 items have been added. Note the position of the scroll.

Presentation of the Dynamic Table

To create the scroll behavior of any HTML element (in this case a table), it needs to be enclosed in a scrollable area (or viewport) defined by an outer element (in this case a DIV), which should be smaller then the total table height. If there is no outer element (no viewport), the inner element would just grow on the page in place, and after a while the whole page would resize and start to scroll (within the browser’s page viewport). For example, a div element with height of 100 pixels containing table with height of 200px would achieve this table/viewport encapsulation behavior.

<div style="height:100px; width:50px;            overflow:auto; overflow-x:hidden;">   <table style="height:200px;">      <tr><td>vlad</td></tr>   </table></div>

Figure 3: Example code to generate scroll behavior

Note: If you set the same properties on these two elements separately, only the div would scroll, but not the table.

Here is an example code and what looks like in the browser.

<table style="height:50px; width:100px;              overflow:auto;overflow-x:hidden;">   <tr><td><p>vlad 1</p></td></tr>   <tr><td><p>vlad 2</p></td></tr>   <tr><td><p>vlad 3</p></td></tr>   <tr><td><p>vlad 4</p></td></tr>   <tr><td><p>vlad 5</p></td></tr></table>

<hr/>

<div style="height:100px; width:100px;            overflow:auto;overflow-x:hidden;">   <p>Vlad 1 </p>   <p>Vlad 2</p>   <p>Vlad 3</p>   <p>Vlad 4</p>   <p>Vlad 5</p></div>

Here is a screen shot of the HTML above.

Figure 4: Visual representation of HTML element properties (source MSDN)