Sort images are hidden when using background image for cells

sydneyos

I have a table that was working fine w/DataTables, but when the css changed to use a background image for the headers, the sorting images no longer work. This must be a common scenario - is there a known workaround?

Here's the offending css:

.table-standard th{
...
background: #c3cfd5 url(Images/bkgd-table-header-blue.gif);
...
}

allan

The sorting images are provided by CSS background images - thus your image is overwriting this and putting in the header image you have. There are a number of options including simply applying your background image to the TR or THEAD element. Or combining the sorting icon with your background image, or you could use the jQuery UI option which will put the sorting icon in it's own span.

Allan

sydneyos

Thanks, Allan.

Yes, that was my assumption. Here is my dataTable initialization (I think I'm already using the jquery ui option here, but is there more to do?):

oTable = $("#Students").dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": true,
"bSearch": false,
"bStateSave": true,
"jQueryUI": true,
"aoColumns": [{ "bSortable": false }, null, { "bSortable": false }, null, null, null, { "bSortable": false}]
});

I tried moving the background image to the thead (below) but still no sort images:
.table-standard thead{
background: #c3cfd5 url(Images/bkgd-table-header-blue.gif);
}

I should note that clicking on the header does cause the sort to be applied, but there is no control over asc/desc - it just toggles the sort back and forth.

sydneyos

My bad - in trying to resolve the issue, I'd changed the css path to the images and didn't change them back, so your solution works perfectly - thanks and sorry for the time wasted.