Creating a Dynamic Scrollbar for an AJAX-based Pagination System

Introduction

As you'll possibly recall, in the first tutorial I went through the explanations needed to implement the required programming logic of this AJAX-based scrolling system. Aside from establishing the foundations that the program will use for performing efficient pagination of database records, I defined all the CSS rules and the respective (X)HTML markup, in order to construct a simple user interface. Particularly, and with reference to this subject, you have plenty of room for developing a highly-polished front end for this application, which will be surely more eye-catching than the one I created in the previous article.

Right, now that I've refreshed your memory of the concepts that I deployed during the first tutorial, let me tell you what I have planned for this second installment. Remember that I've already drawn the generic definitions that correspond to all the JavaScript functions, in order to create the application's behavior layer? Well, in this article, I'll provide you with the concrete client-side code, which will allow the program to make HTTP requests in the background to fetch paginated records, along with implementing a realistic drag-and-drop scroll bar.

As a result of all this, you'll be rewarded with a nice set of JavaScript functions, capable of displaying packets of database rows, without having to include the popular page links.

Having established this article's preliminaries, it's time to start writing some JavaScript code. It's going to be an instructive experience, trust me.