Table functions doesn't work when using ajax

Question

So I've been using php for a while now but recently, I've decided to use ajax so I can view live data and I don't have to refresh the page to see changes in the database. And I created a page and the fetch function works but when it's in the table, the table functions doesn't work. At the bottom of the table it says it's showing 0 out of 0 entries and the sort by function and the show {limit} function doesn't work either. It's like somehow the table div doesn't read the data inside.

Here's my code:

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

Here's 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

I think you are using dataTable jquery library. Problem is its not right way to use datatabe. you need a json format out from backend like as

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

}

Don't forget to warp with {data:[]} object

after then simply use in ajax

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

For more... https://datatables.net/examples/data_sources/ajax.html