Question

Hopefully someone can help, I’ve been playing with ASP.NET MVC 2 for a learning project. Recently I wanted to introduce some more advanced effects, one of which being sortable tables. Given that I have a number of other jquery controls, using a jquery control seemed a good idea!

I selected tablesorter v2 and set about adding it to my site.

1. Ensured my tables I wanted styling had thead/tbody sections.
2. Added the .js file to my Scripts directory.
3. Added this to the top of my partial view <script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.4.custom.min.js") %>" type="text/javascript"></script>
4. (For info) also tried with that entry in the “Site.Master” view.
5. Added id="leagueTable" to my table.
6. Added <script type="text/javascript">
$(document).ready(function () { $("#leagueTable").tablesorter(); });
</script> to the partial view.

At this stage, I ran the site and everything worked as expected – e.g. I can sort the content but nothing visually changed much. Now to add the CSS….

1. I downloaded the “blue.zip” and copied this all to /Content directory.
2. Added the following to the top of the Site.Master, <link href="<%= Url.Content("~/Content/style.css") %>" type="text/css" rel="stylesheet" /> (NB. style.css is the name of the supplied CSS – originally I renamed this but after problems I reduced my changes to keep as supplied).

At this stage, I reran (ensuring to Ctrl-F5 to expire any caching) and hoped to see the fancy styling as shown in the examples… instead, whilst still functional, nothing is looking different.

I ran in chrome (with the Inspect element tools) and confirmed that the CSS is being downloaded – the jquery is being applied as I have the sort functionality working – but it claims nothing in the CSS is being used (using the Audits – “style.css: 100% (estimated) is not used by the current page.”).

What on earth am I doing wrong? Why am I not getting the styles applied? [20 years in the C++, real-time field, but new to web-development]

Answer 1

Well the solution, after lots of hunting and following the direction of @Matt turned out to be very simple – but I’ve double checked the tablesorter documentation and found it isn’t mentioned there!

When you add either the “Blue” or “Green” themes supplied on the site, both require the table to be given a class name of tablesorter. I had falsely assumed that the jQuery (which worked) would have altered the table structure adding its own style classes that match those defined in the theme!

So to recap:

<script type="text/javascript">
    $(document).ready(function () { 
        $("#leagueTable1").tablesorter();
        $("#leagueTable2").tablesorter();
    });
</script>

<table id="leagueTable1">
    <thead>
    ...  // THIS TABLE WILL NOT BE STYLED
</table>
<table id="leagueTable2" class="tablesorter">
    <thead>
    ...  // THIS TABLE _WILL_ BE STYLED
</table>