I have used jQuery for this.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<style type="text/css">
.GridPager a
{
display: block;
min-height: 16px;
min-width: 18px;
background-color: #02ca02;
color: #fff;
font-weight: bolder;
border: 1px solid #02ca02;
text-align: center;
text-decoration: none;
}
.GridPager span
{
display: block;
min-height: 16px;
min-width: 18px;
background-color: #fff;
color: #02ca02;
font-weight: bold;
border: 1px solid #02ca02;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" Font-Names="Tahoma"
Font-Size="9pt" PagerStyle-CssClass="GridPager" PagerSettings-Mode="NumericFirstLast"
PagerSettings-PageButtonCount="5" HeaderStyle-BackColor="#e0e0e0" AllowPaging="true"
OnPageIndexChanging="GridView2_OnPaging" PageSize="1" GridLines="Both" Width="700px"
BorderColor="#919191" BorderStyle="Solid" BorderWidth="1px" HeaderStyle-BorderStyle="Solid"
HeaderStyle-BorderColor="#919191" HeaderStyle-BorderWidth="1px" RowStyle-BorderColor="#919191"
RowStyle-BorderStyle="Solid" RowStyle-BorderWidth="1px" AlternatingRowStyle-BackColor="#C0C0C0"
PagerStyle-HorizontalAlign="Center" PagerStyle-VerticalAlign="Middle">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
<HeaderStyle BackColor="#E0E0E0" BorderColor="#919191" BorderWidth="1px" BorderStyle="Solid">
</HeaderStyle>
<PagerSettings Mode="NumericFirstLast" PageButtonCount="3" FirstPageText="First"
LastPageText="Last"></PagerSettings>
<PagerStyle HorizontalAlign="Center" VerticalAlign="Bottom" Width="40" Height="40"
CssClass="GridPager"></PagerStyle>
<RowStyle BorderColor="#919191" BorderWidth="1px" BorderStyle="Solid"></RowStyle>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script type="text/javascript">
if ($('.GridPager td table tr td:last').text() == 'Last') {
$('.GridPager td table tr td:last').find('a').css('width', '40px');
$('.GridPager td table tr td:last').find('a').css('height', '20px');
}
if ($('.GridPager td table tr td:first').text() == 'First') {
$('.GridPager td table tr td:first').find('a').css('width', '40px');
$('.GridPager td table tr td:first').find('a').css('height', '20px');
}
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_beginRequest(function (sender, e) {
//Event raised when the Async Postback is started.
//Detect whether the request is Async
var isAsync = sender._postBackSettings.async;
//Detect Id of the control that caused the postback.
var controlId = sender._postBackSettings.sourceElement.id;
});
}
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
//Event Raised when the Async Postback is completed.
if ($('.GridPager td table tr td:last').text() == 'Last') {
$('.GridPager td table tr td:last').find('a').css('width', '40px');
$('.GridPager td table tr td:last').find('a').css('height', '20px');
}
if ($('.GridPager td table tr td:first').text() == 'First') {
$('.GridPager td table tr td:first').find('a').css('width', '40px');
$('.GridPager td table tr td:first').find('a').css('height', '20px');
}
}
});
</script>
</body>
</html>
Namespace
using System.Data;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.Populate();
}
}
private void Populate()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
dt.Rows.Add(5, "Andrew Fuller", "Russia");
dt.Rows.Add(6, "Michael Suyama", "England");
GridView2.DataSource = dt;
GridView2.DataBind();
}
protected void GridView2_OnPaging(object sender, GridViewPageEventArgs e)
{
this.GridView2.PageIndex = e.NewPageIndex;
this.Populate();
}