Issue styling column headers with sScrollX (with test cases)

Occ

Hey guys, I've been playing with this cool plugin recently and am having trouble styling the column headers. I'm fairly new at this so please forgive me if I'm missing something obvious. Here's what I've currently got:
http://live.datatables.net/ogowuc/4

This is basically what I'm aiming for, but you'll notice for the headers, there are two sets of the * character. I am trying to put a symbol in there for the sorting icons. In my project I am using Font Awesome, so I'm attempting to go that route instead of an image. Looking at the html in firebug, it seems when I add the sScrollX option, datatables adds a new row of headers with the sorting css classes for some reason. In the code I've made a comment above the three classes that are getting doubled (.sorting, .sorting_asc, .sorting_desc).

If I take the scrolling option out, it looks fine:
http://live.datatables.net/ogowuc/5

But is obviously missing the scrolling functionality. Any suggestions?

Occ

Anyone?

allan

Because of the way DataTables has to split the table into two `table` elements when scrolling is enabled, you need to make your selectors a little bit more 'selective'. In this case, to just add the extra content style to the header element: http://live.datatables.net/ogowuc/6/edit

Nice idea using `content` for this. I've got a bug for FontAwesome integration, and I'm not yet quite sure how to best do it ( https://github.com/DataTables/DataTables/issues/165 ). `content` is an interesting option.

Allan

Occ

Awesome! Thank you sir, I see my lack of CSS skills betrayed me. Full disclosure, this is where I stole the content idea from: http://astronautweb.co/snippet/font-awesome/

ericlat

I ran across this looking for a solution to using font-awesome icons for DataTables sort. I hope this adds to the conversation and maybe helps someone else.

A list of Font-Awesome's unicodes can be found here http://fortawesome.github.io/Font-Awesome/cheatsheet/

My CSS to override DataTable's sorts look like this:


[code]
/* Sorting */
table.optimum-table thead th.sorting_asc:after
{
font-family: fontawesome;
content: "\f0de";
float: right;
}

table.optimum-table thead th.sorting_desc:after
{
font-family: fontawesome;
content: "\f0dd";
float: right;
}

table.optimum-table thead th.sorting:after
{
font-family: fontawesome;
content: "\f0dc";
float: right;
color: rgba(50, 50, 50, .5);
}
[/code]

drmcclelland

@ericlat - I applied your CSS (using table.dataTable instead of table.optimum-table), and I do indeed see Font Awesome's up/down icons in the headers, but this doesn't seem to actually override the DataTable's sorting arrows. I still see the DataTable's up/down icons as well as the Font Awesome up/down icons - is there something else you had to do to make those disappear?

I was attempting to run the examples by allan and Occ, but I get an error saying "DataTables live test page is currently offline."

I see that this may ultimately be addressed by a commit (https://github.com/DataTables/DataTables/commit/01444af) for a new feature called "Header renderers" made a few months ago that is to be included in v1.10 (I think), but I don't know when that will be released.

allan

> I was attempting to run the examples by allan and Occ, but I get an error saying "DataTables live test page is currently offline."

Some bu**er has been abusing the live site - see: http://datatables.net/forums/discussion/18355/site-downtime-20th-november-2013 .

1.10 will hopefully be out for beta in about two weeks time. I'm working on updating the site and documentation for it now. The software itself is ready to roll.

Allan