How to Auto Update Table HTML Data read data from json file? I block with it problem

I’m trying to auto update the html table that reads a json file
This json updates the information every 5 seconds so instead of refreshing the web, I want it to only update the table data, but I can’t, I’ve been reading and testing for 3 days and I can’t.

Can someone help me with this?

<html>
<head>
<title>DATOS</title>
<script type="text/javascript" src="inc/js/tablefilter_all_min.js"></script>
<link rel="stylesheet" type="test/css" href="css/filtergrid.css">

<head>
<body>
<table id="table" class=" TF"cellpadding="0" cellspacing="0" border="1">
<thead>
        <tr>
        <th>ID</th>
            <th>VDN</th>
            <th>VDN</th>
        <th>INPROGRESS-ATAGENT</th>
            <th>OLDESTCALL</th>
        <th>AVG_ANSWER_SPEED</th>
        <th>ABNCALLS</th>
        <th>AVG_ABANDON_TIME</th>
        <th>ACDCALLS</th>
        <th>AVG_ACD_TALK_TIME</th>
        <th>ACTIVECALLS</th>
        </tr>
    </thead>
<?php
$file = "report/vdn.json";
$json = json_decode(file_get_contents($file), true);

//var_dump($json);

foreach ($json as $row){
echo "<tr>";
//echo $row;
$parts = explode(',', $row);
foreach ($parts as $part){
    $aux = explode(':"', $part);
    $aux2 = $aux[1];
    $aux3 = str_replace('"','',$aux2);
    echo "<td><center>$aux3</center></td>";
}
echo "</tr>";
//var_dump($parts);
}
//echo "</table>";


?>
</table>
</body>
<script>
var table2_Props = {
    col_0: "select",
    col_1: "select",
    col_2: "select",
    col_3: "select",
    col_4: "select",
    col_5: "select",
    col_6: "select",
    col_7: "select",
    col_8: "select",
    col_9: "select",
    col_10: "select",

    display_all_text: " [ Mostrar Todo ] ",
    sort_select: true
};
var tf2 = setFilterGrid("table", table2_Props);
</script>
</html>