RSS
people

Search engine friendly Asp.Net digg like numeric pagination with datalist, repeater & gridview.

Asp.Net Digg like pagination is available as a ready to use user control.

aspnet-digg-likepagination

This is a C# equivalent of the jQuery pagination control available here

I have created this control for Nestlé Family website. Its been used for a number of big websites. Checkout the following links to see live implementations
http://www.nestle-family.com/healthy-living/english/
http://www.nestle-family.com/our-kitchen/english/desserts/

The main feature of the control is its flexibility to use as a search engine friendly query string based pagination or  as a traditional post back based pagination using link buttons.

To use the control, simply set the Total Items Count and Current Page Index.

Click here to see the DEMO and DOWNLOAD the source

Visit above link to download full source with sample styles.

Available Options

The following list describes all the parameters available with the control:

1.    TotalItems
The total number of items that need to be paginated. (Required)

2.    PageSize
The number of items has to be shown per page. The total number of pages is calculated by dividing the TotalItems by PageSize. (Default: 10)

3.    CurrentPageIndex
The page that is selected when the pagination is initialized. Css class of current link is “current” (Default: 1)

4.    PageMode
Page mode can be HyperLink or LinkButton. Hyperlink will render a query string based SEO friendly pagination and Linkbutton will render postback based pagination. Linkbutton will be useful if you want to use an UpdatePanel.  (Default: Hypelink)

5.    DisplayEntriesCount
Maximum number of pagination links that are visible. Set DisplayEntriesCount and EdgeEntriesCount as zero to make a simple previous/next pagination. (Default:10)

6.    EdgeEntriesCount
If this number is set to 1, links to the first and the last page are always shown. You can set it to bigger numbers to show more links. (Default: 2)

7.    TargetLink
Link target of the pagination links. The query string value will be added to this target. (Default: ?p= )

8.    PreviousPageText
Text for the “Previous” link that decreases the current page number by 1. Set as empty string to hide the link. (Default: « prev)

9.    NextPageText
Text for the “Next” link that increases the current page number by 1. Set as empty string to hide the link. (Default: next »)

10.    EllipseText
When there is a gap between the numbers created by EdgeEntriesCount and the displayed number interval, this text will be inserted into the gap. (Default: …)

11.    CssClass
The class name of the ul element which will be rendered as the parent root pagination element.

12.    TargetLinkFormatString
To use along with URL rewriters. Use either TargetLink or TargetLinkFormatString. If both are set, TargetLinkFormatString will have the priority. Example usage: users-{0}.aspx, this will render paginated pages as users-1.aspx, users-2.aspx etc and you can retrieve the parameters using a redirection rule. See the Nestle sample URLs given above. (Advanced setting – No default value)

13.    IndexDisplayOffset
By default the page parameter numbering will start from 1. If you want to change this, just add the offset. (Default: 1)

Styles

The pagination will be rendered as ui->li HTML elements with links. The downl0ad folder has various styles samples available with a demonstration on right to left pager also

aspnet-digg-likepagination-rtl

There are a number of excellent style samples available here which you can use with few simple changes.. Change all div elements to ul and span elements to li… add float:left for the li..

Download Source | View Demo

Usage Samples

//STAND ALONE USAGE – Without any bound controls – simply render a pagination strip


if (!IsPostBack)
{
PagerControl1.TotalItems = 1500;
PagerControl1.PageSize = 10;

int currentPage = 0;
if (!string.IsNullOrEmpty(Request.QueryString["p"]) && int.TryParse(Request.QueryString["p"], out currentPage))
{
PagerControl1.CurrentPageIndex = currentPage;
}

PagerControl1.CreatePagination();

}

//Bind directly to a datalist and Datatable


if (!IsPostBack)
{
int currentPage = 0;
if (!string.IsNullOrEmpty(Request.QueryString["p"]) && int.TryParse(Request.QueryString["p"], out currentPage))
{
PagerControl1.CurrentPageIndex = currentPage;
}

DataTable dt = SelectMyDataFromDB();
PagerControl1.BindDataWithPaging(DataList1, dt);
}

Download Source | View Demo

2 Responses to “Search engine friendly Asp.Net digg like numeric pagination with datalist, repeater & gridview.”

  1. DotNetShoutout Says:

    Search engine friendly Asp.Net digg like numeric pagination with datalist, repeater…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  2. bignner Says:

    thanks alot dude it is help me ….

Leave a Reply