Overwrite column-sorting CSS

Overwrite column-sorting CSS

duncdunc Posts: 8Questions: 0Answers: 0
edited August 2012 in General
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?

Replies

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin
    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
  • duncdunc Posts: 8Questions: 0Answers: 0
    Lovely, thanks again.
  • duncdunc Posts: 8Questions: 0Answers: 0
    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?
  • cserfosscserfoss Posts: 11Questions: 0Answers: 0
    edited August 2012
    [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]
  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin
    @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
  • duncdunc Posts: 8Questions: 0Answers: 0
    @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.
  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin
    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
This discussion has been closed.