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)
Notice that the table height is set to 50, but it still does not scroll.
The two CSS properties overflow:auto; and overflow-x:hidden;* actually make the scroll bar appear on the right within the div element and make the table scroll within the div. The browser’s CSS engine must support these two properties. Otherwise, the table would only grow in place without the scroll bar.
* These are CSS2 properties. If content in an element falls outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.), the ‘overflow’ and ‘overflow-x’ properties describe what to do with the content that exceeds the element’s width.
These CSS properties only define the appearance of the div and table, but JavaScript APIs interface with the scroll properties. To understand the implementation of a dynamic table, you need to know properties that measure HTML elements’ dimension and location on the page. These properties can be programmatically accessed and changed in JavaScript and, thankfully, APIs are the same across most major browsers.
HTML element properties
Here is the cheat sheet of available HTML element properties for HTML BODY and a single DIV element in the center of the page. As you can see, there are a lot of them, but the three of the most interest are scrollTop, scrollHeight, and clientHeight.
Figure 5: Visual representation of Div element properties (source MSDN)
The scrollTop specifies the position of the content upper bound relative to the visible portion of the viewport (defined by the div’s height and width), as the user scrolls. scrollTop would indicate the distance in pixels the content moved. The scrollHeight specifies the actual height in pixels of the inner element and clientHeight specifies height of the visible content (viewport height). In my case, the viewport is the outer div element and the content is the inner TABLE. The Height and Top properties do not account for element’s borders, margins, or padding, and if your elements have any of these attributes, look into the offset group of properties, among others. Similarity to the height, there are width properties to deal with horizontal scrolling calculations.
Every element placed on the page has these properties and the way elements look (and behave) depends on the values of these properties.
Here is simplified depiction of the div element’s properties in the page.
Figure 6: Code to generate scroll behavior within 500px Div
Implementation of the Dynamic Table
To implement the table, I have separated the presentation into a CSS style called “scrolltable” and created a div with id “new_items_div” and an inner table with id “new_items”.
The “status” div’s purpose is to display various messages.
Figure 7: Code to detect scroll on the page
The first part of the logic to auto-append more rows involves the detection of where the user has already scrolled. To do this, I created a JavaScript function detectScroll() that is polled at half-second intervals. The overhead of polling is minimal, but as an alternative, I could have created a handler function for the scroll event and attached it to the div. The startPolling function is called once at the time the entire page loads, and it starts to call detectScroll periodically.
The algorithm, which detects scroll position, checks to see whether the distance already scrolled is greater than or equal to the content height.viewport height. I also add 20 pixels to the distance to account for the scroll bar size and to make sure the position of the scroll bar is a little prior to very end, before the new row fetch occurs.
Fetch if [scroll Top distance >= (scroll Height - client Height) + 20]
If the user scrolls up after scrolling down, no new rows are fetched because this condition will not be true.
Here is the source in JavaScript.
Figure 8: Screen shot of the final table
If the condition is met when detectScoll executes, a new JavaSript function fectchAction is called. I also update the “status” div with the total row count.
The fetchAction function below executes the asynchronous call to the server, using the XMLHttpRequest object, and assigns a callback function, readFeed, to process the response. The server side implementation is irrelevant; as long as it returns valid XML, it can be done in any language. In this case, it’s PHP, but it can be Java, .NET, and so on.
Dynamic Parsing and Insertion of the Data
For the front end to properly parse the response and dynamically append a row to the table, the back end should return XML similar to this code snippet:
<?xml version='1.0' encoding='ISO-8859-1'?>
<channel>
<item>
<title>Vlad</title>
<body><![CDATA[some text]]></body>
</item>
</channel>
The callback function readFeed is called when the server responds with the XML. The first thing this function does is obtain a handle on the XML structure, xmlHttp.responseXML.documentElement. It then gets all elements’ names “item” and loops through them, pulling out title and body. The title and body are then passed to the helper function addRow that does the dirty work of appending the data to the table. addRow gets the table object, inserts a new row at the end, and inserts the title and body HTML.
Here is the implementation of the readFeed function:
And here is the implementation of the addRow function. For the complete source, please see the download section.
In the sample page, initially when it loads there are 10 rows; when the user moves the scroll bar down, 10 more rows appear. The end result looks something like this:
This is all the logic needed to make an Ajax-enabled dynamic table.
Conclusion
In this article, I have covered the implementation of an Ajax-enabled dynamic table that fetches new rows of data as the user scrolls down, and appends them at the end. The table’s appearance is defined with the CSS and dynamic behavior is controlled with JavaScript.
A possible downside to this approach is a potential of a client requesting a lot of data and running out of memory. Because this scroll is only limited by the amount of data on the server, the client may request all of it; this technique will store it in the client’s memory.
Another potential downside of this approach is that the resulting page is not very search engine friendly. Although a dynamic table is very user-friendly, because search engines such as Google do not index dynamic content (yet) produced by JavaScript, this table will be invisible to the web indexing crawlers. Just keep this in mind when developing any rich client applications.
Download Source
You can download the code that accompanies this article here.
References
About the Author
Vlad Kofman works on enterprise-scale projects for the major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.
