How do I replace sorting arrows with custom image icons?

esabol

Hi. I'm trying to replace the arrows used for sorting with custom image icons, and I can't seem to figure out the CSS. My understanding is that DataTables 1.x used images for the arrows, but DataTables 2.x switched to Unicode characters. I've found lots of posts here and elsewhere that discuss how to tweak the CSS for the sorting arrows, but none of the examples I've found use image icons with DataTables 2.x.

I've tried to adapt the DataTables 2.x examples I've found, but it's not working. The problem is that I'm not seeing any image icons at all.

Has anyone has successfully done this with the latest DataTables 2.x?

I have four 15px-by-15px icons: up.gif, down.gif, up_sorted.gif, and down_sorted.gif. I want to use the "up" icons for ascending, and the "down" icons for descending. I've tried the following CSS:

/* Remove default content */
table.dataTable thead .dt-column-order:before,
table.dataTable thead .dt-column-order:after {
    content: "" !important;
}
 
/* Default light grey arrow when column is not sorted but hovered */
table.dataTable thead>tr>th.dt-orderable-asc:hover .dt-column-order:after,
table.dataTable thead>tr>th.dt-orderable-desc:hover .dt-column-order:after {
    background: url('/images/down.gif') no-repeat center right !important;
}
 
/* Show upward arrow when sorted ascending */
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after {
    background: url('/images/up.gif') no-repeat center right !important;
}
 
/* Show downward arrow when sorted descending */
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    background: url('/images/down.gif') no-repeat center right !important;
}

This doesn't even get the arrows correct when the column is sorted vs not sorted, but I just thought I'd try this as a proof-of-concept. But I'm not seeing the background-images at all.

Should I give up on using DataTables 2.x and switch to the last version of DataTables 1.x?

esabol

P.S. I tried using "background-image" instead of just "background" as well.

allan

You need to set a width and height for the ::after pseudo element:

table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url('/images/up.gif') no-repeat center right !important;
}

https://live.datatables.net/pizireha/1/edit - I've used a base64 image since there is no up / down arrow gif on that server .

The width for the default stylesheet is given by the character, but that doesn't exist here due to content: '', so the pseudo element takes up no space.

Should I give up on using DataTables 2.x and switch to the last version of DataTables 1.x?

What!? And give up on all the new goodies? . v1 is no longer supported would be the main reason not to switch back to it.

Allan