hover background color with checkboxes

run4ever · January 2025

Hi,

I want to change the background color of the selected table row with my custom color ,
this is the style css that i've applied without obtain any result:

**table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > * {
box-shadow: inset 0 0 0 9999px #e32d2d !important;
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important;
}
**

this is the code of the table:

table = $('#tb_searchresults').DataTable({
"ajax": {
"url": ApplicationParams.searchDatiDestinatari,
"type": "POST",
"dataSrc": "",
dataType: 'json',
"data": { 'filtroRicerca': filtroRicerca }
},

columnDefs: [
    {
        render: DataTable.render.select(),
        targets: 0
    }
],
select: {
    style: 'os',
    selector: 'td:first-child'
},
"columns": [

    {
        data: Math.random() * 10000,
        defaultContent: "",                    
        orderable: false,
        targets: 0
    },
    {
        "render": function (data, type, full, meta) {
            return full.ragioneSociale;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.regione;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.provincia;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.brandVeicolo;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.modelloVeicolo;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.dataImmatricolazione != null ? new Date(full.dataImmatricolazione).toLocaleDateString() : null;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.dataUltimaRevisione != null ? new Date(full.dataUltimaRevisione).toLocaleDateString() : null;
        }
    }
],
layout: {
    topEnd: 'buttons',
    topStart: 'search'
},
"dom": '<"pull-left"l><"pull-right"B>rt<"bottom"ip>',

"buttons": [
    {
        "extend": 'copy',
        "text" : 'copia',
        "title": "Gestione campagne - Dati destinatari",
        "exportOptions": {
            "columns": [1, 2, 3, 4, 5, 6, 7],
            modifier: { search: 'none', selected: false }
        }
    },
    {
        "extend": 'excel', 
        'text' : 'Excel (senza esclusioni)',
        "title": "Elenco destinatari campagna (no esclusioni)",
        "exportOptions": {
            "columns": [1, 2, 3, 4, 5, 6, 7],
             modifier: { search: 'none', selected: false }
        }
    },
    {
        "extend": 'pdf',
        'text': 'Pdf (senza esclusioni)',
        "orientation": "landscape",
        "title": "Gestione campagne - Dati destinatari (no esclusioni)",
        "exportOptions": {
            "columns": [1, 2, 3, 4, 5, 6, 7],
            modifier: { search: 'none', selected: false }
        }
    }
],
"language": {
    "sEmptyTable": "Nessun dato presente nella tabella",
    "sInfo": "Vista da _START_ a _END_ di _TOTAL_ elementi",
    "sInfoEmpty": "Vista da 0 a 0 di 0 elementi",
    "sInfoFiltered": "(filtrati da _MAX_ elementi totali)",
    "sInfoThousands": ",",
    "sLoadingRecords": "Caricamento...",
    "sProcessing": "Elaborazione...",
    "sSearch": "Cerca:",
    "oPaginate": {
        "sFirst": "Inizio",
        "sPrevious": "Precedente",
        "sNext": "Successiva",
        "sLast": "Fine"
    },
    "lengthMenu": "Visualizza _MENU_ elementi",
    select: {
        rows: {
            _: '%d clienti selezionati da escludere ',
            0: 'Seleziona una o più righe per escludere i clienti dalla campagna',
            1: 'Un cliente selezionato da escludere'
        }
    }
},
"order": [[1, "asc"]],

"destroy": true,
"lengthChange": true,
"sSearch": "Cerca:",
"lengthMenu": [[5, 10, 20, 50, -1], [5, 10, 20, 50, "Tutti"]],
"iDisplayLength": 10

});

i've read a lot of similar questions but i am very frustrating that i can solve it.

Thanks a lot!

allan · January 2025

Use the CSS variable:

:root {
  --dt-row-selected: 255, 0, 0;
}

https://live.datatables.net/jajumapu/1/edit

The format is the same as for rgb().

Allan

run4ever · January 2025

it works! thanks a lot!

Guiraute · September 7

Hi,
I would like to know if it is possible to attribute the background color to a cell with the color's value contained in the cell (ex#ff0000 gives a red cell ).

Thanks

allan · September 7

If I've understood correctly, createdCell is going to be your friend here. With it you can modify the cell background.

I've put a little example together for your here: https://live.datatables.net/dihijaxa/1/edit .

Let me know if that matches what you need.

Allan

Guiraute · September 7

Thank's Allan, it works fine in DataTables.
Now, do you think that it is possible to activate a colorPiker in editor, to modify the color. I tried in the DataTable with something like that :
render: function (data, type) {
data, type
if (type === 'display') {
return ('<input type="color" value="${number}" id="color-picker">');
}
return data;
}

allan · September 7

Yes, that is possible with a custom field type plug-in for Editor.

I've bashed a little example together here here: https://live.datatables.net/dihijaxa/2/edit . It is rough around the edges - for example the row selection overrules the background colour, and the colour picker styling could probably be integrated better, but it is a starting point for you to work on .

I've used Javascript Color Picker for the picker. You might wish to use another if you already have one on your site.

Allan

Guiraute · September 7

Thank you very much Allan, your solution is enough for me for the moment. I answers perfectly at my question.
BR,
Francis

hover background color with checkboxes

hover background color with checkboxes

Answers