Data Table doesn't work with my Javascript created table!

Innerwolf

On my website http://zcatch-ranking.host56.com/ I create a HTML table by parsing CSV data to a PHP array

$csvData = file_get_contents($url);
$lines = explode(PHP_EOL, $csvData);
$array = array();
foreach ($lines as $line) {
$line = str_replace("\\", "\", $line);
$line = str_replace("#", "#", $line);
$array[] = str_getcsv($line);

and then I pass the variable to Javascript with

var array = <?php echo json_encode( $array ) ?>;

After that, the following function creates the table:

function createtable() {
    array[0] = ["Rank", "Name", "Score", "K/D", "Wins", "Kills", "Deaths", "Shots", "Time played"];
    for(var i=1; i<array.length; i++){
        array[i].splice(0, 0, i);
    }
    var result = "<table border=1 id=\"scoreboard\">";      
    result += "<thead>"
    result += "<tr class=\"header\">";
    result += "<th class=\"rank\">"+array[0][0]+"</th>";
    for(var j=1; j<array[0].length-1; j++){
            result += "<th>"+array[0][j]+"</th>";
        }
    result += "<th class=\"time\">"+array[0][8]+"</th>";
    result += "</tr></thead><tbody>";   
    for(var i=1; i<array.length-1; i++) {
        if(i % 2){
            result += "<tr class=\"odd\">";
        }else{
            result += "<tr class=\"even\">";
        }
            result += "<td class=\"rank\">"+array[i][0]+"</td>";
            result += "<td>"+array[i][1]+"</td>";
            result += "<td class=\"score\">"+(Math.round((array[i][2] / 100) * 10) / 10).toFixed(1)+"</td>";
            if(array[i][6] > 0){
            result += "<td class=\"kd\">"+Math.round((array[i][4] / array[i][6]) * 100) / 100+"</td>";
            }else{
            result += "<td class=\"kd\"></td>";
            }
            result += "<td class=\"wins\">"+array[i][3]+"</td>";
            result += "<td class=\"kills\">"+array[i][4]+"</td>";
            result += "<td class=\"deaths\">"+array[i][6]+"</td>";
            result += "<td class=\"shots\">"+array[i][7]+"</td>";
            result += "<td class=\"time\">"+Math.floor(array[i][9] / 3600)+":"+("0"+Math.floor((array[i][9] / 3600 - Math.floor(array[i][9] / 3600)) * 60)).slice(-2)+" h</td>";
    result += "</tr>";
    }
    result += "</tbody><tfoot></tfoot></table>";
    document.getElementById("table").innerHTML = result;
    document.getElementById("table").innerHTML = document.getElementById("table").innerHTML.replace(/&/g, "");
    document.getElementById("table").innerHTML = document.getElementById("table").innerHTML.replace(/amp;#92;/g, "\\");
    document.getElementById("table").innerHTML = document.getElementById("table").innerHTML.replace(/amp;/g, "&");
    document.getElementById("table").innerHTML = document.getElementById("table").innerHTML.replace(/lt;/g, "<");
    document.getElementById("table").innerHTML = document.getElementById("table").innerHTML.replace(/gt;/g, ">");
}

All of that happens, when reloading the page.
But I can't get Data Table to run with the id scoreboard.

$(document).ready( function () {
    $('#scoreboard').DataTable();
} );

It works with others though, what am I missing?
Debugger: enotiw

allan

Change:

$(document).ready( function () {
    $('#scoreboard').DataTable();
} );

to:

$(document).ready( function () {
    createtable();
    $('#scoreboard').DataTable();
} );

And remove createtable() from the onload.

I suspect the issue is that the jQuery ready function is running before the onload that is creating the table...

In general I would never recommend using DOM0 events like the inline onload.

Allan

Innerwolf

Thank you for the answer Allan, I will test it when I'm home!