ASP.NET MVC 2 and the tablesort v2 jquery control

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

My personal preferred method to double check if a static resource (such as CSS file) is linking properly is to do a "View Source" in FireFox. This view hyperlinks the CSS links, so you can click on it and see, directly, what is or is not downloading.

However, since you mention Chrome, I would do this:

• Click on the "Control the current page" button (top right), and select "Developer" -> "Developer tools"

• Next, navigate to the CSS source link in your head tag, and click on the link for the CSS file, or click on the "Resources" menu option at the top which will list all resource on the page, and navigate to the CSS file

• It may tell you that you need to enable "resource tracking" at this point - if so, allow it. You can

• Once you navigate to the CSS file on the "Resources" page, click on it. It will load the resource. If it loads the expected CSS, then yes, it is loading correctly.

Now, let's assume that it is loading correctly, but you are still having problems. I would try adding your own custom CSS style to the style sheet, and see if it is updating the page as you expected. Could be something simple, like a

table td{ font-weight: bold; }

If this style takes affect, you know the style sheet is being applied.

If you're still having problems, could you direct us to the page (if it's publicly accessible), or alternatively prepare an example of what is not working on a site like http://jsbin.com/

Post back with an update, and I'll try and work you through the issue. I've used tablesorter myself, so am familiar with the plugin.

Answer 2

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>