No data available in table always in the first row

DonChubi

When i load my page, datatable always have in first row "No data available in table", but i have data in the other rows, and pagination, sort and search are not working, when i try to use make them empty the datatable.

Html Code

    <h2 style="margin:0; padding-top:20px;padding-bottom:20px;">Plantas</h2>
    <table class="table table-bordered table-striped table-hover" id="tabloide">
        <thead style="background:#A4A4A4;">
            <th></th>
            <th></th>
            <th>Codigo</th>
            <th>Nombre</th>
            <th>Ciudad</th>
            <th>Region</th>
        </thead>
        <tbody id="datos">          
                
        </tbody>        
    </table>
    @include('planta.form.modal')
    @include('planta.form.insert')  
@endsection

JS Code

*here
$(document).ready(function(){
    Carga();    
});

function Carga(){
    var tablaDatos = $("#datos");
    var route = "plantalis";

    $("#datos").empty();
    $.get(route, function(res){
        $(res).each(function(key,value){
            tablaDatos.append("<tr><td><button value="+ value.pla_cod + " onclick='MostrarPlanta(this);' data-toggle='modal' data-target='#myModal' class='btn btn-default' style='width:25px; height: 25px; padding:0;''><i class='fa fa-pencil fa-lg'></i></button></td><td><button value="+ value.pla_cod +" onclick='EliminarPlanta(this);' class='btn btn-default' style='width:25px; height: 25px; padding:0;'><i class='fa fa-trash-o fa-lg'></i></td><td>"+ value.pla_cod +"</td><td>"+ value.pla_nombre +"</td><td>"+ value.pla_ciudad +"</td><td>"+ value.pla_region +"</td></tr>");
        });
    });
    $('#tabloide').DataTable();
}

And Finally my table

http://fotos.subefotos.com/dd14e4d5dd26a84093e8d736d02a40c2o.png