1

Estoy generando un DataTable con un JSON que se recibe de PHP, el problema esta en que a esos datos que muestro en el DataTable tengo que aplicar clases CSS usando JQuery porque estoy usando un plugin para ello, en este caso iCheck para estilizar los checkbox que muestro en cada fila de la tabla.

JQuery:

function declararDataTable()
{
    var id_proveedor = $("#id_proveedorVal").val();
            
    tabla_contratos = $('#productos').dataTable({
        "oLanguage": {
                "sLengthMenu": "Mostrar _MENU_ productos por página",
                "sZeroRecords": "No existen productos",
                "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ productos",
                "sInfoEmpty": "Mostrando 0 a 0 de 0 productos",
                "sInfoFiltered": "(Encontrados de _MAX_ productos)"
        },
        "aoColumns": [{"sWidth":"20%"},{"sWidth":"5%"}],
        "bProcessing": true,
        "sAjaxSource": '../includes/acciones/proveedor/productos_asignados_json.php',
        "fnServerParams": function ( aoData ) {
            aoData.push({ "name": "id_proveedor", "value": id_proveedor });
        },
        "iDisplayLength": 25
    });
    
    $('input[type="checkbox"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue'
    });
}

PHP:

<?php
include_once("../../clases/class.Proveedor.php");
include_once("../../clases/class.Producto.php");

extract($_GET);
# id_proveedor

$conexion = Database::getInstance();
$conexion->begin_transaction(MYSQLI_TRANS_START_WITH_CONSISTENT_SNAPSHOT);

$proveedor = new Proveedor($id_proveedor);

$productos = Producto::getLista();

$json = array();

if(is_array($productos))
{
    foreach($productos as $producto)
    {
        $temp = array();
        array_push($temp, $producto["descripcion"]);
        
        if($proveedor->isProducto($producto["id_producto"]))
          $checkInput = "<input type='checkbox' class='minimal' value='".$producto["id_producto"]."' checked>";
        else
          $checkInput = "<input type='checkbox' class='minimal' value='".$producto["id_producto"]."'>"; 
      
        array_push($temp, $checkInput);
        array_push($json, $temp);
    }
}

$conexion->close();

echo json_encode(array("aaData" => $json));
?>

Como puedo solucionar eso??

2
  • Podrías tener al papa, pero si es más optimo ponerle una clase CSS y aplicarle los estilos, lo deberías hacer. Como está planteada tu pregunta resulta un poco...
    – OCHOA
    Commented el 10 oct. a las 15:23
  • sAjaxSource es el método antiguo, ¿qué versión de dataTables usas? ¿Quizás deberías mover a ajax? Aunque realmente eso no es el problema, siempre es mejor utilizar la versión más moderna posible.
    – Alvaro Montoro
    Commented el 10 oct. a las 15:51

1 respuesta 1

0

Esto es el típico error que ocurre cuando se usa asincronía. Básicamente éste es el problema:

  1. DataTables llama al servidor para obtener los datos con AJAX
  2. El programa se sigue ejecutando mientras espera la respuesta asíncrona
  3. Se ejecuta el comando con iCheck()
  4. Aún no han llegado los datos y no hay checkboxes que modificar
  5. Los datos llegan del servidor
  6. Se genera la tabla con los checkboxes

La solución es simple: tienes que esperar a la respuesta del servidor antes de intentar cambiar los checkboxes con iCheck() (porque si no, no habrá checkboxes).

Para hacer esto, puedes usar los eventos de DataTable (puedes leer más sobre esto en la documentación en inglés). Entonces, tendrías que esperar a que se dibuje la tabla antes de llamar a iCheck(), quizás podrías hacer algo como esto:

tabla_contratos = $('#productos').dataTable({
  // mismo código
});

// ejecuta iCheck cuando la tabla se dibuje, no antes
table.on('draw', function() {
   $('input[type="checkbox"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue'
    });
};

Puedes usar el evento draw o el que mejor se ajuste a lo que necesites. Pero parece el más adecuado en este caso.

1
  • 1
    Use el evento draw que mencionas y no funcionó pero utilice el otro evento que se maneja en la documentación de DataTable y si funcionó Commented el 11 oct. a las 12:49

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.