Selection indicator on specially highlighted lines

galcott

I use the following code and CSS to highlight lines in a different color based on the value of certain fields. However, I am using the Select plugin and when these lines are selected the background color doesn't change to the gray selected color, but remains as is. So there's no visual indicator that they're selected. Is there a fix for this?

createdRow: function( row, data, dataIndex ) {
    if ( Number(data[3]) < Number(data[4]) ) {     // Low inventory indicator
        $(row).addClass('low_inv');
    }
},

CSS:

.low_inv {
    background-color: #ffff33 !important;
}

bindrid

!important will get you in trouble every time. Use it sparingly.

The way I do it is load up the page then use dom explore in the console to see what classes are being applied. Then I write my css to work with those css styles.
Below, I took there classes and added .older_generation, .middle_generation, and .young_generation ending up with what is shown below.

It is more complicated but it is better behaved.

http://live.datatables.net/tekikihe/1/edit

/* for unselected rows */
table.dataTable.stripe tbody tr.odd.older_generation, 
table.dataTable.display tbody tr.odd.older_generation,
table.dataTable tbody tr.older_generation{background-color:#F781F3 }

table.dataTable.stripe tbody tr.odd.middle_generation, 
table.dataTable.display tbody tr.odd.middle_generation,
table.dataTable tbody tr.middle_generation{background-color:#A9F5E1 }

table.dataTable.stripe tbody tr.odd.young_generation, 
table.dataTable.display tbody tr.odd.young_generation,
table.dataTable tbody tr.young_generation{background-color:#81BEF7 }


/* For selected rows */
table.dataTable.stripe tbody tr.odd.older_generation.selected, 
table.dataTable.display tbody tr.odd.older_generation.selected,
table.dataTable tbody tr.older_generation.selected{background-color:#a2aec7 }

table.dataTable.stripe tbody tr.odd.middle_generation.selected, 
table.dataTable.display tbody tr.odd.middle_generation.selected,
table.dataTable tbody tr.middle_generation.selected{background-color:#a2aec7 }

table.dataTable.stripe tbody tr.odd.young_generation.selected, 
table.dataTable.display tbody tr.odd.young_generation.selected,
table.dataTable tbody tr.young_generation.selected{background-color:#a2aec7 }

galcott

If I don't use !important then the highlighting doesn't happen at all.

I'll try your solution but it does seem unnecessarily complicated.

bindrid

If you want to stick with !important, do this (assuming #a2aec7 is your selected row color)

.low_inv {
    background-color: #ffff33 !important;
}

.low_inv.selected {
    background-color: :#a2aec7 !important;
}

galcott

That worked after I fixed your typo (the extra colon in front of the color code). A much simpler solution! Thanks.