I set up 2 scenarios.
Scenario 1
I create an HTML table on an HTML page as such:
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| record 1 | value 1 | value 1 |
| record 2 | value 2 | value 2 |
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?