Overwrite column-sorting CSS

dunc

Hi again,

I'm using fnRowCallback to colour rows depending on the value of one field in each row.

[code]"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var sDirectionClass;

if ( aData[6].indexOf("img") > 0 ) {
sDirectionClass = "new";
if ( row % 2 !== 0 )
sDirectionClass = "new_odd";
} else {
sDirectionClass = "std";
}[/code]

This works successfully - the entire row will be orange - apart from the column which the data is currently being sorted by. That will remain blue (or possibly a slightly darker shade of blue to the rest of the row?).

I'm sure this is just something to do with the CSS classes, but I can't appear to find the classes that affect this sorting facility.

Could anyone enlighten me?

allan

That will be these classes:

[code]

tr.odd td.sorting_1 {
background-color: #D3D6FF;
}

tr.odd td.sorting_2 {
background-color: #DADCFF;
}

tr.odd td.sorting_3 {
background-color: #E0E2FF;
}
[/code]

and their `even` friends.

Those classes are used to highlight which row is being sorted - you could just remove the classes if you don't want that.

Allan

dunc

Lovely, thanks again.

dunc

Apologies, no it hasn't worked!

Removing those rows appears to work provisionally (i.e. there's no highlighting on the default sorting column), but once I've clicked to sort a column, the highlight-background appears for that column.

I'm using jQuery UI and [code]@import "css/smoothness/jquery-ui-1.8.22.custom.css"[/code]. Could it be something to do with that?

cserfoss

[Ed Note: I just noticed that @dunc is referring to columns, not rows. I don't see a "delete post" option so mea culpa -- I'll read more carefully moving forward. ]

Perhaps your using the "row_selected" class somewhere? It's defined in demo_table_jui.css:

[code]
table.display tr.even.row_selected td {
background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
background-color: #9FAFD1;
}
[/code]

allan

@dunc - Can you give us a link please - that will make it much easier and quicker to debug, rather than guessing what is happening.

Allan

dunc

@Allan I'm struggling to give you a working example, because I'm using the default dataTables.css file and I've simply deleted the classes you suggested.

I've tried to replicate it using "background-color: none !important;" as found here: http://live.datatables.net/exorec/4/edit#source

You can see that even when you sort the columns by clicking on their header titles, it produces slightly darker rows on that column.

allan

Thanks for the example - although it looks to me that all the columns are white background in that example. There isn't much styling on the table, and Photoshop's colour picker says it is just white backgrounds.

I'd suggest using Firebug / Inspector to find out where the styles you don't want are coming from and remove them.

Allan