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

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

geebeetoogeebeetoo Posts: 24Questions: 6Answers: 0

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>");
                }
            }
        }
});

});

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 14,169Questions: 25Answers: 3,340

    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

  • geebeetoogeebeetoo Posts: 24Questions: 6Answers: 0

    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

  • kthorngrenkthorngren Posts: 14,169Questions: 25Answers: 3,340
    Answer ✓

    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

  • geebeetoogeebeetoo Posts: 24Questions: 6Answers: 0

    That fixed it! Thank you.

Sign In or Register to comment.