Replies

• fbas Posts: 1,094Questions: 4Answers: 0

  July 2013

  You are succeeding at changing the rows with your background-color: blue, but the sorted columns apply a class to the cell (sorting_1) that overrides the background-color
  
  in http://live.datatables.net/media/css/demo_table.css
  [code]
  tr.odd.gradeA td.sorting_1 {
  background-color: #c4ffc4;
  }
  [/code]
  
  What you should do is use the row selected class used in this example and you can change the css colors for the selected row (including when in combination of the sorting_1 column class, if you want)
  
  http://datatables.net/examples/api/select_single_row.html
  
  [code]
  table.display tr.even.row_selected td {
  background-color: #B0BED9;
  }
  
  table.display tr.odd.row_selected td {
  background-color: #9FAFD1;
  }
  [/code]
  
  this example adds class "row_selected" to the row.
  
  the style definition is in demo_table.css line 355. You could override this class definition to change to the color you would prefer.
  
  note: this example relies on some javascript to detect the click on row and to apply the class.
  
  [code]
  /* Add a click handler to the rows - this could be used as a callback */
  $("#example tbody").click(function(event) {
  $(oTable.fnSettings().aoData).each(function (){
  $(this.nTr).removeClass('row_selected');
  });
  $(event.target.parentNode).addClass('row_selected');
  });
  [/code]