Cargar DataTable con Jquery

publicado por: Anonymous

Estoy intentando cargar un DataTable dinamicamente, he intentado seguir unos cuantos tutoriales y adaptarlo a lo que tengo pero no me funciona, espero puedan ayudarme.

En una vista pido un rango de fechas y un almacen que se escoge de un select, esto lo envio al controlador y me regresa un response con la consulta, hasta aqui todo lo tengo bien.

Controlador:

public function consultaProd2(Request $request)
{
    $almacenes = Almacen::lists('nombre', 'id');

    $fechas = explode(' ', $request['RangoFecha']);
    $fechaInicial = $fechas[0].' 00:00:00';
    $fechaFinal = $fechas[2].' 23:59:59';

    $productos = Producto::whereBetween('created_at', [$fechaInicial, $fechaFinal])
                         ->where('almacen_id', '=', $request['Almacen'])
                         ->get();

    return response()->json($productos);


}

Mi problema viene siendo en el JQuery, aquí tengo lo siguiente:

Script

<script type="text/javascript">
    function llenar(response, index, value)
    {
        $('#example1').DataTable({
            "destroy": true,
            "columns":[
                {"data":"response.nombre"},
                {"data":"response.codigo"},
                {"data":"response.codigo"},
                {"data":"response.codigo"},
                {"data":"response.codigo"},
                {"data":"response.codigo"},
                {"data":"response.codigo"},
                {"data":"response.codigo"},
                {"data":"response.codigo"},
                {"data":"response.codigo"},
                {"data":"response.codigo"}
            ]
        });
    }
</script>

<script type="text/javascript">
    function consultaProducto(){
        var tablaDatos = $('#datos');
        var token = $("#token").val();
        var route = '<?= url('producto/consultaProducto') ?>'
        var data = {};
        data.Almacen = $('select[name=Almacen]').val();
        data.RangoFecha = $('input[name=RangoFecha]').val();
        if(data.Almacen != null || data.Almacen !== 'undefined'){
            if(data.RangoFecha != null || data.RangoFecha !== 'undefined'){
                $.ajax({
                    url: route,
                    headers: {'X-CSRF-TOKEN': token},
                    data: data,
                    method: 'POST',
                    statusCode: {
                        400: function() {
                            /*success: function(){

                            }*/
                        }
                    }
                }).done(function(response){
                    $.each(response, function(index, value){
                        llenar(response, index, value);
                        /*tablaDatos.append("<tr>");
                        tablaDatos.append("<td>"+response[index].nombre+"</td>");
                        tablaDatos.append("<td>"+response[index].codigo+"</td>");
                        tablaDatos.append("</tr>");*/
                    });

                }).fail(function(response){
                }); 
            }else{
                alert("Debes seleccionar un rango de fecha");
            }
        }else{
            alert("Debes seleccionar un almacen");
        }
        return false;
    }
</script>

Si imprimo dentro de done con console.log(response), me trae el JSON de la manera correcta.

a busy cat

Especificamente la función de llenar es la que no estoy seguro que este funcionando y no me marca error alguno al momento de cargar la vista e interactuar con ella. Gracias por su ayuda.

solución

Cambia tu función llenar de esta forma:

function llenar(response, index, value)
{
    $('#example1').DataTable({
        "destroy": true,
        "data": response,
        "columns":[
            {"data":"nombre"},
            {"data":"codigo"},
            {"data":"codigo"},
            {"data":"codigo"},
            {"data":"codigo"},
            {"data":"codigo"},
            {"data":"codigo"},
            {"data":"codigo"},
            {"data":"codigo"},
            {"data":"codigo"},
            {"data":"codigo"}
        ]
    });
}
Respondido por: Anonymous

Leave a Reply

Your email address will not be published.