Front-End Pagination Algorithm

This approach is the third way to implement pagination, but it is very inefficient and should not be used unless some specific business rule demands it. Front-end pagination is done entirely on the front-end side, in the client’s browser. Typically, it uses JavaScript or some other client-side technology. The entire result set is brought to the client via a response object, and manipulated visually to create clickable pages, by hiding and showing rows (or HTML elements representing them). Depending on the size of the result set, this approach’s initial request will always take time equal to the time it takes to query for the entire set of data. But, subsequent page clicks will be fast, and depend on the client’s hardware. Note that if the result is large, it can take a while to download the first time around; in the worst case, it can hang the browser.

Here is the overview diagram of the third approach:

Generating Page Links

After choosing the best approach to retrieve the result set and traverse it, the application needs to create the actual page links for users to click. Below is a generic function pseudo-code, which should work with any server-side technology. This logic should reside in your application, and will work with both database-driven and middle-tier pagination algorithms.

The function takes three (3) parameters and returns HTML representing page links.

The parameters are query text, staring location row number, and total number of the result set rows. The algorithm is clever enough to generate appropriate links based on where the user is in the navigation path.

Note: I set the default of 50 rows per page, and a page window to 10. This means that only 10 (or fewer) page links will be visible to the user.

private String getSearchLinks(String query, int start, int total) {
// assuming that initial page = 1, total = 0, and start is 0
String result = "";
int start = 0;
if (total == 0) {
return ""; // no links
}
int page_size = 50; // number of rows per page
//page window - number of visible pagers per page
int window = 10;
int pages = ceil(total / page_size );
result = "Pages:";
int current_page = (start / page_size ) + 1;
//numeric value of current page ex. if start is 51 : 51/50 =
// 1 + 1 = 2
int left_link_count = ((current_page - 1) > (window / 2))
? (window / 2 - 1) : (current_page - 1);
int pageNo = current_page - left_link_count;

if (pageNo > 1) {
// show first page and if there are more
// links on the left
result += "<a href=\"search?q="+query+"&amp;s=0&amp;t="+total+">1</a>&nbsp;..&nbsp;";
result += "<a href=\"search?q="+query+"&amp;s="+(start - page_size ) +
"&amp;t="+total+"\">&laquo;</a>";
}

for (int i = 0; i < window-1; i++) {
if (pageNo > pages) {
break;
}
else if (pageNo == current_page) {
result += "<span class=\"current_pg\">" + pageNo + "</span>";
}
else {
result += "<a href=\"search?q="+query+"&amp;s="+
((pageNo - 1) * page_size )+
"&amp;t="+total+"\">pageNo</a>";
}
pageNo++;
} // end for

if ((pageNo - 1) < pages) {
result += "<a href=\"search?q="+query+"&amp;s="+
(start + page_size )+
"&amp;t="+total+"\">&raquo;</a>";
}
result += "<br/>Showing"+((start > total)?total+1:start+1)+
" - "+(((start + 50)>total)?total:(start + 50))+"of Total:"+total;
return result;
}

This logic does not care how the viewable portion of the result set is generated. Whether it is on the database side or on the application server’s side, all this algorithm needs is a "total" number of results (that can be pre-cached after the first retrieval), and the indicator ("start") containing which row number was the first on the last page user was looking at. This algorithm also shows the first page link if the user is on a page beyond the initial page window (for example, page 20), and correctly accounts for the result sets with a number of rows not enough for 10 pages. (for example, only 5 pages)

The main "for loop" generates the links and correctly computes the "start" parameter for the next page. The Query string and Total are always the same values.

Conclusion

In this article, I have discussed different methodologies in implementing pagination links in a web application. I have covered the database-driven approach, the middle-tier approach, and some third-party solutions. I have also detailed the actual algorithm for the page links generation. Ultimately, which solution you chose will depend on the size of the dataset, technology at hand, size of the site, and the budget for the project.

References

About the Author

Vlad Kofman is working 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.