Jquery Datatable using Innerhtml
Jquery Datatable using Innerhtml
I can't seem to get my datatable working. I got a search button and upon clicked, will fetch the data (json array) using ajax. The data format is like [{"workID":1,"typeID":1,"statusDesc":"On-Going"}, {"workID":2,"typeID":2,"statusDesc":"On-Going"}]
The data then constructed as a html format and inserted into the table element using innerhtml.
Can the datatable work using innerhtml?
Hope someone advise me.
Thank you.
Regards,
Justin
$(document).ready(function() {
$('#example').dataTable();
} );
function searchWork(){
$.ajax({
type:"POST",
url: "../../../work/WorkAction.do?formAction=loadListingByCriteria",
data:{
type: $("#requestForm").find("select[name='cbType']").val()
},
dataType: "json",
success: function( json ) {
if(json != null){
var content = "";
content += "";
content += "";
content += "";
content += "Status";
content += "User";
content += "Type of work";
content += "";
content += "";
content += "";
content += "";
content += "Status";
content += "User";
content += "Type of work";
content += "";
content += "";
content += "";
$.each(json, function(){
content += "";
content += "" + this.statusDesc + "";
content += "" + this.inspectionInChargeID + "";
content += "" + this.inspectionTypeDesc + "";
content += "";
});
content += "";
content += "";
document.getElementById('example').innerHTML = content;
}
}
});
}
jsp page:
This question has an accepted answers - jump to answer
Answers
Hi all, I have fixed my issue. :)
Added this at the success function:
$("#requestForm #example").html(content);
$('#example').dataTable();
Thanks!