datatables selected row background color

Question

I'm a newbie so bear with me; I'm using jQuery datatables plugin and I need to select a row and change the color of the selcted row. I followed this example from datatables but it doesn't work for me.

This is how i initialize the table:

var oTable = $("#rolesTable").dataTable({
    // "bJQueryUI": true,
    "iDisplayLength": 25,
    "aoColumns": [
        null,
        {"sType": "role"},
        null,
        null
    ],
    "aaSorting": [[1, "desc"], [0, "asc"]]
});

and this is the code for the click event and the CSS class:

<style>
.row_selected tr {
    background-color: black;
}
</style>

$("#rolesTable tbody tr").click(function (event) {
    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass('row_selected');
    });
    $(event.target.parentNode).addClass('row_selected');
});

Sorry, I added the click handler

Answer 1

It's because class row_selected is added to <tr> element, so your selector doesn't match anything.

Moreover, background-color is added to <td> elements (your custom color is 'under' default selected color).

Try :

.row_selected td {
    background-color: black !important; /* Add !important to make sure override datables base styles */
 }

Answer 2

In the latest Datatables version 1.10.12 you have to do something like this:

 .even.selected td {
           background-color: rgb(0,170,0); !important; /* Add !important to make sure override datables base styles */
  }

 .odd.selected td {
          background-color: rgb(0,0,230); !important; /* Add !important to make sure override datables base styles */
   }