I just want to style the current page or selected page in a WebGrid, How do i do it?

Question

How to highlight the current page number in MVC WebGrid

This is my webgrid control

@{
var grid = new WebGrid(canPage: true, rowsPerPage: @Model.PageSize, canSort: true, ajaxUpdateCallback: "getStars", ajaxUpdateContainerId: "suppListGrid");
grid.Bind(@Model.SearchResultSupplierViewModels, rowCount: @Model.TotalPageRows, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);

@grid.GetHtml(tableStyle: "webGrid",
footerStyle:"pp-pagenumber",
            htmlAttributes: new {id="suppListGrid"},
            columns: grid.Columns(
            grid.Column(format: (item) => @Html.Raw("<div class='row panelLawfirmresultbox'><div class='col-md-2 panelsupplierlogo'><img src='../Content/images/profile-logo.png' class='img-responsive' /></div><div class='col-md-7'><h4><a href='#'>"+item.SupplierName+"</a><sup class='pps-type'>Premium</sup></h4> <div class='panelPracticeAreaDetails'><div class='content'> <span class='blue'>Services Offered: </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.KeyPracticeAreaName+"'>"+item.KeyPracticeAreaNames+"</a></div></div><div class='panelLocationDetails'><div class='content'> <span class='blue'>Location(s): </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.SupplierLocation+"'>"+item.SupplierLocations+"</a> </div><div class='more'>&#8230;</div></div><span class='blue'>Client Rating ("+item.ClientRating+"): </span><span class='clientStars'>"+item.ClientRating+"</span><br /><span class='blue'>Panel Partnership Rating ("+item.PanelRating+"): </span><span class='panelStars'>"+item.PanelRating+"</span></div> <div class='col-md-3'> <a href='lawfirm-profile.html' class='ppbutton-reachout'>Reach Out</a> <a href='#addtopanel' class='ppbutton-addpanel inline2'>Add to Panel</a> <a href='#' class='ppbutton-addwatch'>Add to Watchlist</a> </div></div>"))
     )) 
} 

using footerStyle:"pp-pagenumber" i was able to set styles for not selected page numbers, but how to set style for the currently selected page?

Answer 1

Finally i came in to this solution. I think this is the only easy fix to the problem.

<style>
    span.clientStars span {
        background-position: 0 0;
    }
</style>

$(document).ready(function () {
 //Area for providing page number style
    $('tr.pp-pagenumber td').contents().filter(function () {
        return this.nodeType === 3;
    }).wrap('<a class="currentPage" style="color: #fff;background: #438a16;"></a>');

    $(".currentPage").each(function () {
        if ($(this).html().trim() == "")
            $(this).remove();
    });
    //END
});