Howto style custom sorting icons

tj46

Hello,

I haven't been able to figure out how to create a custom icon styling when I'm *not* using bJQueryUI. When bJQueryUI is true, an extra span element is added to each which is handy to style an icon.

With my own custom styles, I can't figure out how to style my column headers with colors, backgrounds, etc.. and then still specify the sort icon? Any hints?

Thanks.
tj

GregP

This is more of a general CSS question rather than a DataTables question, so the answer lies in deciding which CSS approach to take. For example, Datatables itself will add classes "sorting", "sorting_asc" and "sorting_desc" to facilitate the sorting arrows. To style the sorting arrows, you would modify those selectors and/or the related arrow images that you will already find in the existing CSS file(s).

To style all headers the same, it would normally be something generic:

th { background-color: #FF0000 }

But due to the rules of CSS Specificity, this doesn't work. It leaves you two options: either add to the existing two selectors:

table.display thead th, table.display tfoot th { background-color: #FF0000 }

Or in this case if those selectors are not already declaring the properties you want to modify, even:

table.display th {background-color: #FF0000}

----

I've used background-color, but of course you would put any other declarations in there. For example, if you wanted an icon to the left of the header text, you would need to set something like:

table.display th {background-image: url('images/icons/myIcon.png'); background-repeat: none; padding-left: 20px }

The padding-left makes room for the icon. (note: use short-form CSS where possible; I'm just using long-form in the example)

----

If you want to style individual header cells, it's a simple matter of adding a class to your pure HTML. DataTables will add classes, not replace them.

myHeader

Will render after initialization as

myHeader

---

Hope that helps.

allan

There is one more option in addition of GregP's CSS suggestions - just set bJQueryUI to get the extra element in the header, and don't use a jQuery UI theme (you might want to set sDom to it's default for when bJQueryUI isn't true as well). Then you can style the inner elements as much as you want.

One more option also springs to mind (although perhaps less attractive) - add in the span elements yourself using HTML or Javascript and then style them as needed.

Allan

tj46

Thanks a lot for the comments. Very helpful. As noticed, my problems are likely due to my lack of experience with CSS :)

I've played with creating a generic 'th' class and then building on that. One thing I'm running into yet is that I want a background image in my 'th' class, and then the sort icons will overwrite that as they use a background image definition as well. Not sure how to get around that one, other than to turn on bJQueryUI as Allan suggested? I'm not familiar with howto add in span elements via HTML or Javascript?

FWIW, as an inexperienced CSS user.. it does seem like it would be simpler if there were icon classes defined for column sorting like there are for all the other styling details when bJQueryUI is off. Or at least a way to define them in oStdClasses.

GregP

Depending on expected browser support for your end-users, the latest up-and-coming version of CSS, CSS3, allows for multiple background images. But only the latest browsers will support this. If interested, do an online search for "CSS3 multiple background" and you should find a wealth of tutorials.

If you need to support older browsers, spans should work as you say. I wonder if the sTitle "column" parameter allows insertion of HTML? Certainly fnHeaderCallback would; I've used fnRowCallback in a similar way; my code snippet should be in one of my recent discussions, if you need me to dig it up!

Alternatively, it would be pretty simple to just add them in with a standard non-DataTables jQuery function. This would add a SPAN inside all headers:

[code]
$('th').wrapInner('')
[/code]

You can execute this from a number of different places. Perhaps the fnDrawCallback parameter? And then, assuming each of your TH has a unique id, you can then style those spans. So, given:

[code]







...etc
[/code]

Then your CSS would look something like this:

[code]
th { background-color: #FF0000} // whatever is common to all headers
th > span { display: block; padding-left: 20px} // whatever is common to all span children of headers

th#col_name > span { background: url('images/someNameIcon.png') no-repeat center left;
th#col_address > span { background: url('images/AddressIcon.png') no-repeat center left;
[/code]

(keeping in mind that the ">" child selector doesn't work in IE6 if you're still supporting IE6. I personally wouldn't.)

There are many ways to get the IE6 support, and many different approaches you could take to solve the problem. For that matter, the jQuery "adding a span" method isn't even the only way of modifying the DOM to suit your needs. Tonnes of different ways to do it. Heck, there's not even a good reason I used "span" other than you suggested it; it could as easily be a div and then you wouldn't need to set display:block because it's already done. ;-)

Hope that helps.

(side note: Allan, is there a parameter we can give the "code" shortcode? Something like "code lang='css'"?)

allan

@Greg - No I'm afraid not with the current setup of the forum - I think it just uses Javascript at the moment. But good idea - added to the list :-)

Allan

tj46

Thanks again for the help Greg and Allan. Very useful.