sort_asc, sort_desc, sort_both not seen on server.

joeller

I am using a plain ordinary Data Table like this.

$(document).ready(function ()
{
$('#RequirementsView').dataTable();

});

I have the sort_asc.png, sort_desc.png, sort_both.png, etc all listed in the proper folder. When I run the application in Visual Studio the images display fine. However, when I deployed the application to the server, the images did not show up. I checked the published deployment package and the images are included in the proper location.

Even though the images do not show up, the sort works fine.

I don't know why the tick marks show up on the development machine, but not the server. I can not think of any reason it shouldn't. Can anyone provide assistance?

joeller

I found this in the datatables style sheets giving the correct relative path to the images.

table.dataTable thead .sorting {
background: url("../images/sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
background: url("../images/sort_asc.png") no-repeat center right;
}
table.dataTable thead .sorting_desc {
background: url("../images/sort_desc.png") no-repeat center right;
}
table.dataTable thead .sorting_asc_disabled {
background: url("../images/sort_asc_disabled.png") no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled {
background: url("../images/sort_desc_disabled.png") no-repeat center right;
}

allan

That finding that in the stylesheet help resolve the issue?

It does sound like a path issue. Checking the developer console in your browser should also show any 404 errors found.

Allan

joeller

No it did not because per my view of the directory structure the relative links appear fine.

This is what I found in Networking capturing:
URL Method Result Type Received Taken Initiator Wait‎‎ Start‎‎ Request‎‎ Response‎‎ Cache read‎‎ Gap‎‎
/Content/images/forward_disabled.png GET 404 text/html 5.51 KB 78 ms background-image 5647 0 78 0 0 31
/Content/images/back_disabled.png GET (Aborted) 0 B 109 ms background-image 5647 0 109 0 0 0
/Content/images/sort_both.png GET (Aborted) 0 B 47 ms background-image 5647 0 47 0 0 62
/Content/images/sort_asc.png GET (Aborted) 0 B 47 ms background-image 5647 0 47 0 0 62

This makes it appear that it did not find forward-disabled and did not bother to check for any of the other images. However note the URL. This is specifying a relative path from the root rather than the relative path specified in the CSS file. This relative path from the root while it is correct for the development application, the way the MVC app is deployed on the server, it actually falls under another application. So the correct relative path from the root on the server is being considered as /VFSApps/ProcTrack/Content/Images

I did a search of the entire solution this time for sort_asc and found this:

Find all "sort_asc.png", Find Results 1, Entire Solution, ""
C:\<ProjectFolder>\Content\css\jquery.dataTables.css(45): background: url("../images/sort_asc.png") no-repeat center right;
C:\<ProjectFolder>\Content\css\jquery.dataTables.min.css(1): table.dataTable thead .sorting_asc_disabled{background:url("../images/sort_asc_disabled.png")
C:\<ProjectFolder>\Content\jquery.dataTables.css(205):.sorting_asc { background: url('/Content/images/sort_asc.png') no-repeat center right; }
Matching lines: 3 Matching files: 3 Total files searched: 417

Note the two different "jquery.dataTables.css" in the two different locations, with the two different types of URL for "sort_asc.png" which on the server render to two different locations.

Interestingly in the CSS mention of forward_disabled is whose path is described as
paginate_disabled_next ".{ background: url('/Content/images/forward_disabled.png') no-repeat top right; }" is only listed in "Content\jquery.dataTables.css" and "Content\jquery.dataTables_themeroller.css" not in "Content\css\jquery.dataTables.css" or "Content\css\jquery.dataTables_themeroller.css".

I checked my downloads folder and I found that the files with the relative path from the root are from verion 1.9.4 and the ones with the pure relative path are from version 1.10.0.

So I am going to eliminate the version 1.9.4 stylesheets but then that leaves no mention of paginate_disabled_next in the stylesheets. Is this correct?

allan

If it looks styled correctly for what you want, then yes :-)

Allan

joeller

I mean is there not supposed to be any mention of paginate_disabled_next in the 1.10.0 style sheets?

allan

Nope. It is a legacy class retained for backwards compatibility. The disabled class is .paginate_button.disabled now.

Allan