Friday, October 10, 2008

Simple Numeric Pagination for DataList and Repeater

There are a big number of tutorials available on how to implement pagination in asp.net DataList and Repeater. But all of them are explaining only about the Next/Prev mode of pagination only. Recently I have implemented a quick and dirty numeric pagination on DataList for one of my project.

The idea is simply use a PagedDataSource to get the current page of data and bind it to DataList or Repeater. Now create dynamic Linkbuttons using the PageSize and the Total rows count. See the code below.

ASPX Code

<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.pagination a{padding:5px;}
.pagination span{padding:5px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="dlPaginationSample" runat="server">
<ItemTemplate>
<%# Eval("Column1")%> | <%# Eval("Column2")%>
<br />
</ItemTemplate>
</asp:DataList>
</div>

<br />
<asp:Panel runat="server" id="pnlPager" CssClass="pagination">

</asp:Panel>
</form>
</body>

C# Code
//you can pass either DatList or Repeater to this function
private void bindDataWithPaging(Control bindControl, DataSet data)
{
if (data.Tables.Count > 0) // if the datset contains data
{
DataView dv = data.Tables[0].DefaultView;

PagedDataSource dsP = new PagedDataSource();
dsP.AllowPaging = true;
dsP.DataSource = dv;
dsP.CurrentPageIndex = CurrentPageIndex;
dsP.PageSize = PageSize;

//Binding data to the controls
if (bindControl is DataList)
{
((DataList)bindControl).DataSource= dsP;
((DataList)bindControl).DataBind();
}
else if (bindControl is Repeater)
{
((Repeater)bindControl).DataSource = dsP;
((Repeater)bindControl).DataBind();
}

//saving the total page count in Viewstate for later use
PageCount = dsP.PageCount;

//create the linkbuttons for pagination
BuildPagination();
}
}

The above function is straight forward and self explanatory. What it will do is simply create a PagedDataSource from the full dataset and bind it to the custom pagination repeater or datalist.


//create the linkbuttons for pagination
protected void BuildPagination()
{
pnlPager.Controls.Clear(); //

if (PageCount <= 1) return; // at least two pages should be there to show the pagination

//finding the first linkbutton to be shown in the current display
int start = CurrentPageIndex - (CurrentPageIndex % ButtonsCount);

//finding the last linkbutton to be shown in the current display
int end = CurrentPageIndex + (ButtonsCount - (CurrentPageIndex % ButtonsCount));

//if the start button is more than the number of buttons. If the start button is 11 we have to show the <<First link
if (start > ButtonsCount - 1)
{
pnlPager.Controls.Add(createButton(FirstPageText, 0));
pnlPager.Controls.Add(createButton("..", start - 1));
}

int i = 0, j = 0;

for (i = start; i < end; i++)
{
LinkButton lnk;
if (i < PageCount)
{
if (i == CurrentPageIndex) //if its the current page
{
Label lbl = new Label();
lbl.Text = (i + 1).ToString();
pnlPager.Controls.Add(lbl);
}
else
{
pnlPager.Controls.Add(createButton((i + 1).ToString(), i));
}
}
j++;
}

//If the total number of pages are greaer than the end page we have to show Last>> link
if (PageCount > end)
{
pnlPager.Controls.Add(createButton("..", i));
pnlPager.Controls.Add(createButton(">>", PageCount - 1));
}
}


This is the whole logic for a simple implementation. I am using this custom pagination in a number of projects and they are working great.

DOWNLOAD THE SOURCE AND SAMPLES FROM HERE for numeric datalist pagination

Tags
Implement custom numeric pagination with datalist and repeater, Datalist pagination, repeater pagination, paginating datalist, paginating repeater, numeric custom pagination, custom datalist pagination, custom repeater pagination, repeater numeric pagination, datalist numeric pagination, pagination with datalist and repeater, implement pagination datalist, asp.net datalist pagination

10 comments:

Anonymous said...

Hi,

Thanks for this wonderful code. It really helps me a lot. I've tried to create something like this bu I'm getting some errors.

Now, I don't have to worry about creating those controls in every page I have. I only have to use this user control.

Thanks!

Happy programming to you!

Jan said...

How can we get data from a database and bind it to this pager?

Anonymous said...

What a nice code!

Thank you very much.

Cecilia Lam

Anonymous said...

BEAUTIFULL!!!! THANKS A LOT!!!

sajithkumarcv said...

in the linkbutton paging instance sometimes an error occurse(multiple control with same id found. find controls requires that controls have unique ids

Anzer said...

Hi Sajith,
The error is coimh becuase more than one Linkbutton is assigned to same ID value.. I have checked the code and there is no reason for such an error... Add a break point in createButton() function and see in which situation multiple linkbutton with same IDs coming...

Regards
Anz

Anzer said...

Hi Sajith,
The error is coimh becuase more than one Linkbutton is assigned to same ID value.. I have checked the code and there is no reason for such an error... Add a break point in createButton() function and see in which situation multiple linkbutton with same IDs coming...

Regards
Anz

Anonymous said...

This really got me out of a tight spot, many thanks

Aamir said...

Awesome!! thanks alot!!

Anonymous said...

Hi,

I've discovered a bug when for example you have a page size of 10 and 110 elements.

To correct the bug here's what I've done:

if (PageCount > end)
{
if (PageCount - 1 != i)
{
pnlPager.Controls.Add(createButton("..", i));
}
pnlPager.Controls.Add(createButton(">>", PageCount - 1));
}

It's a great code, I've implemented it in all my gridview with paging, good job!!!

Search

Google