Introduction

A scalable web application uses paging techniques to load large data. Paging enables a web-application to efficiently retrieve only the specific rows it needs from the database, and avoid having to pull back dozens, hundreds, or even thousands of results to the web-server. Today I am going to demonstrate how a custom paging can be implemented in asp.net application. It is a very essential approach to use paging technique in applications where lot of data to be loaded from database. Using a good paging technique can lead to significant performance wins within your application (both in terms of latency and throughput), and reduce the load on your database.

Background

GridView has built-in support for paging but it is very heavy and costly when it comes to deal large amount of data. The idea to develop a custom paging comes from stackoverflow website where lot of data are being divided into many page using custom paging technique very smoothly.

Using the code

First of all the big magic here is the SQL Query which makes it easy to handle the amount of data to be fetch from database. I used the NorthWind database's Orders table which has over 800 records. Here Index and Size are two integer variables which are comes from querystring.

First time when the page loads it has no querystring values so the default Index is 1 and Size is 10. You can latter change the page size, there are options for 10 records per page and 15 records per page. I tried to explain all necessary points within the code.

HyperLinks are dynamically created and set their Links and css and add in the placeholder at page load.

Another important point is to replace the Table name in the sql Query and the column name in the order by statement.

To change the page size there are two options(html anchor tags) on the right side of the page. You can set 10 records per page or 15 records per page. Using JQuery I capture the click events of these two html anchors and set the currently set page size in a HiddenField and reload the current page by passing Index and Size in querystring.

Hi,
A very nice article.
Range validator in the last page of grid is giving server exception. Error I get for range validator is the value '' of the MaximumValue property of range validator cannot be converted to type 'Date'. Now I tried to rangevalidator_init method to set the value and works

Dear Tansweer,
Thanks once again for this article it is amazing.
I am about to try to use your tips to have my gridview along with this technique encapsolated in a User Control (ascx), that would I am going to try to do and will come back to share with you how it went on with.
I wonder if you would have any notes for me to take care of while working on

Thank you Tanweer!
This is simply amazing! I had no idea that SQL can be so powerful! I mean, Waw! Thanks bro. and Thanks for sharing it. I am a newbie and it is really wonderful to see how SQL queries in combination with Server side coding how beautiful results a one can get on a webpage.!
Simply Wonderful!
Thanks once again Tanweer!
Best Wishes,
~Salman~

My page has search parameters for data retrieval. Each time a hyperlink for a particular page is clicked, the data (based on page size) will be retrieved from database. Hence I need to pass the search parameters to the new index’s page also. I can pass it as a query string. But the challenge is in some cases the parameter content length can exceed query string limit.

What is the best approach to pass the search parameters to the new page when the hyperlinks are clicked?

Hi, assuming that your search perameter is coming from a textbox placed on the page, when you click on the hyperlink(in your case link button) on the server side you can get the value of textbox. Then you can call the Bind method to reload the data according the search perameter. Add another perameter in the SQL Query or storeprocedure to expect the search Perameter.
Hope this help you.