Missing Sort Arrows

hermes980

Hi all,

I have jquery.dataTables.css as my style sheet but don't have arrows for sorting. Sorting works by clicking on the columns, but where are the arrows/how do I install them?

Thanks,

K.

hermes980

The display class is applied as well.

shickey

Are you using IE8? I found I had this problem when using width. See my post here.

Check the DOM and see if the sorting_asc and sorting_desc are not correctly being applied to the header row like was the case with my issue.

I fixed my problem by not using width in favor of adding a className and then styling with no-wrap, although, that might not meet your needs.

hermes980

I am using IE11 with IE10 compatibility mode enabled. I get the same issue in Chrome.

shickey

Do you have an example page we can look at? Preferably a minified version with the least number of settings where the error is still occurring? Are you using width?

Note: I also see this issue in IE10 and IE11 when using compatibility mode on either, but I am not seeing it ever occur in Chrome.

hermes980

I am not using width. Unfortunately, the datatable is in an intranet. Here are the references I am using. Am I missing any?

<link rel="stylesheet" href="../SiteAssets/jquery.dataTables.css" />
<script src="../SiteAssets/jquery-1.10.2.min.js"></script>
<script src="../SiteAssets/jquery.dataTables.js"></script>

Everything is per the example on the homepage of datatables.net

shickey

If the only thing you are missing is the sorting arrows, I believe this is a bug with DataTables and I reported it in my post, but haven't heard anything about it. For some reason, the sorting_asc and sorting_desc classes aren't being correctly applied to the header cells in IE8 or IE9+ in compatibility mode.

allan

I'm not aware of any bugs in DataTables that would effect that, and as you can see in my examples, the sort appears appear to work okay as @hermes980 say - another example: http://datatables.net/examples/basic_init/zero_configuration.html .

We'd need a link to a page showing the issue to be able to offer any further help.

Allan

shickey

Allan, I experience the issue when using IE8 on the homepage. You can also see an example from where I originally had this same problem here.

hermes980

Hi Allan,

When I put it in a straight HTML file using the CDNs it shows the Arrows. The same code on a SharePoint page doesn't work. I suspect SharePoint to be the culprit... again.

hermes980

Wait a second. If I use the CSS from the CDN it works. Using the CSS referenced locally doesn't. Any clues????

hermes980

Figured it out. Overlooked that I needed to pull down the images folder and adjust the links in the path. Problem solved.

shickey

Here is an image showing the situation occurring on the homepage. As you can see, the sorting arrow is on the first column (like it was when the page loaded) even though sorting has changed to the Age column. All other styling features are working.

allan

I wonder if this might be related to the other bug that have been reported around IE8 and events not occurring after the first occurrence of that event. I'll look into it when I get a chance to look at that bug. Thanks for flagging this up.

Allan

shickey

Allan,

It's possible that it's related, but I'm also experiencing this problem where no sorting arrows appear at all in IE8, IE10 in compatibility mode and IE11 in compatibility mode. It's possible these issues aren't related as the issue in this link only occurs when using "width".

hermes980

I already figured out my issue. I was missing the images. Please see my previous post. All is resolved!

allan

See thread 21040 for the fix for IE8 with width assigned and the sort icons not being shown.

Allan