Give Active class for current page

Question

I have used a datapager for my listview . And I want if the user is on 2nd page the number 2nd should be highlighted. The datapager code is here

.pagination {
  font-family: 'signika_negativeRegular', sans-serif;
  font-size: 13px;
}
.pagination a,
.pagination strong {
  background: #fff;
  /* display: inline-block; */
  margin-right: 3px;
  padding: 4px 12px;
  text-decoration: none;
  line-height: 1.5em;
  /* -webkit-border-radius: 3px; */
  -moz-border-radius: 3px;
  /* border-radius: 3px; */
  border: 1px solid#ccc;
}
.pagination a:hover {
  background-color: red;
  color: #fff;
}
.pagination a:active {
  background: #ccc;
  padding: 4px 6px;
}
.pagination strong {
  border: 1px solid #ccc;
  font-size: 13px;
  color: #cf060d;
}

HTML:

<div class="pagination">
  <asp:DataPager ID="dpNews" runat="server" PagedControlID="lstNews" PageSize="3">
    <Fields>
      <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true" ShowNextPageButton="false" />
      <asp:NumericPagerField ButtonType="Link" />
      <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
    </Fields>
  </asp:DataPager>
</div>

Please help

Answer 1

You can try adding a new css style and then you can use the CurrentPageLabelCssClass property to assign the css class like givenbelow

.pagination
    {
        font-family: 'signika_negativeRegular' , sans-serif;
        font-size: 13px;
    }

    .pagination a, .pagination strong
    {
        background: #fff; /* display: inline-block; */
        margin-right: 3px;
        padding: 4px 12px;
        text-decoration: none;
        line-height: 1.5em; /* -webkit-border-radius: 3px; */
        -moz-border-radius: 3px; /* border-radius: 3px; */
        border: 1px solid#ccc;
    }

    .pagination a:hover
    {
        background-color: red;
        color: #fff;
    }

    .pagination a:active
    {
        background: #ccc;
        padding: 4px 6px;
    }


    .pagination strong
    {
        border: 1px solid #ccc;
        font-size: 13px;
        color: #cf060d;
    }

    .current-page
    {
        background-color: red;
        color: #fff;
    }

HTML:

<div class="pagination">
    <asp:DataPager ID="dpNews" runat="server" PagedControlID="ListView1" PageSize="3">
        <Fields>
            <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                ShowNextPageButton="false" />
            <asp:NumericPagerField ButtonType="Link" CurrentPageLabelCssClass="current-page" />
            <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false"
                ShowPreviousPageButton="false" />
        </Fields>
    </asp:DataPager>
</div>

Hope it helps :)