Jquery Datatable using Innerhtml

Jquery Datatable using Innerhtml

khimhung.leekhimhung.lee Posts: 11Questions: 2Answers: 1

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

  • khimhung.leekhimhung.lee Posts: 11Questions: 2Answers: 1
    Answer ✓

    Hi all, I have fixed my issue. :)

    Added this at the success function:
    $("#requestForm #example").html(content);
    $('#example').dataTable();

    Thanks!

This discussion has been closed.