使用 ajax 時表功能不起作用

Question

因此，我一直在使用 php 一段時間，但最近，我決定使用 ajax，這樣我就可以查看實時數據，而無需刷新頁面即可查看數據庫中的更改。 我創建了一個頁面，提取 function 可以工作，但是當它在表格中時，表格功能不起作用。 在表格的底部，它說它顯示了 0 個條目中的 0 個，並且按 function 和 show {limit} function 的排序也不起作用。 這就像表格 div 不讀取里面的數據一樣。

這是我的代碼：

<div class="body" >
    <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover js-basic-example dataTable" >
            <thead>
                <tr>
                    <th width="155">Action</th>
                    <th width="90">LRN</th>
                    <th width="45">Level</th>
                    <th>Name</th>
                    <th width="15">Gender</th>
                    <th width="65">Type</th>
                    <th width="110" style="font-size: 14px!important;">Date Enrolled</th>
                    <th width="40">Card</th>
                </tr>
            </thead>
            <tbody id="live-data">

            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
        $(document).ready( function() {
            function fetch_data() {  
                $.ajax({  
                    url:"fetch.php",  
                    method:"POST",  
                    success:function(data){  
                        console.log(data);
                        $('#live-data').html(data);  
                    }  
                });  
            }
            fetch_data(); 
        });
</script>

這是 fetch.php

<?php 

include('../global/db.php');
$output = ''; 
$query ="SELECT * FROM students WHERE status = '0' ORDER BY date_enrolled DESC";  
$result = mysqli_query($db, $query);

if(mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_array($result)){  
        $date_enrolled = $row['date_enrolled']; 
        $card = $row['card'];
        $stud_birth = $row['stud_birth'];
        $age = date('Y', strtotime($stud_birth)); $year = date('Y '); $age = (int)$age; $year = (int)$year;
        $sage = $year - $age;

        $output .= ' 
            <tr>
                <td>
                    <button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#'.$row['stud_id'].'">
                        <i class="material-icons">search</i>
                        <span>Profile</span>
                    </button>&nbsp;<button type="button" class="btn bg-orange btn-xs waves-effect" data-toggle="modal" data-target="#'.$row['stud_id'].''.$row['stud_id'].'">
                        <i class="material-icons">search</i>
                        <span>Approve</span>
                    </button>
                </td>
                <td>'.$row['stud_lrn'].'</td>
                <td>'.$row['stud_grade'].'</td>
                <td>'.$row['stud_lname'].', '.$row['stud_fname'].' '.$row['stud_mname'].'</td>
                <td>'.$row['stud_gender'].'</td>
                <td>'.$row['stud_type'].'</td>
                <td style="font-size: 12px!important;">'.$date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled)).'</td>
                <td>';
                if ($card == "") {                                          
                    $output .= ' 
                    <center>N/A</center>';
                }

                else {
                    $output .= ' 
                    <center><a target="_blank" href="../image-gallery/20.jpg" data-sub-html="Demo Description">
                    <img class="img-responsive" src="../image-gallery/thumb/thumb-20.jpg" style="width: 70px; height: 35px;"></a></center>';
                }
                $output .= '    
                </td>
            </tr>';
    }
}

else {  
    $output .= '
            <tr>  
                <td colspan="4">Data not Found</td>  
            </tr>';  
}  

echo $output;  

?>

Answer 1

我認為您正在使用 dataTable jquery 庫。 問題是它使用數據表的方式不正確。 您需要從后端輸出 json 格式，例如

{
  "data": [
[
  "Tiger Nixon",
  "System Architect",
  "Edinburgh",
  "5421",
  "2011/04/25",
  "$320,800"
],
[
  "Garrett Winters",
  "Accountant",
  "Tokyo",
  "8422",
  "2011/07/25",
  "$170,750"
],  

}

不要忘記使用 {data:[]} object

然后只需在 ajax 中使用

$(document).ready(function() {
  $('#live-data').DataTable( {
    "ajax": 'fetch.php'
  } );
} ); 

更多... https://datatables.net/examples/data_sources/ajax.html