Custom Paging in Gridview

Stored ProcedureSuppose we have 2000 records in a table and we want to display only 10 records in a page; then why fetch 2000-10 = 1990 extra records. These extra records take too much bandwidth and reduce performance.

So here is how to solve the problem step-by-step

Step 1: Create a Stored Procedure for paging, as in:

Store-procedure-for-paging.gif

In the above Stored Procedure we are passing three parameters, two input parameters and one output parameter. The input parameters @PageIndex and @PageSize are to fetch records. These parameters represent the page number and how may records to display on that page. The output parameter @TotalRow is to display how many total records are in the table.

Step 2: Use a GridView

Now I use a grid view that shows employee data.

gridview.gif

Step 3: Use a Repeater

A Repeater Control is used as a pager (to change pages). It uses a linkbutton that shows the page number in the bottom of the grid view.

Repeater.gif

Step 4: Fill Employee Data in GridView

I create a method that gets all employee specific page data and the total number of records in the table. Here I define the pagesize as 5, in other words each page will display only 5 records. TotalRow is used to determine how many rows there are in the table so we can create paging according.

Fill-Data-in-GridView.gif

Step 5: Create pager

Here I create the page number depending on the total number of records in the table. Here we are also adding two extra link buttons; these are "First" and "Next". These page numbers are bound with the repeater control.

Fill-Data-in-GridView1.gif

Step 6: Change Page Index

When the page index changes then again new data is obtained depending on the new page and page size.

Fill-Data-in-GridView2.gif

Step 7: First time load data

We fill the grid view when the page loads the first time.

Fill-Data-in-GridView3.gif

Step 8: Output 

Fill-Data-in-GridView4.gif


Similar Articles