Sorting a Column Loses Background Color Formatting
Sorting a Column Loses Background Color Formatting
zuckerj
Posts: 17Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
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;
}
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.
[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!
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.
It should give you an idea of what is happening.
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]
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.
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.
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.
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!