Load DataTable with Jquery

I am trying to load a DataTable dynamically, I have tried to follow a few tutorials and adapt it to what I have but it does not work, I hope you can help me.

In a view I ask for a range of dates and a warehouse that is chosen from a select, this is sent to the controller and a response returns with the query, until here everything is fine.

Driver:

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


}

My problem has been in JQuery, here I have the following:

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>

If I print within done with console.log(response) , it brings me the JSON in the right way.

Specifically, the fill function is the one that I'm not sure is working and does not mark any error when loading the view and interacting with it. Thanks for your help.