WebGrid footer get styling for the current page

Question

Im trying to get a WebGrid view to work using razor, and so far i have managed to style mostly everything apart from the paging icons of the footer.

I've searched a lot of places to see how i can modify the CURRENT SELECTED PAGE (text) of the footer but to no avail.

It seems like the footer generates tags for any pages thats not currently selected with the a tags, but nothing is generated for the current page.

I am trying to make each paging button to have a border around it and this is what it currently looks like:

(i cant post images here so linking to imgur)

https://i.sstatic.net/lRT5G.jpg (bottom image)

I have modified all the elements apart from the current selected page - which i also want to have a border and change the colour of (so that it looks different from the rest).

Looking at the dev tools i see that the html looks like this:

(top image from the previous link)

It seems like theres an article which shows this being done using regex, but someone commented saying it should be done using webgrid itself.

The said article is on the link below:

http://weblogs.asp.net/imranbaloch/highlighting-the-current-page-of-webgrid

Is there any way to get the current page - whether using jQuery or WebGrid itself and not regex?

Answer 1

Alright so i've found a solution to my problem which I have achieved using javascript.

Not sure if this is the best solution but given that using the method as described in the asp.net blog didn't let me style the footers as easily as my current method (of defining the CSS in the webgrid constructor), this was the best approach - and I hope no one in this day and age has javascripts turned off which would prevent this from running.

So basically what I did was

var gridFooterHTML = $("td")[0].innerHTML;
var gridFooterText = $("td")[0].innerText;

var gridArrayText = gridFooterText.split(" ");

for (var i = 0; i < gridArrayText.length; i++) {

    var checkPosition = gridFooterHTML.indexOf(gridArrayText[i] + " ");

    if (checkPosition != -1) {
        var x = gridFooterHTML.replace(gridArrayText[i], "<a id=\"currentPage\">" + gridArrayText[i] + "</a>");
        $("td")[0].innerHTML = x;
    }

}

I don't have any other tables for my project so i'm just accessing it using the $("td") tags.

I first get the innertext and split them when theres a blank space.

For each of the elements from the innertext, I check to see where the positioning of it is with a blank space character added to it from the innerHTML.

If it returns a value other than -1, i've found the position that I need, so I replace the HTML text (which is currently just a number) to have an id.

Now that this number has an ID, I can target it using CSS and apply the same formatting as the other page links have.

Hope this helps others who may have used webgrids.