Datatables show no data available in table

Question

I'm using jquery onclick function to show some data.

Here is my script

<script type="text/javascript">
$(document).ready(function()
    {   
        $("#rprt").click(function() 
            { 

                var tipenya = $("#tipe").val();
                var area = $("#areanya").val();
                var outlet = $("#hsl").val();
                var date_search = $("#reservation").val();
                    if(date_search == '')
                     {
                        alert('Mohon tanggal di isi terlebih dahulu');
                         $("#reservation").focus();
                     }else{
                     $.ajax({ 
                            type: "POST",   
                            data: {tipenya: tipenya,area:area,outlet:outlet,date_search:date_search},
                            dataType: 'json',
                            timeout: 1000,
                            url: "<?=base_url();?>report/show_it/"
                            })
                            .done(function(hslnip){ 
                                var tbl=$("<table/>").attr("id","tbl");
                                $("#div1").append(tbl);
                                var no = 0;
                                for(var i=0;i<hslnip.length;i++)
                                {
                                    no ++;
                                    var tr="<tr>";
                                    var td1="<td>"+no+"</td>";
                                    var td2="<td>"+hslnip[i]["outlet"]+"</td>";
                                    var td3="<td>"+hslnip[i]["tanggal"]+"</td>";
                                    var td4="<td>"+hslnip[i]["cc"]+"</td>";
                                    var td5="<td>"+hslnip[i]["cc"]+"</td>";
                                    var td6="<td>"+hslnip[i]["dc"]+"</td>";
                                    var td7="<td>"+hslnip[i]["mpm"]+"</td>";
                                    var td8="<td>"+hslnip[i]["reject"]+"</td>";
                                    var td9="<td>"+hslnip[i]["disc50"]+"</td>";
                                    var td10="<td>"+hslnip[i]["tf"]+"</td></tr>";
                                    $("#tbl").append(tr+td1+td2+td3+td4+td5+td6+td7+td8+td9+td10); 
                                }
                            });
                    }   
            }); 

    })

Well. As default my table look like this :

after i fill the form and press show me!.

<a id='rprt' class="btn btn-info pull-right"> Show Me ! </a>

as you can see at my second image.

I have following this jQuery DataTables "No Data Available in Table" but still no help. Any suggestion ?

this is the response

[{"outlet":"K-ATR3","tanggal":"2016-06-03 00:00:00.000","cash":3663520,"cc":0,"dc":610600,"mpm":0,"reject":0,"disc50":0,"tf":3675500},
    {"outlet":"K-ATR3","tanggal":"2016-06-02 00:00:00.000","cash":3760000,"cc":117500,"dc":451300,"mpm":0,"reject":0,"disc50":0,"tf":3771500},
    {"outlet":"K-ATR3","tanggal":"2016-06-01 00:00:00.000","cash":3372900,"cc":0,"dc":378400,"mpm":0,"reject":0,"disc50":0,"tf":3380000}]

UPDATE.

I change my script like this answered question jQuery DataTables "No Data Available in Table"

$.ajax({
                            type: 'POST',
                            url: '<?=base_url();?>report/show_it',
                            mimeType: 'json',
                            data: {tipenya: tipenya,area:area,outlet:outlet,date_search:date_search},
                            success: function(data) {
                            $.each(data, function(i, data) {
                                no ++;
                                var body = "<tr>";
                                body    += "<td>" + no + "</td>";
                                body    += "<td>" + data.outlet + "</td>";
                                body    += "<td>" + data.tanggal + "</td>";
                                body    += "<td>" + data.cash + "</td>";
                                body    += "<td>" + data.cc + "</td>";
                                body    += "<td>" + data.dc + "</td>";
                                body    += "<td>" + data.mpm + "</td>";
                                body    += "<td>" + data.reject + "</td>";
                                body    += "<td>" + data.disc50 + "</td>";
                                body    += "<td>" + data.tf + "</td>";
                                body    += "</tr>";
                               $( body ).appendTo( $( "tbody" ) );
                               $( "#tbl" ).DataTable();
                            });
                        },
                            error: function() {
                                alert('Fail!');
                            }
                        });