createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
if (rowData[6] == 10) {
$(tdcell).css('background-color', '#D953FA');
}
},
El funcionamiento es el siguiente: si el séptimo elemento de los datos (el índice 6
, que contiene $row->stock_min
) vale 10
, entonces modifico el atributo CSS del color de fondo (background-color
) de la celda en curso (parámetro tdcell
de la función) al color que deseas (#D953FA
).
var dataTable = $('#user_data').DataTable({
"dom": "Bfrtip",
"buttons": [
'excel', 'pdf'
],
"data": [
[ 'imagen', 'CHAMARA1', '0002', '0', '1', 2, 10, 20 ],
[ 'imagen', 'CHAMARA2', '0002', '0', '1', 2, 15, 20 ],
[ 'imagen', 'CHAMARA3', '0002', '0', '1', 2, 5, 20 ],
[ 'imagen', 'CHAMARA4', '0002', '0', '1', 2, 10, 20 ],
],
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json",
},
"columnDefs": [
{
targets: [ 0, 3, 4 ],
orderable: false,
},
{
targets: [ 1 ],
createdCell: function (tdcell, cellData, rowData, rowrowIndex, colcolIndex) {
if (rowData[6] == 10) {
$(tdcell).css('background-color', '#D953FA');
}
},
}
],
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/css/jquery.dataTables.css" integrity="sha256-rfdVKxryktsNgqIt1/gXp6UEov0OUXAcZ4hJ9emFy7k=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js" integrity="sha256-L4cf7m/cgC51e7BFPxQcKZcXryzSju7VYBKJLOKPHvQ=" crossorigin="anonymous"></script>
<table id="user_data">
<thead>
<th>IMAGEN</th>
<th>NOMBRE</th>
<th>MODELO</th>
<th>DESCRICIÓN</th>
<th>COLOR</th>
<th>PRECIO</th>
<th>STOCK MIN</th>
<th>STOCK ACTUAL</th>
</thead>
</table>