ASP.NET – Add Cool CSS Styles to DataPager Control

Updated on October 2, 2015     Kisan Patel

This post will explain you how to Apply cool CSS styles to DataPager Control in ASP.NET?

So, When we add DataPager Control into web form then the code will look like as follow:

<asp:DataPager ID="DataPager1" runat="server">
  <Fields>
     <asp:NumericPagerField />
  </Fields>
</asp:DataPager>

If you want to use numeric page number buttons then replace above code with following code.

<div class="pagenavi">
    <asp:DataPager ID="DataPagerList" runat="server" PageSize="3" OnPreRender="DataPagerList_PreRender">
         <Fields>
             <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="false"
FirstPageText="&#171;" ShowNextPageButton="false" ShowFirstPageButton="true" ShowPreviousPageButton="False" />
                  <asp:NumericPagerField ButtonType="Link" ButtonCount="5" />
             <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" LastPageText="&#187;" ShowNextPageButton="false" ShowFirstPageButton="false" ShowPreviousPageButton="False" />
         </Fields>
    </asp:DataPager>
</div>

In above code, we have set the ButtonType attribute to Link, so its display anchor link in web page. also we have used FirstPageText attribute, this will display specified text.

Now you can use following CSS to apply the design.

.pagenavi a, .pagenavi span
{
  min-width:24px;
  min-height:20px;
  line-height:100%;
  text-decoration:none;
  text-align:center;
  margin:0 3px;
  padding:4px 0 0;
  vertical-align:middle;
  display:inline-block;
  zoom:1;*display:inline;
  -webkit-border-radius:10em;
  -moz-border-radius:10em;
  border-radius:10em
}
.pagenavi a
{
  background:#666;
  color:#fff;
  text-decoration:none
}
.pagenavi a:hover
{
  background-color:#333;
  text-decoration:none;
}
.pagenavi .current
{
  color:#666;
  text-decoration:none
}
.post-nav
{
  margin:0 0 30px;
  padding:15px 0;
  clear:both;
  font-size:14px;
}
.pagenavi
{
  padding:0;
  text-align:right;
  margin:0;
  float:right;
  width:100%;
}

After adding above css the asp.net datepager control will look like as shown in below screenshot: