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.