Displaying 'No data available in table' and when clicking filters, table clears data.

geebeetoo

I have a table created from a getJSON function that takes my data from a temporary file until I get my API call running.
The table gets populated but the first row says No data available in table, when there is data in. I figure it was a problem with asynchronous functions running. But I am having trouble finding a fix with the way I am looping through my data to correctly display it into the table.

Here is all of my code.

$(document).ready(function() {

$.getJSON("projects.json", function(results){
    var table = $('#results_table').DataTable();
    $('#results_table_wrapper').addClass('container mt-5');
        for(let project in results){
            let project_name = results[project].projectname;
            let project_owner = results[project].owner;
            $("#table_body").append("<tr><td>"+project_name+"</td><td></td><td></td><td></td><td></td><td></td></tr>");
            $("#table_body").append("<tr><td>Released by "+project_owner+"</td><td></td><td></td><td></td><td></td><td></td></tr>");
            let resources = results[project].resources;
            for(let resource in resources){
                let resource_name = resources[resource].resourcename;
                $("#table_body").append("<tr><td></td><td>"+resource_name+"</td><td></td><td></td><td></td><td></td></tr>");
                let versions = results[project].resources[resource].versions;
                for(let version in versions){
                    let version_decimal = versions[version].version;
                    let date = versions[version].date;
                    let user = versions[version].user;
                    let annotation = versions[version].annotation;
                    annotation = !annotation ? ' '  :
                    date = !date ? ' ' :
                    $("#table_body").append("<tr><td></td><td></td><td>"+version_decimal+"</td><td>"+date+"</td><td>"+user+"</td><td>"+annotation+"</td></tr>");
                }
            }
        }
});

});

kthorngren

Datatables doesn't know about the data you directly added to the HTML table. See this FAQ. Probably the easiest thing to do is to initialize Datatables after you add the data, for example move line 2 after your for loops - after line 24.

Kevin

geebeetoo

Hi Kevin and thank you for answering. Moving the line somewhat worked, the only issue now is that my first column is not displaying anything.

Thanks

kthorngren

Looks like some of the rows you are adding don't have anything in the first column. By default Datatables sorts by the first column which I suspect is why you are not seeing any data in the first column. You can use order to set the initial ordering to another column or use order: [] to show the table in the order it was loaded.

If you still need help we will need to see what data is being loaded. Please provide a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

geebeetoo

That fixed it! Thank you.