2

Estoy tratando de poner estilo a un <td> pero no tengo idea de cómo hacerlo.

Los <td> los creo desde el controlador usando PHP, ya que estoy realizando un crud con ajax para que no me recargue la página, sino la tabla al momento de agregar un registro.

Estoy haciendo una validación donde el stock si es igual a 10 el <td> del nombre sea de color.

Traté de poner un <div>, pero solo rellena de color una parte y quiero que el <td> completo se rellene.

¿Alguien me puede ayudar?

Ésta es mi función de mi controlador:

   function mostrar(){  
       $this->load->model("Productos_model");  
       $fetch_data = $this->Productos_model->make_datatables();  
       $data = array();  

       foreach($fetch_data as $row)  
       {  

            $sub_array = array(); 

            if($row->stock_actual == 10){

            $sub_array[] = '<img src="'.base_url().'upload/'.$row->image.'" class="img-thumbnail" width="50" height="35" />';  
            $sub_array[] = '<div style="background: #D953FA;">'.$row->nombre.'</div>';  
            $sub_array[] = $row->modelo;
            $sub_array[] = $row->descripcion;
            $sub_array[] = $row->color;
            $sub_array[] = '$ '.$row->precio;
            $sub_array[] = $row->stock_min;
            $sub_array[] = $row->stock_actual;
            $sub_array[] = '<a class="btn btn-sm btn-primary update" style="background: #D953FA; border-color: #D953FA;" id="'.$row->id.'" title="EDITAR" ><i class="glyphicon glyphicon-pencil"></i> EDITAR</a>';  
            $sub_array[] = '<a class="btn btn-sm btn-primary delete" style="background: #D953FA; border-color: #D953FA;" id="'.$row->id.'" title="EDITAR" ><i class="glyphicon glyphicon-pencil"></i> ELIMINAR</a>'; 
            } 

            $data[] = $sub_array;  
       }  
       $output = array(  
            "draw"                    =>     intval($_POST["draw"]),  
            "recordsTotal"          =>      $this->Productos_model->get_all_data(),  
            "recordsFiltered"     =>     $this->Productos_model->get_filtered_data(),  
            "data"                    =>     $data  
       );  
       echo json_encode($output);  
  } 

El código anterior me da como resultado esto (no rellena la celda como quiero):

ejemplo de salida incorrecta

En lugar de eso quiero que todo mi <td> del nombre se llene de ese color.

Éste es mi código javascript:

var dataTable = $('#user_data').DataTable({  

        "dom": "Bfrtip",
        "buttons": [
             'excel', 'pdf'
        ],

           "processing":true,  
           "serverSide":true,  
           "order":[],  
           "ajax":{  
                url:"<?php echo base_url() . 'Productos/mostrar'; ?>",  
                type:"POST"  
           }, 
               "language":
    {
      "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
    }, 
           "columnDefs":[  
                {  
                     "targets":[0, 3, 4],  
                     "orderable":false,  
                },  
           ],  
      });  
8
  • ¿Qué método utilizas para cargar los datos en js? Commented el 1 jun. 2020 a las 5:35
  • Falta el código javascript que genera las celdas de la tabla con los datos recibidos. Hay dos maneras de hacer lo que quieres, pero ambas requieren de ese código para poder indicarte cómo hacerlo. Commented el 1 jun. 2020 a las 6:07
  • El js lo acabo de poner en la pregunta amigo Commented el 1 jun. 2020 a las 6:49
  • ¿Todos los nombres deben ir con el fondo de la celda en morado? o, por el contrario, depende de algo que vaya de un color de fondo u otro. Commented el 1 jun. 2020 a las 7:26
  • Solamente los nombres con color de fondo morado son solos que el stock actual sea igual a 10, los demás se mostraran normal...sin fondo Commented el 1 jun. 2020 a las 7:38

1 respuesta 1

2

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

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).

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 (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>

1
  • 1
    Claro, fue correcto amigo, no tenia idea de como solucionarlo. Muchas gracias, ahora ya entiendo como se maneja columns.createdCell. Gracias nuevamente. Commented el 1 jun. 2020 a las 8:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.