时间戳

首页 > 解决方案 > 使用 ajax 时表函数不起作用

php - 使用 ajax 时表函数不起作用

问题描述

所以我使用 php 已经有一段时间了，但最近，我决定使用 ajax，这样我就可以查看实时数据，而不必刷新页面来查看数据库中的更改。我创建了一个页面并且 fetch 函数可以工作，但是当它在表中时，表函数不起作用。在表格的底部，它说它显示了 0 个条目中的 0 个，并且按函数排序和 show {limit} 函数也不起作用。这就像表格 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;  

?>

标签： phphtmlajax

解决方案

我认为您正在使用 dataTable jquery library 。问题是它使用数据表的方式不正确。您需要从后端输出 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

推荐阅读