Paging and caching large record sets Support

Today we look at viewing large record sets, and how to optimise this process both for the person doing the viewing and for the server processing the page. To handle the former, we'll use a technique known as paging, and for the latter, caching. This caching is not the client side browser caching we've all come to know and hate; this caching is done entirely on the server.

 

The code supplied is half the length of the Dreamweaver-generated code, and is hugely beneficial if you have a site where users look through large lists of data without amending it.

Advertisement DMXzone Paginator ASP

Add the coolest page navigation to your site and make browsing through large lists of items or tables easy and quick. Choose from 22 different styles, used by many sites such as Digg, Yahoo, Flickr and much more, to fit perfectly with your design and display the total number of items.

All paging styles are fully CSS based, so you can always fine tune the colors and borders to your site design.

 

4. Determine if paging is necessary

Now that we have an idea of how many records there are, we can determine whether or not to page the data. Firstly, we set recordCount to be the number of records in the set:

    recordCount = orders.length;

Then we store whether or not we have to page the data as a Boolean or true/false value, named paging. We derive this value by comparing the relationship between our recently new recordCount and our constant pageSize. If recordCount is bigger than pageSize, or put differently, if the total number of records in the set exceeds the number of records displayed per page, paging will be set to true.

    paging = recordCount > pageSize;

5. Configure render loop boundaries

Next, if paging is true, we need to configure the variables used to display Next and Previous links and set the range for the render loop.

Firstly, we store the index of the next page into nextPage. Next, we determine totalPages, the total number of pages for the data set. To get this we divide recordCount by pageSize, and round up to the nearest integer. That way, with a page size of 5 and a record set of 12, the third page will only display 2 records. If we rounded down, we wouldn't see these last 2 records.

    if ( paging ) {
     nextPage = currentPage + 1;
     totalPages = Math.ceil( recordCount / pageSize );

Next we configure the initial value for orderIndex, the render loop's iterator (variable that increments by one every loop). We do so by setting it to the current page's index multiplied by the page size. It is for this reason that currentPage is initially set to 0; 0 x 5 is still 0, which is exactly where we want to be for the first 5 records.

Then we set endPoint,the upper boundary for the loop, which determines when the loop should end. We set it to be the current orderIndex plus one page's worth of records, thus, our page size.

     orderIndex = currentPage * pageSize;
     endPoint = orderIndex + pageSize;

Finally, just in case we happen to be on the last page, we make sure that endPoint isn't larger than recordCount. This could happen quite easily, as we are using multiples of pageSize to determine endPoint, and recordCount is not necessarily a multiple of pageSize.

If paging is false, however, we still need to configure endPoint so that the render loop can function correctly. We do not need to set orderIndex as it is already set to 0 (see the step 1).

    } else {
     endPoint = recordCount;
    }

Now that all of our data has been prepared, we're ready to begin rendering the HTML. There are two steps to this, rendering the Next and Previous links, and rendering the data itself.