Create a user control for Paging and add to main page
<%@ Register Src="~/SysControls/SysAdminPager.ascx" TagName="DataPagerControl" TagPrefix="uc1" %> . . .
Using a simple list view for binding data.
<uc1:DataPagerControl ID="sysPager" runat="server" />
<asp:ListView ID="lstView" runat="server">
<LayoutTemplate>
<table class="normal fullwidth">
<thead>
<tr style="background-color: #EEE">
<th>
ID
</th>
<th>
Name
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr class='<%# (Container.DataItemIndex+1)%2==0?"":"odd" %>'>
<td>
<%#Eval("ID") %>
</td>
<td>
.
.
.
On Page Load Reginster Event handler for Pager Control. Use Sql Paging..pass your page number and page size SP and return data and totalrow count . Set page properties using pagenumber,pagesize and total rows
protected void Page_Load(object sender, EventArgs e)
{
sysPager.PageChanged += new EventHandler<PageEventArgs>(sysPager_PageChanged);
if (!IsPostBack)
{
BindData();
}
}
void sysPager_PageChanged(object sender, PageEventArgs e)
{
BindData(e.StartRowIndex, e.MaximumRows);
}
void BindData(int pagenumber = 1, int pagesize = 20)
{
SampleCollectionML lstCollection = SampleBL.SelectAll(new SampleML { PageNumber = pagenumber, PageSize = pagesize });
if (lstCollection.Count > 0)
{
lstView.DataSource = lstCollection;
lstView.DataBind();
sysPager.SetPageProperties(pagenumber, pagesize, lstCollection[0].TotalRows);
}
}
Source code User Control For Pager
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SysAdminPager.ascx.cs"
Inherits=" GradeBook.SysControls.SysAdminPager" %>
<div class="pager-container">
<div style="float: left; margin-right: 15px; vertical-align: middle">
Page size:
<asp:DropDownList ID="ddlPageSize" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged"
Style="padding: 2px;">
<asp:ListItem Value="10" Text="10"></asp:ListItem>
<asp:ListItem Value="20" Text="20"></asp:ListItem>
<asp:ListItem Value="50" Text="50"></asp:ListItem>
<asp:ListItem Value="100" Text="100"></asp:ListItem>
</asp:DropDownList>
</div>
<asp:Repeater ID="rpt" runat="server">
<HeaderTemplate>
<div class='<%# PagerCss %>'>
<div style="float: left; padding: 4px 0 2px;">
Page <b>
<%# Convert.ToInt32(TotalRowCount > 0 ? CurrentPage : 0)%>
</b>of <b>
<%# Convert.ToInt32(MaximumRows>0? Math.Ceiling((double)TotalRowCount / MaximumRows):0)%>
</b>(<%# TotalRowCount %>
item(s))
</div>
<div style="float: right; padding-top: 2px;">
<asp:LinkButton ID="lnkbFirst" CommandName="<%#PageChangedItemCommand %>" CommandArgument="1"
runat="server" ToolTip="First" CssClass="page-text">«First</asp:LinkButton>
<asp:LinkButton ID="lnkbPrevious" CommandName="<%#PageChangedItemCommand %>" CommandArgument="<%#PreviousPageIndex%>"
runat="server" ToolTip="Previous" CssClass="page-text">«Prev</asp:LinkButton>
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton CommandName="<%#PageChangedItemCommand %>" CommandArgument='<%#DataBinder.Eval(Container.DataItem, "Page")%>'
ID="p" runat="server"><%#DataBinder.Eval(Container.DataItem, "Text")%> </asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:LinkButton ID="lnkbNext" CommandName='<%#PageChangedItemCommand %>' CommandArgument="<%#NextPageIndex%>"
runat="server" ToolTip="Next" CssClass="page-text">Next »</asp:LinkButton>
<asp:LinkButton ID="lnkbLast" CommandName="<%#PageChangedItemCommand %>" CommandArgument="<%#PagesCount%>"
runat="server" ToolTip="Last" CssClass="page-text">Last »</asp:LinkButton>
</div> </div>
</FooterTemplate>
</asp:Repeater>
<div style="float: right; margin-right: 6px">
Go to:
<asp:DropDownList ID="ddlPageNumber" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlPageNumber_SelectedIndexChanged"
Style="padding: 2px;">
</asp:DropDownList>
</div>
<div class="clear">
</div>
</div>
A Class for holding Paging parameter
public class SysPager
{
public int Page { get; set; }
public string Text { get; set; }
public SysPager(int _p, string _t)
{
Page = _p;
Text = _t;
}
}
Page Propeties for holding paging information
//public partial class SysAdminPager : System.Web.UI.UserControl
// {
// Summary:
// Gets the maximum number of records to display on each page.
//
// Returns:
// The maximum number of records to display on each page.
public int MaximumRows
{
get
{
return (int)(ViewState["MaximumRows"] ?? 10);
}
set
{
ViewState["MaximumRows"] = value;
}
}
//
// Summary:
// Gets the index of the first record on a page.
//
// Returns:
// The index of the first record on a page.
public int CurrentPage
{
get
{
return (int)(ViewState["CurrentPage"] ?? 1);
}
set
{
ViewState["CurrentPage"] = value;
}
}
//
// Summary:
// Gets the total number of records in the underlying data source.
//
// Returns:
// The total number of records of the underlying data source.
public int TotalRowCount
{
get
{
return (int)(ViewState["TotalRowCount"] ?? 0);
}
set
{
ViewState["TotalRowCount"] = value;
}
}
public int ButtonCount
{
get
{
return (int)(ViewState["ButtonCount"] ?? 10);
}
set
{
ViewState["ButtonCount"] = value;
}
}
private int _pagesCount;
public int PagesCount
{
get
{
if (TotalRowCount == 0)
return _pagesCount = 0;
else if (TotalRowCount % MaximumRows == 0)
return _pagesCount = (TotalRowCount / MaximumRows);
else
return _pagesCount = ((TotalRowCount / MaximumRows) + 1);
}
private set
{
_pagesCount = value;
}
}
public string PagerCss
{
get
{
return (string)(ViewState["PagerCss"] ?? "pagination-default");
}
set
{
ViewState["PagerCss"] = value;
}
}
protected int NextPageIndex { get { return CurrentPage + 1; } }
protected int PreviousPageIndex { get { return CurrentPage - 1; } }
Page Changing Event Declaration and Invoking
public event EventHandler<PageEventArgs> PageChanged;
protected const string PageChangedItemCommand = "PageChanged";
private const string CurrentPageCssStyle = "current";//"font-weight:bold; font-size:15px;";
private void RaiseEvent(int currentPage)
{
if (PageChanged != null)
PageChanged(this, new PageEventArgs(currentPage, MaximumRows, TotalRowCount));
}
Create Paging data using Totalrows,Pagesize and button count
protected List<SysPager> DataSource
{
get
{
List<SysPager> pages = new List<SysPager>();
int _startpage = 1;
int _endpage = PagesCount;
bool showMore_first = false;
bool showMore_last = false;
if (PagesCount > ButtonCount)
{
if (CurrentPage - (ButtonCount / 2) > 1)
{
_startpage = CurrentPage - (ButtonCount / 2);
showMore_first = true;
}
if (CurrentPage + (ButtonCount / 2) < PagesCount)
{
_endpage = CurrentPage + (ButtonCount / 2);
if (_endpage < ButtonCount)
_endpage = ButtonCount;
showMore_last = true;
}
}
if (showMore_first)
{
pages.Add(new SysPager(_startpage - 1, "..."));
}
for (int i = _startpage; i <= _endpage; i++)
{
pages.Add(new SysPager(i, i.ToString()));
}
if (showMore_last)
{
pages.Add(new SysPager(_endpage + 1, "..."));
}
return pages;
}
}
public SysAdminPager()
{
CurrentPage = 1;
MaximumRows = 1;
TotalRowCount = 1;
}
Page Load And Other Events
protected void Page_Load(object sender, EventArgs e)
{
rpt.ItemCommand += new RepeaterCommandEventHandler(rpt_ItemCommand);
if (!Page.IsPostBack)
{
//CurrentPageSetCssStyle(CurrentPageCssStyle);
// SetupCommandArguments();
}
}
void rpt_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == PageChangedItemCommand)
{
CurrentPage = int.Parse(e.CommandArgument.ToString());
CurrentPageSetCssStyle(CurrentPageCssStyle);
// SetupCommandArguments();
SetPageProperties();
RaiseEvent(CurrentPage);
}
}
private void CurrentPageSetCssStyle(string style)
{
ddlPageNumber.SetDropDownSelectedValue(CurrentPage);
ddlPageSize.SetDropDownSelectedValue(MaximumRows);
foreach (RepeaterItem item in rpt.Items)
{
LinkButton lnkButton = item.FindControl("p") as LinkButton;
if (lnkButton != null)
{
if (lnkButton.CommandArgument == CurrentPage.ToString())
lnkButton.Attributes.Add("class", style);
}
}
// SetupCommandArguments();
}
void SetupCommandArguments()
{
LinkButton lnkbPrevious = rpt.Controls[0].Controls[0].FindControl("lnkbPrevious") as LinkButton;
LinkButton lnkbFirst = rpt.Controls[0].Controls[0].FindControl("lnkbFirst") as LinkButton;
if (lnkbPrevious != null)
{
if (CurrentPage == 1 || PagesCount == 0)
{
lnkbPrevious.Enabled = false;
lnkbFirst.Enabled = false;
lnkbPrevious.CommandArgument = (CurrentPage).ToString();
}
else
{
lnkbPrevious.Enabled = true;
lnkbFirst.Enabled = true;
lnkbPrevious.CommandArgument = (CurrentPage - 1).ToString();
}
}
LinkButton lnkbNext = rpt.Controls[rpt.Controls.Count - 1].Controls[0].FindControl("lnkbNext") as LinkButton;
LinkButton lnkbLast = rpt.Controls[rpt.Controls.Count - 1].Controls[0].FindControl("lnkbLast") as LinkButton;
if (lnkbNext != null)
{
if (CurrentPage == PagesCount || PagesCount == 0)
{
lnkbNext.CommandArgument = (CurrentPage).ToString();
lnkbNext.Enabled = false;
lnkbLast.Enabled = false;
}
else
{
lnkbNext.CommandArgument = (CurrentPage + 1).ToString();
lnkbNext.Enabled = true;
lnkbLast.Enabled = true;
}
}
}
internal void SetPageProperties(int _startpage, int _maxrows, int _totrows)
{
CurrentPage = _startpage;
MaximumRows = _maxrows;
TotalRowCount = _totrows;
SetPageProperties();
}
internal void SetPageProperties()
{
rpt.DataSource = DataSource;
rpt.DataBind();
SetupCommandArguments();
ddlPageNumber.Items.Clear();
for (int i = 1; i <= PagesCount; i++)
{
ddlPageNumber.Items.Add(new ListItem(i.ToString(), i.ToString()));
}
CurrentPageSetCssStyle(CurrentPageCssStyle);
}
Dropdown LIst Changing Events
protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)
{
try
{
MaximumRows = int.Parse(ddlPageSize.SelectedValue);
if (PagesCount < CurrentPage)
CurrentPage = PagesCount;
CurrentPageSetCssStyle(CurrentPageCssStyle);
SetPageProperties();
RaiseEvent(CurrentPage);
}
catch (Exception)
{
}
}
protected void ddlPageNumber_SelectedIndexChanged(object sender, EventArgs e)
{
try
{
CurrentPage = int.Parse(ddlPageNumber.SelectedValue);
CurrentPageSetCssStyle(CurrentPageCssStyle);
SetPageProperties();
RaiseEvent(CurrentPage);
}
catch (Exception)
{
}
}
}
You can change theme Gray,Blue,Red,Green.
/*######################################################## Pagination ########################################################*/
.pager-container {
background: -moz-linear-gradient(center top , #FBFBFB, #F5F5F5) repeat scroll 0 0 transparent;
border: 1px solid #CBC5C5;
border-radius: 5px 5px 5px 5px;
padding: 5px 8px;
}
.pagination a{font-size: 9px !important;text-transform: uppercase; /* background-color: #FFFFFF;*/border: 1px #5e90c3 solid;color: #5e90c3;padding: 1px 3px;
text-decoration: none;outline: none;}
.pagination a:hover{ color: white;background-color: #5e90c3;border: 1px #5e90c3 solid;}
.pagination a.current,.pagination a:hover{font-size: 9px;text-transform: uppercase;background-color: #5e90c3;
border: 1px solid #F2F2F2;color: white;padding: 1px 5px;text-decoration: none;outline: none;}
.pagination a[disabled=disabled]{ background-color: #CCCCCC;border: 1px solid #F2F2F2;color: #003366;}
/* $$$$$$$$$$$$$$ Default $$$$$$$$$$$$$$$$*/
.pagination-default a{
font-size: 10px !important;text-transform: uppercase;color: #606060;border: 1px solid #DDDDDD;border-radius: 4px;
padding: 2px 3px; cursor: pointer; outline: none !important; text-align: center; text-decoration: none;
/*border-color: #c0c0c0 #d4d4d4 #dbdbdb;text-shadow: 0px -1px 0px #fff;
background: -moz-linear-gradient(top,#ebebeb,#f4f4f4 50%,#fff); background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), color-stop(0.5, #f4f4f4),to(#fff));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f4f4f4', EndColorStr='#ffffff');*/ }
.pagination-default a.current,.pagination-default a:hover { color: #606060; text-shadow: 0px 1px 0px #fff;
border-color: #D0D0D0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
.pagination-default a:hover{ background: #f1f1f1;}
.pagination-default a.current{ box-shadow:none; background-color: #e0e0e0; background: -moz-linear-gradient(top,#e0e0e0,#f4f4f4 50%,#e0e0e0));
background: -webkit-gradient(linear, left top, left bottom,from(#fff),color-stop(0.5, #f4f4f4),to(#e0e0e0));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f4f4f4', EndColorStr='#e0e0e0');}
.pagination-default a[disabled=disabled]{ color: #aaa;}
.pagination-default a.page-text{border:none;text-decoration:underline;}
/* $$$$$$$$$$$$$$ ORANGE $$$$$$$$$$$$$$$$*/
/* $$$$$$$$$$$$$$ GRAY $$$$$$$$$$$$$$$$*/
.pagination-gray a{ font-size: 9px !important;text-transform: uppercase; border: 1px #5e90c3 solid;color: #5e90c3;padding: 1px 3px;
cursor: pointer; outline: none !important; text-align: center; text-decoration: none; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-khtml-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#d1d1d1));
background: -moz-linear-gradient(top, #e9e9e9, #d1d1d1); -pie-background: linear-gradient(top, #e9e9e9, #d1d1d1);
border: 1px solid #bbb; color: #555; text-shadow: 0 1px 0 #fff;
}
.pagination-gray a.current ,.pagination-gray a:hover { background: #fff; -pie-background: #fff; color: #666;}
.pagination-gray a[disabled=disabled]{ color: #aaa;}
/* $$$$$$$$$$$$$$ WHITE $$$$$$$$$$$$$$$$*/
.pagination-white a{
font-size: 9px !important;text-transform: uppercase; /* background-color: #FFFFFF;*/border: 1px #D8D8D8 solid;color: #606060;padding: 1px 3px;
cursor: pointer; outline: none !important; text-align: center; text-decoration: none;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -khtml-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
background: #fff; -pie-background: #fff; border: 1px solid #bbb; color: #555;
text-shadow: 0 1px 0 #fff; }
.pagination-white a.current,.pagination-white a:hover { background: #f1f1f1;background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#d1d1d1));
background: -moz-linear-gradient(top, #e9e9e9, #d1d1d1); -pie-background: linear-gradient(top, #e9e9e9, #d1d1d1);
color: #666;}
.pagination-white a[disabled=disabled]{ color: #aaa;}
/* $$$$$$$$$$$$$$ ORANGE $$$$$$$$$$$$$$$$*/
.pagination-orange a
{
font-size: 9px !important;text-transform: uppercase; /* background-color: #FFFFFF;*/border: 1px #D8D8D8 solid;color: #606060;padding: 1px 3px;
cursor: pointer; outline: none !important; text-align: center; text-decoration: none;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
-pie-background: linear-gradient(top, #faa51a, #f47a20);
border: solid 1px #dd6611;
color: #fef4e9;
text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.pagination-orange a.current,.pagination-orange a:hover {
background: #EEEEEE;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EEEEEE));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
-pie-background: linear-gradient(top, #FFFFFF, #EEEEEE);
border: solid 1px #F88E11;
color: #F88E11;
}
.pagination-orange a[disabled=disabled]
{
color: #d1d1d1;
}
/* $$$$$$$$$$$$$$ RED $$$$$$$$$$$$$$$$*/
.pagination-red a
{
font-size: 9px !important;text-transform: uppercase; /* background-color: #FFFFFF;*/border: 1px #D8D8D8 solid;color: #606060;padding: 1px 3px;
cursor: pointer; outline: none !important; text-align: center; text-decoration: none;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
background-color: #C44747;
background: -moz-linear-gradient(top, #DD5F5F 10%, #A92C2C 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #DD5F5F), color-stop(0.9, #A92C2C));
-pie-background: linear-gradient(top, #DD5F5F 10%, #A92C2C 90%);
border: 1px solid #A92C2C;
color: #fef4e9;
text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.pagination-red a.current,.pagination-red a:hover {
background-color: #FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF 10%, #EEEEEE 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #FFFFFF ), color-stop(0.9, #EEEEEE));
-pie-background: linear-gradient(top, #FFFFFF 10%, #EEEEEE 90%);
border: 1px solid #ccc;
color: #000;
}
.pagination-red a[disabled=disabled]
{
color: #CCCCCC;
}
/* $$$$$$$$$$$$$$ BLUE $$$$$$$$$$$$$$$$*/
.pagination-blue a
{
font-size: 9px !important;text-transform: uppercase; /* background-color: #FFFFFF;*/border: 1px #D8D8D8 solid;color: #606060;padding: 3px 3px;
cursor: pointer; outline: none !important; text-align: center; text-decoration: none;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
-pie-background: linear-gradient(top, #00adee, #0078a5);
border: 1px solid #034462;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.pagination-blue a.current,.pagination-blue a:hover {
background: #EEE;
background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#FFF));
background: -moz-linear-gradient(top, #EEE, #FFF);
-pie-background: linear-gradient(top, #EEE, #FFF);
border: 1px solid #234;
color: #000;
}
.pagination-blue a[disabled=disabled]{ color: #ccc;}
/* $$$$$$$$$$$$$$ GREEN $$$$$$$$$$$$$$$$*/
.pagination-green a
{
font-size: 9px !important;text-transform: uppercase; /* background-color: #FFFFFF;*/border: 1px #D8D8D8 solid;color: #606060;padding: 1px 3px;
cursor: pointer; outline: none !important; text-align: center; text-decoration: none;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
color: #fff;
background: #8fc857;
background: -webkit-gradient(linear, left top, left bottom, from(#8fc857), to(#5c9425));
background: -moz-linear-gradient(top, #8fc857, #5c9425);
-pie-background: linear-gradient(top, #8fc857, #5c9425);
text-shadow: 0 1px 1px rgba(0,0,0,0.25);
border:1px solid #561;
}
.pagination-green a.current,.pagination-green a:hover {
background: #E9E9E9;
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D1D1D1));
background: -moz-linear-gradient(top, #E9E9E9, #D1D1D1);
-pie-background: linear-gradient(top, #E9E9E9, #D1D1D1);
border:1px solid #342;
}
.pagination-green a[disabled=disabled]
{
color: #ccc;
}
/* $$$$$$$$$$$$$$ PAGINATIOn END $$$$$$$$$$$$$$$$*/
