How to set the table as datatables after the data load is complete table.

ardigunawan

How to set the table as datatables after the data load is complete table.
because I want to load data into table with ajax by trigger button.
detail: I want to place this : $('#table_history').DataTable({ordering:false,lengthChange:false,pageLength:5,scrollX:true}); after data load is complete table by trigger button.

here is my code:

$.ajax({
url: "{{URL::to('this is url')}}",
type: "GET",
dataType: "html",
data: {id: val.sample},
success: function(data) {
var detail = JSON.parse(data);
console.log(data);
var htm = '<tr><td>' + val.date + '</td><td>' + val.transid + '</td><td>' + val.type + '</td><td> Rp. ' + val.amount + '</td><td> ' + val.agent + '</td><td>' + detail.outlet_id + '</td><td>' + detail.loan_number + '</td></tr>';
$('#table_body').append(htm);
}
});
$('#table_history').DataTable({ordering:false,lengthChange:false,pageLength:5,scrollX:true});~~~~

kthorngren

What happens?

Maybe the Datatables initialization happens before the ajax load is complete.

Is the HTML portion of the table built correctly?

Please post more details regarding the problem. Posting a link showing the issue would be best. Maybe you can build a test case showing the issue.

Kevin

rduncecb

Your last line of code that calls DataTable(...) is outside of your ajax success function.
As it's an asynchronous call, the DataTable call is likely to be called BEFORE the success callback function may have executed, you need to move it into the success function.

That being said, creating the table in this way is not ideal. I would suggest creating the datatable HTML and calling the ajax function using the datatables ajax config option to separate your view from the code. This will also provide you with a fully drawn page and 'processing...' message in the datatable while waiting for the ajax call to complete.