I get 'No data available in table' error

tenshi04

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?

kthorngren

Its hard to say without seeing the problem. What does this code result in? Use the browser's inspect tool to make sure the HTML table is properly built. See the HTML docs for the requirements.

                        function () {
 
                            //loop through the data and produce a table that exactly **looks like scenario 1**
                            //ex. <table id="abc2">.......</table>
                        });  

Do you get errors in the browser's console or alert messages?

Maybe you can use ajax to fetch the data. See the Ajax docs and these examples for more details.

If you still need help please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin