Refresh datatable filled from MySQL without refreshing entire page every x seconds

Question

I'm trying to refresh a datatable currently filled with data from MySQL.

My PHP file:

<div class="col-md" id="tableDiv">
        <table class="table" id="myTable">
            <thead>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            </thead>
            <tbody>
            <?php

            $connect = mysqli_connect($servername, $username, $password, $database);
            if (!$connect) {
                die(mysqli_error());
            }
            $results = mysqli_query($connect,"SELECT * FROM xxxx");
            while($row = $results->fetch_assoc()) {
                $imgdata = $row['xxx'];
                ?>
                <tr>
                    <td><?php echo '<img src="data:image/gif;base64,' . $imgdata . '" />'; ?></td>
                    <td><?php echo $row['1']?></td>
                    <td><?php echo $row['2'] ?></td>
                    <td><?php echo $row['3'] ?></td>
                    <td><?php echo $row['4'] ?></td>
                </tr>

                <?php
            }
            ?>
            </tbody>
        </table>

        <script>
            $(document).ready(function() {
                $('#myTable').DataTable( {
                    responsive: true,
                    "pageLength": 10
                    .ajax.reload(null, false);
                });
            });
        
        </script>

    </div>
</div>

The Javascript doesn't work and destroys the datatable. The MySQL is constantly being filled with new data and I'd like to refresh the table only on the website with new data obtained from the MySQL database.

$(document).ready (function() {
$.ajax({
    url: "updatetable.php",
    success : function(data) {
        var o = JSON.parse(data);
        var table= $('#myTable').dataTable( {
            data : o,
            columns: [
                {"data" : "1"},
                {"data" : "2"},
                {"data" : "3"},
                {"data" : "4"},
                {"data" : "5"},
                
            ],
        });
          setInterval( function () {
            console.log('reloading table')
            table.ajax.reload( null, false ); 
            }, 1000 );
    } 
});
});

I currently am populating the table using the JS code above but it's not working. Data is being shown in the table but no refresh every second.

Answer 1

1 - write a function to load data.table with ajax request

2 - assign table to a variable (let x)

3 - start a timer and call that function in x seconds.

4 - in function if (x == undefined){ initiate table } else { reload table }

refer this link for table reload. - https://datatables.net/reference/api/ajax.reload()

Answer 2

You can use server-side ajax - based jquery data.table After time interval you can reload table data instead of loading full page