Removing the need for images

thugsb

It seems to me that DataTables could be made a lot sleeker if the need for images were removed. This is actually very easy to accomplish by removing the 11 lines of code from the CSS that set the background to the images (in v1.9.4 remove lines 127-133 and 197-202), and replacing it with the following:

[code]
.sorting,
.sorting_asc,
.sorting_desc,
.sorting_asc_disabled,
.sorting_desc_disabled,
.paginate_enabled_previous,
.paginate_enabled_previous:hover,
.paginate_disabled_previous,
.paginate_enabled_next,
.paginate_enabled_next:hover,
.paginate_disabled_next {position:relative; background:none;}

.sorting:after,
.sorting_asc:after,
.sorting_desc:after,
.sorting_asc_disabled:after,
.sorting_desc_disabled:after,
.paginate_enabled_previous:after,
.paginate_disabled_previous:after,
.paginate_enabled_next:after,
.paginate_disabled_next:after {position:absolute; right:2px; top:5px; color:#7a80dd; }

.sorting:after {content:"◊";}
.sorting_asc:after, .sorting_asc_disabled:after {content:"▲";}
.sorting_desc:after, .sorting_desc_disabled:after {content:"▼";}
.sorting_asc_disabled:after, .sorting_desc_disabled:after {color:#999;}

.paginate_enabled_previous:after, .paginate_disabled_previous:after {content:"◄"; right:auto; left:2px; top:0;}
.paginate_enabled_next:after, .paginate_disabled_next:after {content:"►"; top:0;}
.paginate_disabled_previous:after, .paginate_disabled_next:after {color:#999;}

.paginate_enabled_previous:hover:after, .paginate_enabled_next:hover:after {color:#535ce0;}
[/code]

Obviously the specific colours could be adjusted, as well as the positioning.

allan

Like it a lot! A really lot.

I've opened an issue on github to implement this in DataTables in future: https://github.com/DataTables/DataTables/issues/244 .

It won't make it into 1.10 as I intend to retain compatibility with old versions of IE for this release, but that will no longer be the case with 1.11, which will not actively support IE6/7. caniuse tells me that your method will work in IE8 plus, which is fine with me :-)

Allan

MikeS

I like this idea too. I tried to substitute the equivalent lines in the demo_table.css to run the demos, but, I can only see question marks instead of "arrow heads". What am I doing wrong?

allan

Did you save the file as UTF8 and does the font you are using on the DataTable page have those characters available?

Allan

MikeS

Well I believe that your second question is where my issue lies. I can see the "arrow heads" in the OPs message so I figured that if I look at the source of this page, I'd see what font-family is being used. I can't find it and I'm assuming that it is buried somewhere in the CSS files.

allan

Use "Inspect element" in your browser's dev tools. It should show you.

Allan

ellipsis

You could also use the fontawesome code.
At the moment I can't give a real example, but we use font awesome together with datatables and it works great.

Ok it requires you to implement the fontawesome font (or complete CSS etc.) But it gives you much more options (color, size, rotate).

More info http://davidwalsh.name/font-awesome-tags

netaisllc

This is a reasonable approach for Datatables, but be aware of browser compat issues. :After and :before have pretty good support, but as always "it depends".
A different vector would be to use Data URIs in the plugin's CSS file to achieve the same result on the "weight" of the plugin.

allan

Agreed, and data:// also has compatibility issues with older browsers. However it is done, I'll provide an option for older browsers to still work - they will likely need to load an additional file. When I get around to this of course... Plenty to do before then :-)

Allan