How to set css or background color of row on hover

Honeydew · November 2018

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 · November 2018

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 · November 2018

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 · November 2018

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

kthorngren · November 2018

Something like this maybe?

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

Kevin

Honeydew · November 2018

No it does not change anything

kthorngren · November 2018

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 · April 2019

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 · April 2020

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");
});

How to set css or background color of row on hover

How to set css or background color of row on hover

Answers

Howdy, Stranger!

Categories

DataTables

How to set css or background color of row on hover

How to set css or background color of row on hover

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables