changing row color at rendering time based on column values

michael@hockstein.org

is there and example of how to change the background color of an entire row, at the time of initial rendering, based on the initial values of the data in a row's columns?

kthorngren

Use createdRow for this. There is an example in the docs and a running example.

Kevin

michael@hockstein.org

OK. I started with something simple as a test. This is buried in the body starting with $('#example').DataTable({...

"createdRow": function (row, data, index) {
  $(row).css("background-color", "red");
}

This was supposed to change every column of every row red. However, it changes every column red on every row except the first column!

Once I figure this out I can use the data for some logic. It's probably a jQuery mistake. Any suggestions?

kthorngren

See if this thread helps.

Kevin

michael@hockstein.org

No doubt I'm moving forward. But still failing.

I added the following styles:

table#example.dataTable tbody tr.Highlight > .sorting_1 {
background-color: rgb(245, 10, 10);
}

table#example.dataTable tbody tr.Highlight {
background-color: rgb(245, 10, 10);
}

Unfortunately, even with the .addClass commented out (see below), the rows are now always red. Sort of odd as the style should only be invoked if there element has the Highlight class (which I never assigned). Interesting, if you change the style name from Highlight to myStyle, the color is not assigned suggesting that deep in the DataTable code the class Highlight is being assigned. Unfortunately, even with a name reassignment to the style, the addClass doesn't change the color.

"createdRow": function (row, data, dataIndex, cells) {
 // $(row).addClass("Highlight");
}

kthorngren

Unfortunately, even with a name reassignment to the style, the addClass doesn't change the color.

Could be that you are using a styling framework and the CSS selectors might be something different. You can use Inspect to see what is being used. Or you can update the example or create your own or post a link to your page so we can take a look to help with suggestions.

Kevin

michael@hockstein.org

The class of the table:

<

table id='example' class='design' style='width: 50%;'>

If you remove class='design' then the classes I created and the addClass function work. Unfortunately you lose the rest of the basic style like every other row highlighting and row dividers

kthorngren

I haven't seen the class design before with Datatables. Where does it come from? Is it for a styling framework?

Kevin

michael@hockstein.org

Sorry, display. Typing fast

kthorngren

There must be something else as the example in the other thread has display. Without a link to your page or a test case showing the issue it will be hard to offer suggestions.

Did you use the browser's Inspect (right click on the row > Inspect) to see what is being applied and/or overridden?

Kevin

michael@hockstein.org

I did. You can see the styles applied all the way down to tr.odd and tr.even at the very inside of the table.

No worries. One day I'll figure it out. Thanks for all your help.

michael@hockstein.org

A new day and a new way.

Honestly, I can't tell what's different but it works like it the example. Thanks for your help

Alexandr45

I did it using rowCallback. When adding the class, I specified background-color: #6BFFB5 !important; and everything works.

rowCallback: function ( row, data, cell ) {
// Set the checked state of the checkbox in the table
$('input.editor-set_h', row).prop( 'checked', data.kontragent.set_h == 1 );
if(data.kontragent.set_h == 1){
$(row).addClass('non');
} else {
$(row).removeClass('non');
}
$('input.editor-block', row).prop( 'checked', data.kontragent.block == 1 );
if(data.kontragent.block == 1){
$(row).addClass('block');
} else {
$(row).removeClass('block');
}
}

rf1234

I am also using rowCallback for these purposes - and it always works. Just adapted the example to use it: http://live.datatables.net/jowoxuhu/1/edit

https://datatables.net/reference/option/rowCallback

And another, more complex example from my own coding to highlight how to use "data" and "row"

rowCallback: function (row, data) {
    if ( data.cashflow.manual > 0 || data.cashflow.additional_repayment > 0 ) {
        $(row).addClass('fontThick');
    }
    //if it is not the summation row the row should be selectable
    if ( data.cashflow.position !== 'L' ) {
        $(row).addClass('selectRow');
    }
     //for inline editing of the repayment amount we don't want to allow this
    //in the first and in the last row and not in records that are only accrual records = is_pseudo_cf
    if ( data.cashflow.position    !== 'L' && data.cashflow.position !== 'A'
                                           && data.cashflow.is_pseudo_cf < 1  ) {
        if ( data.cashflow.additional_repayment < 1 && instrument !== 'Y' ) {
            $(row).addClass('inlineRepaymentInterest');
        }
    }
    if (data.implausibleRepayment > 0) {
       implausibleRepayment = true;
    }
}