Styling cell when its column is used in sorting

NoBullMan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I am trying to conditionally style a couple of cells and for most part it works fine but there was one cell that would not play nice.
When I inspected the element in Chrome, I noticed its class, in addition to my custom class, had "sorting_2" class. When I removed it, then style was applied. This is how it showed in Chrome

<td class="duplicateBincode sorting_2">86160</td>

This is how I am styling the cells/rows:

tblOpenBins = $("#openBinsTable").DataTable({
    jQueryUI: true,
    data: [],
    order: [[3, 'asc'], [1, 'asc'], [10, 'desc']],
    ...
    rowCallback: function (row, data, index) {
        ...
        ...
        if (data.BINCODE_COUNT > 1) {
            $('td:eq(1)', row).removeClass('alertRow').addClass('duplicateBincode'); // This row is used in sorting
            $('td:eq(2)', row).removeClass('alertRow').addClass('duplicateBincode'); // This is fine
        }
    },
    ...
});

I also tried unsuccessfully to style this in columnDefs as:

{
    targets: [1,2],
    createdCell: function (td, cellData, rowData, row, col) {
        if (rowData[22] > 1) {  // This is where BINCODE_COUNT is
            $(td).removeClass('alertRow').addClass('duplicateBincode');
        }
    }
}

As I mentioned, when sorting class is removed it works fine.

allan

If you could link to a test case showing the issue, I can take a look at it.

Allan

kthorngren

It might depend on what selector your CSS is using. This example works regardless of whether sorting is applied to the column or not.
https://live.datatables.net/cayajoho/1/edit

The sorting_x classes are applied to the sorted columns. The behavior might be different if using a styling framework. Its possible the order-column class might be intereferring. See the default table styling classes for more info.

If you still need help please post a link to your page or a test case showing the problem so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

NoBullMan

Thanks Allan. It is a corporate app, no outside access. I will try to create a sample page to show the issue.

NoBullMan

The only way I could fix this issue quickly was to add "!important" to "td.duplicateBincodes" class's background style.

td.duplicateBincode{
    background-color: gold !important;
    color:black;
}

I see in Chrome, when I inspect the problem cell, that the background color is crossed out; not sure what is overwriting it.

allan

If you scroll down the styles, it will probably show a selector which is more specific and thus overriding it.

If you'd like us to take a look, we would indeed need a test case showing it please. Good to hear you've got a workaround though.

Allan