刷新從 MySQL 填充的數據表，而不每 x 秒刷新整個頁面

Question

我正在嘗試刷新當前填充了來自 MySQL 的數據的數據表。

我的 PHP 文件：

<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>

Javascript 不起作用並破壞了數據表。 MySQL 不斷填充新數據，我只想用從 MySQL 數據庫獲得的新數據刷新網站上的表格。

$(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 );
    } 
});
});

我目前正在使用上面的 JS 代碼填充表格，但它不起作用。 數據顯示在表格中，但每秒都沒有刷新。

Answer 1

1 - 寫一個 function 加載 ajax 請求 data.table

2 - 將表分配給變量（設 x）

3 - 啟動計時器並在 x 秒內調用 function。

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

請參閱此鏈接以重新加載表格。 - https://datatables.net/reference/api/ajax.reload()

Answer 2

您可以使用服務器端ajax - based jquery data.table time interval后您可以重新加載表格數據而不是加載整頁