Highlight selected rows when background color changed

lecleard

I added some code to change the background color of certain rows using the fnRowCallBack function. That works fine. However, the row selection highlights no longer work for the rows that have the changed background color. Need some help getting that to work in conjunction with my background color code. Here is my code used to change the row color:

var table = $('#cancel').DataTable( {
      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        if ( aData[1].startsWith("H")) {
          if ( aData[1].endsWith("VS")) {
            $(nRow).css('background-color', 'orange');
          }
          else if ( aData[1].endsWith("O")) {
            $(nRow).css('background-color', 'yellow');
          }
          else {
            $(nRow).css('background-color', 'pink');
          }
        }
        if ( aData[8].length > 0 ) {
          $(nRow).css('background-color', 'pink');
        }
      },
      .......
    });

kthorngren

I've noticed that with standard DT styling that the first column does not change background color:
<table id="example" class="display nowrap" width="100%">

When the row is selected the first column is highlighted as normal. Not sure this is what you want or if you are using something like bootstrap. If display is removed then the whole row background is changed and as you mentioned the highlight doesn't work.

Kevin

lecleard

I noticed that too Kevin. I put together a fiddle to hopefully better illustrate the issue I'm trying to resolve.

jsfiddle.net/lecleard/q3wtrn3r/

I would like to have the rows where the background color has been changed to highlight when selected just as the rows that have not been changed continue to do.

lecleard

I'm hoping someone out there has a suggestion. I tried an alternative which only changes the background color of a single cell. However, I still would like the row select highlight to supersede the background color I changed the cell to. Here is my fiddle example where just the cell background color is changed.

http://jsfiddle.net/lecleard/62zrL7p1/

neanderthil

I know this post is old but I recently ran into this problem. The solution is simple.
Go into datatables.css, find:

table.dataTable tbody tr.selected {
  background-color: #B0BED9;
}

Now add !important on the background-color tag so its:

table.dataTable tbody tr.selected {
  background-color: #B0BED9 !important;
}

This tells CSS to prioritize it.