Skip to main content
Error en el nombre del parámetro, que cambió al copiar/pegar el de la documentación
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
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>
createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
    if (rowData[6] == 10) {
        $(td).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 td 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 (td, cellData, rowData, row, col) {
                if (rowData[6] == 10) {
                    $(td).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>
createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
    if (rowData[6] == 10) {
        $(cell).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 cell 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 (cell, cellData, rowData, rowIndex, colIndex) {
                if (rowData[6] == 10) {
                    $(cell).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>
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

Para cambiar el estilo de la celda puedes hacer uso de columns.createdCell:

createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
    if (rowData[6] == 10) {
        $(td).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 td de la función) al color que deseas (#D953FA).

Puedes ver el ejemplo funcionando aquí:

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 (td, cellData, rowData, row, col) {
                if (rowData[6] == 10) {
                    $(td).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>