Data Paging in ASP.NET

What is data paging and why we need paging in ASP.NET web applications

Your web application needs to be both easy to use and fast to execute. If you have large table in your database, it is not good idea to show all table rows on web page at the same time. That will use too much traffic between web server and user's machine, probably slow down user's web browser and certainly confuse the user when see thousands of data on computer screen.

Common solution for this problem is data paging. Basically, you show just one page on screen and provide a navigation bar on top or on bottom of the page (or both) so user can navigate to other pages if wants.

Page size is not strictly defined. It is usual to show 10, 20 to 50 rows at the same time, rarely more. That are common values, but you can give an option to your user to customize page size through web application user interface, and allow larger page size if some user wants it.

Simple paging with built in pager in GridView control

Standard GridView Control has built in data paging functionality. First, you need to change value of AllowPaging property to true.

By default, pager is shown on the bottom of the page only. You can change this by changing PagerSettings.Position property. Possible values are:
- PagerPosition.Bottom
- PagerPosition.Top
- PagerPosition.TopAndBottom

GridView pager supports few modes, so you can select the most suitable for your application by changing PagerSettings.Mode property. Possible modes are:
- PagerButtons.NextPrevious - only Next and Previous buttons are visible
- PagerButtons.NextPreviousFirstLast - pager shows Next, Previous, First and Last buttons
- PagerButtons.Numeric - only page numbers are visible (this is default value)
- PagerButtons.NumericFirstLast - page numbers and buttons First and Last are visible

With PageSize property you can set how many records per page you want to display. Default PageSize value is 10.

If you connected your GridView with some data source, start web application and your data paging will work without single line of code written

Fig. 1: Simple paging with built-in GridView Pager

As you see, data paging with default GridView pager is very simple. You just need to set few properties and its working. But, as a cost of simplicity, this pager have not much features. To achieve different look and feel of our pager we need to use GridView's custom paging.

Custom data paging with GridView control

GridView custom paging requires more work, but that is reasonable choice if your ASP.NET web application requires some specific look. To customize pager in GridView you need to use PagerTemplate template. This sample of PagerTemplate contains First, Previous, Next and Last buttons:

This code will produce pager like this:

Fig. 2: Simple custom pager with GridView control

As you see, by using CommandArgument and CommandName properties, you can avoid additional coding, needed before with DataGrid control. If you want to achieve nicer look of your pager you can use ImageButton controls instead of simple button. Implementation is the same for both ImageButton and classic Button control. Also, you can add some Label control to show which is current page, add some css styles etc.

Note that adding CommandArgument is not the only way you can enable paging facility. You can do it on more basic way with OnClick method. For example, let say you add one new button control to PagerTemplate with its OnClick argument like this:

<asp:Button ID="Button1" OnClick="Button1_Click" runat="server" Text="NEXT" />

As you see from Text parameter, we will make Next button. In code view add this snippet:

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected WithEvents Button1 As Button

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
     Handles Button1.Click
        Dim NewPage As Integer = GridView1.PageIndex + 1
        If NewPage <= GridView1.PageCount Then
            GridView1.PageIndex = NewPage
        End If
    End Sub
End Class

So, button's OnClick code will check if new page index is higher than current page index, and if not set new GridView page index just like Next button usually works in pager. On this way, you can add practically any control and add any code! The possibilities of custom paging are really huge. For example, one common task can be to add jump element with DropDownList control so user can go directly to wanted page instead of multiple clicking on Next button. Or to achieve look of some other popular pager, like Hotmail, Google Analytics, vBulletin pager etc. etc., the sky is the limit :).

Data paging with DataPager class

Custom paging with GridView is great, but the problem is you must use GridView to use it. ASP.NET introduces new DataPager control, which works with ListView control (but will not work with DataList or Repeater controls). The using of DataPager control is simple. After you configured data source for ListView control, you simply drag DataPager from the menu and drop it on web form. After that you only need to set PagerControlID property to ID of ListView control and DataPager will work! You can customize its page size and look if you need.

The problem with DataPager control is that DataPager uses all data from data source to work with. It cannot select only current page to save up web server resources, but simply uses ListView's data source which is not efficient. If your data set has more than 100 or 200 pages or even more, this is unacceptable.

Paging with SEO Pager Control

As you probably noticed, data paging is common thing on web today. Used the right way, and on the right form, this feature can save you from a lot of trouble. If you need support for optimized paging of large tables, paging that work with any data control including Repeater and DataList, paging with tags, images, alphabetic, vertical, SEO friendly paging and other advances features or you simply have no time to reinvent the wheel, you can get SEO Pager Control, the best software in this category. I hope you found this article enlightening and enjoyable.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback | Google