ClientSideAsp.Net

This is the first of a series of articles am going to write about Asp.Net 2.0 pagination and how to build a custom digg like numeric pagination control which can be used with DataList, Repeater or any other data bound controls.

NOTE: I haven’t used the .Net 3.5 DataPager control yet, so am not sure if it already addressed the scenarios in the following discussion

The default pagination in Asp.net which comes with GridView is great in terms of developer productivity and ease of use. When use with data source controls it will work without even a single line of code and it is easy to customize by setting simple properties available.

But you may need to think about writing a your own pagination logic when

1. You need pagination with Datalist or Repeater
2. You need search engine friendly pagination
3. You need user friendly pagination
4. You need clean HTML for the pagination links
5. You need a pagination strip which will work independent of data bound controls

1. Pagination with Datalist or Repeater

I like DataList and Repeater more than GridView because of their design flexibility and the control over rendered HTML. See a comparison between Repeater, DataList and GridView here
http://www.queensdev.net/Samples/RepeaterDataListGridview.aspx

Repeater and DataList are light and you have the flexibility over the design, but that comes with a price - no pagination. A Google search for “Repeater pagination” will show the huge number of requests and articles on this subject.

2. Search engine friendly pagination

This is a major issue with the default Asp.Net pagination. The pagination links in GridView are rendered as JavaScript link buttons, not as HTML hyperlinks. As per SEO guidelines search engines can not understand these kinds of JavaScript links. Search engines will not navigate to the inner pages of a GridView and the page crawling will stop in the first page itself.

By using the default pagination with GridView we are unknowingly restricting the search engine crawlers from accessing our pages. Most of the public facing web sites including asp.net forums and MSDN use search engine friendly links for the pagination.

3. User friendly pagination

Yes there are lot of options available to customize the default GridView pagination but the use of three dots (…) to get the next set of pagination is really confusing. Our users had difficulty in understanding the 3 dots are links and clicking on it will generate the next set of pagination links.

Just see how pagination work in some high profile sites

i. Asp.net forums (http://forums.asp.net)

Pagination in Asp.Net forums

Go to the Getting Started forum and see the pagination in the bottom. It shows a numeric pagination strip with first 5 page links, link to next & last pages and a description. See the 3 dots (…) between next and last links; they are not links but simply telling the user that there is lot of pages hidden in between next and last pages.

As we move along the pages, the pagination strip is also getting changed to show the pages near to the current page.

ii. Digg ( http://www.digg.com/ )

Pagination in Digg

In the home, the pagination strip in digg.com is showing first 10 pages, last two pages and previous next buttons. Go to page 10 and we can see the numeric pagination strip is updated to show the pages near to page 10. The pagination strip is also showing links to move to the first two and last two pages at any time.

MSDN forums also use same kind pagination.

Pagination in MSDN

iii. Default Asp.Net numeric pagination (sample page link)

Asp.Net GridView pagination

Now analyze how the default Asp.Net numeric pagination works. Go to this page and check the pagination. It shows 10 page links and a link to the last page. Click on page 4, no change in the pagination strip. Click on page 10, no change. I want to go to page 11, what should I do? Oh!! the 3 dots are links to next set of pagination.

Just compare the usability of the above 3 paginations. Definitely the first two paginations are lot easier than the third one. Personally I like the Digg pagination most.

4. The rendered HTML is not clean

The pagination strip will render as an inner table to the GridView table with each page links in separate cells. It is not a big issue but why can’t it all be rendered in a single cell without any inner tables?

5. Pagination without bound controls

There are situations in which we may need to simply create pagination links based on the total number of items available.
For example, dividing a big article into a number of pages. The current page can be shown in a literal but the links to rest of the pages need to create separately based on the total number of pages.

GridView pagination is the best choice for admin part of the site

Because of the 2nd and 3rd points explained above we always try to minimize the use of GridView pagination to the admin side of the site. In the admin side it’s logical to use GridView and default pagination wherever possible because

1. In most cases the admin just want to see the data as a list of items with edit and delete options
2. The admin may need to sort the data
3. Admin will be a trained user who can understand the 3 dots are link to next set of pages
4. The admin side pages are secure and need not come in the search engines

That’s all in the first article about asp.net pagination. In next few days I will write next article on how to create a custom Digg like numeric pagination to solve the above issues.

Thanks for reading! Please give feedback and suggestions