AJAX Pager control

After AJAX Repeater control next logical thing was to try and create paging control, a control which renders paging links when you set its properties like page count and page number, I have been using similar control in asp.net page so I decided to implement same thing with JavaScript.

This sample also uses RepeaterControl just take a quick look at this article to know how repeater control works.

What is the required from this Control?

I should be able to declare it programmatically in JavaScript code and set its templates like ItemTemplate, HeaderTemplate, FooterTemplate and SelectedItemTemplate.

Control should have properties like PageSize, PageCount and CurrentPage which defines current state of control. It should also have additional property called Step which defines how my links are to be shown in pager.

Control should have method called RenderPager which takes function as a parameter and renders itself in specified Html element defined as HostControlID.

What else is required?

As this articles deals with pager control I won't discuss more about handler which returns paged xml. Following is structure of XML.

<EmployeesData>
    <Employees>
        <Employee ID="PSA89086M" >
            <HireDate>12/24/1990 12:00:00 AM</HireDate>
            <Name>Pedro</Name>
            <LastName>Afonso</LastName>
        </Employee>
        ....
    </Employees>
    <PagerData CurrentPage="5" PageSize="10" PageCount="5" ></PagerData>}
</EmployeesData>

Handler takes page number and page size as querystring parameter and returns XML shown above. To make it simple I have avoided using stored procedure and used dynamically created SQL, but you can use Row Number feature of SQLServer 2005 or stored procedure with temp table in SQLServer 2000.

We will need pagercontrol.js for displaying tabular data.

We will use prorotype.js script to get data from handler and bind to our RepeaterControl and PagerControl.

And finally we will need plain html page to put every thing together.

We will need pagercontrol.js for displaying tabular data.

We will use prorotype.js script to get data from handler and bind to our RepeaterControl and PagerControl.

And finally we will need plain html page to put every thing together.

Inside JavaScript PagerControl.

Following three formatting expressions are used in control.

1. {#reloadfunction} for reload function which takes current page as parameter
2. {#page} for rendering page number in JavaScript function
3. {#title} for rendering page number as text.

Code does following things

1. Adds HeaderTemplate.
2. Sets start point of links using Math.Floor on CurrentPage and Step
3. If start point is not 1 then displays link to go to Previous Step.
4. Loops between start point and end point to render links using ItemTemplate and applies selected Template if link is for Current Page.
5. If end point is not last available page then displays link to next step.
6. Adds FooterTemplate.
7. Renders result to specified HTML element.

Default templates are already set inside Control so there is not need to define them unless you want to change display of pager.

Inside the Page

Html mark up contains three important elements.

1. Div to render RepeaterControl.
2. Div to render PagerControl.

JavaScript contains following.

1. Declaration of RepeaterControl code that sets its templates and properties.
2. loadData function which uses prototype.js to XMLHTTP request and delegates result to another JavaScript function called dataReceived, loadData function takes page number as parameter and uses that parameter to format request url.
3. dataReceived function binds data received from XMLHTTP request to RepeaterControl, Extracts current page and page count from xml data, assigns those to CurrentPage and PageCount property of PagerControl respectively and then finally calls RenderPager method of pager.

Figure 1 shows final result.

Source Code and How to run sample on your machine.

Source code contains following files.

1. Sample page that use RepeaterControl - default.htm
2. PagerControl-PagerControl.js
3. RepeaterControl - RepeaterControl.js
4. Handler that returns XML - Employees.ashx
5. Prorotype Library - prototype.js
6. StyleSheet default.css.

Just drop that that source code in any directory and set up connection string in employees.ashx to your pubs database which comes with SQL Server and you are ready to go.

Run sample code

End Notes.

This was second experiment with the approach of using controls like this to render different kind of data with JavaScript. Let me know your ideas about make any changes or suggestion about any other control like this.