Datatables show no data available in table
<p>I'm using <code>jquery onclick function</code> to show some data. </p>

<p>Here is my script</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(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: "&lt;?=base_url();?&gt;report/show_it/"
                            })
                            .done(function(hslnip){ 
                                var tbl=$("&lt;table/&gt;").attr("id","tbl");
                                $("#div1").append(tbl);
                                var no = 0;
                                for(var i=0;i&lt;hslnip.length;i++)
                                {
                                    no ++;
                                    var tr="&lt;tr&gt;";
                                    var td1="&lt;td&gt;"+no+"&lt;/td&gt;";
                                    var td2="&lt;td&gt;"+hslnip[i]["outlet"]+"&lt;/td&gt;";
                                    var td3="&lt;td&gt;"+hslnip[i]["tanggal"]+"&lt;/td&gt;";
                                    var td4="&lt;td&gt;"+hslnip[i]["cc"]+"&lt;/td&gt;";
                                    var td5="&lt;td&gt;"+hslnip[i]["cc"]+"&lt;/td&gt;";
                                    var td6="&lt;td&gt;"+hslnip[i]["dc"]+"&lt;/td&gt;";
                                    var td7="&lt;td&gt;"+hslnip[i]["mpm"]+"&lt;/td&gt;";
                                    var td8="&lt;td&gt;"+hslnip[i]["reject"]+"&lt;/td&gt;";
                                    var td9="&lt;td&gt;"+hslnip[i]["disc50"]+"&lt;/td&gt;";
                                    var td10="&lt;td&gt;"+hslnip[i]["tf"]+"&lt;/td&gt;&lt;/tr&gt;";
                                    $("#tbl").append(tr+td1+td2+td3+td4+td5+td6+td7+td8+td9+td10); 
                                }
                            });
                    }   
            }); 

    })
</code></pre>

<p>Well. As default my table look like this : </p>

<p><a href="https://i.stack.imgur.com/YTFXb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YTFXb.png" alt="enter image description here"></a></p>

<p>after i fill the form and press <code>show me!</code>. </p>

<p><code>&lt;a id='rprt' class="btn btn-info pull-right"&gt; Show Me ! &lt;/a&gt;</code></p>

<p><a href="https://i.stack.imgur.com/xRcaQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xRcaQ.png" alt="enter image description here"></a></p>

<p>as you can see at my second image.</p>

<p>I have following this <a href="https://stackoverflow.com/questions/32852388/jquery-datatables-no-data-available-in-table">jQuery DataTables &quot;No Data Available in Table&quot;</a> but still no help. Any suggestion ?</p>

<p>this is the response </p>

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

<p>UPDATE.</p>

<p>I change my script like this answered question <a href="https://stackoverflow.com/questions/32852388/jquery-datatables-no-data-available-in-table">jQuery DataTables &quot;No Data Available in Table&quot;</a></p>

<pre><code>$.ajax({
                            type: 'POST',
                            url: '&lt;?=base_url();?&gt;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 = "&lt;tr&gt;";
                                body    += "&lt;td&gt;" + no + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.outlet + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.tanggal + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.cash + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.cc + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.dc + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.mpm + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.reject + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.disc50 + "&lt;/td&gt;";
                                body    += "&lt;td&gt;" + data.tf + "&lt;/td&gt;";
                                body    += "&lt;/tr&gt;";
                               $( body ).appendTo( $( "tbody" ) );
                               $( "#tbl" ).DataTable();
                            });
                        },
                            error: function() {
                                alert('Fail!');
                            }
                        });
</code></pre>