数据表显示表中没有可用数据

Question

我使用jquery onclick function来显示一些数据。

这是我的剧本

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

    })

好。默认情况下，我的表格如下所示：

填写表单后按show me!。

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

你可以在我的第二张照片中看到。

我已遵循此jQuery DataTables "No Data Available in Table"但仍然没有帮助。有什么建议吗？

这是回复

[{"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}]

更新。

我改变了我的脚本，就像回答问题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!');
                            }
                        });