Sorting a Column Loses Background Color Formatting

Sorting a Column Loses Background Color Formatting

zuckerjzuckerj Posts: 17Questions: 0Answers: 0
edited September 2012 in DataTables 1.9
I have a table that displays conditional background color formatting dependent on the content of the cell.

This works fine when the table is first displayed.

I'm having an issue where background color formatting is being lost when a user clicks on the column for sorting.

If the user clicks on another column for sorting the color formatting returns.

I saw another post on this subject, but no one responded, and the thread was eventually closed.

http://datatables.net/forums/discussion/7296/sorting-a-column-with-bgcolor-loses-the-bgcolor-markup/p1

Is there anyone out there with a solution?

Joel Z.

Replies

  • zuckerjzuckerj Posts: 17Questions: 0Answers: 0
    Guess not.
  • RAWRmeepRAWRmeep Posts: 1Questions: 0Answers: 0
    Hi zuckerj. Was running into the same problem. Found this:

    http://datatables.net/forums/discussion/5246/sort-images-are-hidden-when-using-background-image-for-cells/p1

    Using the thead worked for me.

    Alternatively, if you are just worried about a background color being overwritten, you can add the color before the image in the css:

    .sorting_desc {
    background: #EBEBEB url('../images/sort_desc.png') no-repeat center right;
    }
  • zuckerjzuckerj Posts: 17Questions: 0Answers: 0
    RAWRmeep, thanks for the response!

    My issue isn't regarding the Header row. My issue is with conditional background coloring for a specific column of data. In short, I have an accuracy column. If the accuracy for a row of data is correct, the background for for the accuracy column is green, if not it is red.

    Everything works great until someone clicks on the Accuracy column for sorting. The color formatting disappears and is replaced by a shading. Doh! And as I write this I realize it is simply the shading being applied by the dataTables CSS. Just need to go hunt that CSS and remove the shading.

    Unfortunately, I am only going to not want that shading for the one column. WIll need to figure out how to make that conditional. Without hunting through the dataTables code, not sure how I'm going to make that fly.

    Brain get clicking.
  • jefffan24jefffan24 Posts: 18Questions: 0Answers: 0
    If you find the class that is adding the CSS and put this after it:

    [code]
    .shadingCSSClass .classForRowYouDontWantChange {
    background: whatColorYouWant
    }
    [/code]

    Notice the spacing between the two classes? That means that for that code to work the element has to have both of them. When he adds the shading, it is adding the class on top of yours. By putting it after the normal .shadingCSSClass it will override it only when the element meets both requirements.

    Hope this helps!
  • zuckerjzuckerj Posts: 17Questions: 0Answers: 0
    First, thank you Jeffan24. Great suggestion. When I read it I thought, yes, of course.

    But tried it and it does not seem to work.

    I remove these classes and my color formatting remains, but I don't get any shading at all. I do as you suggested and it works the way it did before where I get shading, but the color formatting disappears when I select that specific column for sorting.

    Perhaps dataTables does not maintain all the class designations when a column is selected? Not sure yet. Going back to re-evaluate code to see if I'm making some mistake.
  • jefffan24jefffan24 Posts: 18Questions: 0Answers: 0
    Its possible, if your in chrome/firebug and do an element view, find the row/element that is getting changed (but make sure it isn't changed yet!). Make sure your able to see it and then do what ever is breaking it and watch what classes come and go. Make sure yours are staying, and datatables are being removed.

    It should give you an idea of what is happening.
  • zuckerjzuckerj Posts: 17Questions: 0Answers: 0
    Ok, well, it isn't removing any style info.

    td tag before:
    [code]
    Incorrect
    [/code]

    td tag after:
    [code]
    Incorrect
    [/code]

    So that's not the issue.

    The css look like this:

    CSS before modification that gives shading and removes color
    [code]
    tr.odd td.sorting_1
    {
    background-color: #D3D6FF;
    }
    [/code]

    CSS after I modify
    [code]
    tr.odd td.sorting_1 {
    background-color: #D3D6FF;
    }

    tr.odd td.sorting_1 td.accuracyData0
    {
    background-color: red;
    }

    tr.odd td.sorting_1 td.accuracyData1
    {
    background-color: green;
    }
    [/code]
  • zuckerjzuckerj Posts: 17Questions: 0Answers: 0
    Just to be clear. This is an issue ONLY when the accuracy column is currently selected as the sort column. As soon as I select another column for sorting, everything is back to working order.

    In the Chrome "Inspect Element" view I see, as I illustrated above, it adds "sorting_1" to the style tag. This matches the CSS in the dataTables themeroller css file that I'm using. But what I don't understand, at this point, is that if I add the lines, as Jeffan24 illustrated to me above, and as I have illustrated that I have done, above, why is it still only matching the "td.odd" and "td.sorting_1"? I see this in the inspector. Hmmm... Any ideas appreciated. I'm just testing and experimenting away.
  • jefffan24jefffan24 Posts: 18Questions: 0Answers: 0
    One more thing you can try is putting it at the bottom of the CSS file rather than after the initial rule. In case he has more code doing something else. If this does work it means javascript is doing something funky.

    The only other thing I can think of to try is background-color: red !important;

    I try not to do that often, but it should override his rules as long as the class stays.
  • zuckerjzuckerj Posts: 17Questions: 0Answers: 0
    Ok. Figured things out. But not 100% sure I understand why it works, and my previous setup didn't work.

    First thing is I made sure my css file with the color formatting is loaded AFTER the dataTables's CSS. This I understand (I think).

    Next, I had to change the CSS specification for my ACCURACY classes as follows:

    Before:
    [code]
    .accuracyData1
    {
    text-align: center;
    background-color: green;
    width: 110px;
    }

    .accuracyData0
    {
    text-align: center;
    background-color: red;
    width: 110px;
    }
    [/code]

    After:
    [code]
    table.display td.accuracyData1
    {
    text-align: center;
    background-color: green;
    width: 110px;
    }

    table.display td.accuracyData0
    {
    text-align: center;
    background-color: red;
    width: 110px;
    }
    [/code]

    For some reason this works, but the "before" doesn't. I'm not sure I understand why as I though being more general should work unless something more specific overrides it. As I type this, I'm thinking, perhaps the "td.sorting_1" definition overrode my less specific ".accuracyData0" definition.

    Hmm...

    Anyway, I then decided that I wanted some type of shading on the colors when that column was selected so I added the following:
    [code]
    table.display td.accuracyData1.sorting_1
    {
    background-color: seagreen;
    }

    table.display td.accuracyData0.sorting_1
    {
    background-color: crimson;
    }
    [/code]

    Jeffan24, thanks for all your help! Very appreciated. You gave me the motivation to try and tackle this again.

    Jz.
  • zuckerjzuckerj Posts: 17Questions: 0Answers: 0
    Oh, and sorry for the missing "f" jefffan24.
  • jefffan24jefffan24 Posts: 18Questions: 0Answers: 0
    No problem, glad you got it figured out! It was for sure a weird one.
  • carlsanderscarlsanders Posts: 1Questions: 0Answers: 0
    Just in case you're interested zuckerj, the reason your 'before' doesn't work but your 'after' does is because the browser will use the most specific CSS rule matching the element.

    In the first case the most specific rule was the one in the datatables CSS file, but when you more specifically defined the CSS selectors e.g. 'table.display td.accuracyData0', yours took precedence.

    BTW, this thread helped me to fix exactly the same problem so thanks guys!
This discussion has been closed.