17th Jan 2025hover background color with checkboxes
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!