Question

I need to create a jQuery datatable, in which some rows might have gray background color – meaning that they are disactivated. A row can have gray background only if the column ‘status’ of the corresponding MySQL table is equal to 0.

Look at the below code. Column ’10’ is hidden. It contains status value. If it is 0, then the row should have different background color. But this does not work. No error message. Any ideas?

$(document).ready(function(){
              $('#newspaper-b').dataTable({
              "sPaginationType":"full_numbers",
              "aaSorting":[[4, "asc"]],
              "aoColumns": [null,null,null,null,null,null,null,null,null,null,
                            {"bSearchable": true, "bVisible": false},null,null],
              "bJQueryUI":true,
              'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    if(aData[10]=="0"){
                        nRow.className = "disactivatedRow";
                    }
                    return nRow;
                }
              });

CSS

.disactivatedRow td { 
    background-color:#ffbba9 !important;
    color: #e6e6fa;
}
#newspaper-b {
    border-collapse: collapse;
    border-color: #B7DDF2;
    border-style: solid;
    border-width: 1px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    margin: 0;
    text-align: left;
    width: 480px;
}
#newspaper-b th {
    background: none repeat scroll 0 0 #EBF4FB;
    border-color: lightgray;
    font-size: 11px;
    font-weight: bold;
    padding: 15px 10px 10px;
}
#newspaper-b tbody tr td {
    background: none repeat scroll 0 0 #FFFFFF;
}
#newspaper-b td {
    border-top: 1px dashed #FFFFFF;
    color: #000000;
    padding: 10px;
}
#newspaper-b tbody tr:hover td {
    background: none repeat scroll 0 0 #FFCF8B;
    color: #000000;
}
#newspaper-b tbody tr.selected td {
    background: none repeat scroll 0 0 #FFCF8B;
    color: #000000;
}

Answer 1

Row doesn’t have content hence background, td should be colored instead:

.disactivatedRow td { 
    background-color:#ffbba9 !important;
    color: #e6e6fa;
}

If still doesn’t solve I’d suggest you to console.log(aData[10]) outside of your if. For console.log to work use Chrome/Firefox, find console output via F12 and see what aData[10] contains, maybe you need aData[9] (programmers use to count from zero ;).