I set up 2 scenarios.

Scenario 1
I create an HTML table on an HTML page as such:

and then I call
$('#abc').DataTable({
fixedHeader: true
});

This scenario works perfectly fine.

Scenario 2
-produce a html table from a JSON data via call to API. html table looks exactly like table above.
- call .DataTable(...) to initialize
- I can confirm that the table is produced correctly (same as above)
- the initialization call of DataTable finds no records
- why is this so? Below is the pseudo code of what I am doing.

$.ajax({
url: "/datapi/getdata",
type: "GET",
dataType: 'json',
success: function (result, status) {

            if (result && result.Data != null) {

                if (result.Data.length > 0) {
                var dataitems = result.Data;
                    jQuery.each(dataitems,
                        function () {

                            //loop through the data and produce a table that exactly **looks like scenario 1**
                            //ex. <table id="abc2">.......</table>
                        });   
                }               
            }
        },
        error: function () {
            $("#error").html('An error has occurred while trying to access get data.');
        }
    })
    .done(function () { 
              if ($('#abc2').html().length > 0)
              {
                    console.log($('#abc2').html());
        $('#abc2').DataTable({
            fixedHeader: true
        });
                }
    });
}

What am I doing wrong here?