How to show Datatable with ajax post data request? - datatable

Question

This is my HTML Form
<form id="inputform" action="#" method="post">
<input type="text" class="form-control" id="tgl_awal" placeholder="Start Date..." value="2019-05-01" />
<input type="text" class="form-control" id="tgl_akhir" placeholder="End Date..." value="2019-05-15" />
</form>
This is my Jquery code
$("#inputform").submit(function(){
$('#demo-dt-basics').dataTable( {
"ajax": {
"url" : "controller/menu_autodebet.php",
"type" : "POST",
"data" : function ( ) {
return JSON.stringify({
tgl_awal: $("#tgl_awal").val(),
tgl_akhir: $("#tgl_akhir").val()
});
}
},
"columns" : [
{ "data" : "co_brand" },
{ "data" : "tanggal" },
{ "data" : "waktu" },
{ "data" : "no_mc" },
{ "data" : "nama" },
{ "data" : "nomor_peserta" }
]
});
});
And here is the data from php
{"resultCode":"00","resultDesc":"Success","data":{"1":{"co_brand":"jkn","tanggal":"18/03/2019","waktu":"09:16:49","no_mc":"082245326737","nama":"xxxxxx","nomor_peserta":"889980000001118201"},"2":{"co_brand":"jkn","tanggal":"25/03/2019","waktu":"07:34:31","no_mc":"08119235344","nama":"Muhaaa Ryuu","nomor_peserta":"899880172403268601"}}}
The problem is, i can't show the entire data that i've gained from my ajax request. When i use code above, the datatable still showing "No data available in table".
Please help me to figure it out which code that messed up

Answer 1

Your data function in the ajax request is not returning the response back to Datatables.
You would write a normal ajax loaded Datatable as such
$('#demo-dt-basics').DataTable({
ajax: {
url: 'controller/menu_autodebet.php',
dataSrc : ''
},
columns: [
{ "data" : "co_brand" },
{ "data" : "tanggal" },
{ "data" : "waktu" },
{ "data" : "no_mc" },
{ "data" : "nama" },
{ "data" : "nomor_peserta" }
]
});
If you wanted to retrieve the ajax response as well, you would do it like so
$('#demo-dt-basics').DataTable({
ajax: {
url: 'controller/menu_autodebet.php',
dataSrc : function (result) {
//Process result here (e.g. assign to variable)
//You must return the result of the ajax call back to the Datatable constructor
return result;
}
},
columns: [
{ "data" : "co_brand" },
{ "data" : "tanggal" },
{ "data" : "waktu" },
{ "data" : "no_mc" },
{ "data" : "nama" },
{ "data" : "nomor_peserta" }
]
});
This sends the result of the ajax query back to the Datatables constructor, without which, the data will not load.