Табличные функции не работают при использовании ajax

Question

Итак, я уже некоторое время использую php, но недавно я решил использовать ajax, чтобы просматривать текущие данные, и мне не нужно обновлять страницу sh, чтобы увидеть изменения. в базе данных. И я создал страницу, и функция извлечения работает, но когда она находится в таблице, табличные функции не работают. В нижней части таблицы написано, что он показывает 0 из 0 записей, функция сортировки по функциям и функция show {limit} также не работают. Похоже, таблица как-то не читает данные внутри.

Вот мой код:

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

Вот выборка. 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: []}

просто используйте в ajax

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

Подробнее ... https://datatables.net/examples/data_sources/ajax.html