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!