How to set css or background color of row on hover

Honeydew

I am trying to add the style on table row hover but it is not applied. Please suggest what is wrong with this code:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />   
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="tblEmployee" class="display" style="width:100%"></table>

function BuildDatatable()
        {
            $.ajax({
                type: "POST",
                url: "Handlers/DatatableHandler.ashx",
                data: {operationType: 'Columns' },
                success: function (data) {
                    result = JSON.parse(data);                   
                    $('#tblEmployee').DataTable({
                        processing: true,
                        serverSide: true,
                        responsive: true,
                        searching: false,
                        lengthChange: false,                      
                        order: [[defaultSortColumnIndex, 'desc']],
                        pageLength: 10,
                        ajax: {
                            "url": "Handlers/DatatableHandler.ashx",
                            "postData": { operationType: 'edata' },
                            "type": "POST",
                            "datatype": "json"
                        },

                        columns: result,
                        columnDefs: [
                            {
                                targets: 0,
                                render: function (data, type, row) {
                                    if (type === 'display') {
                                        return '<input type="checkbox" class="editor-active">';
                                    }
                                    return data;
                                }
                            }
                        ]

                    });
                }              
            });
}

This above code works fine but when I write this:

$(document).ready(function() {
    var table = $('#tblEmployee').DataTable();
 
    $('#tblEmployee tbody').on( 'hover', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );

});

The table does not render and it shows error 'Cannot read property 'aDataSort' of undefined'. Please note that I already have on click and on double click events also.

I want to add the css or background color of the row on hover, please advise.

Honeydew

I did it this way :

 #tblEmployee tbody tr.even:hover {
        background-color: cadetblue;
        cursor: pointer;
    }

    #tblEmployee tr.even:hover td.sorting_1 {
        background-color: cadetblue;
        cursor: pointer;
    } 

Is there any other way to set the css class?

kthorngren

I've used this:

table#example.dataTable tbody tr:hover {
  background-color: #ffa;
}

table#example.dataTable tbody tr:hover > .sorting_1 {
  background-color: #ffa;
}

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

Kevin

Honeydew

Thanks Kevin, this works! Just wondering for column header also do I need to add the css the same way?

kthorngren

Something like this maybe?

table#example.dataTable thead:hover {
  background-color: #ffa;
}

Kevin

Honeydew

No it does not change anything

kthorngren

It does work here:
http://live.datatables.net/nofepexe/1/edit

Not saying that option will work in all environments. You could start by using your browser's inspection tool to see if there is a style overriding what you put in place. Without being able to see the page it would be hard to say.

Kevin

arturomag

I know this is an old thread but the real fix is this one:

table#example.display tbody tr:nth-child(even):hover td{
background-color: #ffa !important;
}

table#example.display tbody tr:nth-child(odd):hover td {
background-color: #ffa !important;
}

http://live.datatables.net/nofepexe/72/edit

it works also if you colorize the rows in a previous step.

robbM

With bootstrap4 this works well for me:

<style>
.dtSelected {
    background-color: rgba(8,158,96,0.11);
}   
</style>

var t1 = $('#yourtableid').DataTable( {
   ...
});
    
t1.on('click', 'tr', function(){
    $(document).find('tr').removeClass("dtSelected");
    $(t1.row(this).selector.rows).addClass("dtSelected");
});