简体   繁体   English

Ajax 表不显示任何内容

[英]Ajax table doesn't show anything

I'm creating a table using ajax and php but there's one problem, the table isn't showing in my div.我正在使用 ajax 和 php 创建一个表,但是有一个问题,该表没有显示在我的 div 中。 I'm really new to ajax so I don't really fully understand it yet.我对 ajax 真的很陌生,所以我还没有完全理解它。

Here's my div:这是我的div:

<div class="body" id="live-data">
</div>

Here's the ajax code:这是 ajax 代码:

$(document).ready( function() {
    function fetch_data() {  
        $.ajax({  
            url:"fetch.php",  
            method:"POST",  
            success:function(data){  
                $('#live_data').html(data);  
            }  
        });  
    }
    fetch_data(); 
});

And here's fetch.php:这是 fetch.php:

<?php

include('../global/db.php');

$output = ''; 
$sql ="SELECT * FROM students WHERE status = '0' AND stud_grade = '$level_id' ORDER BY date_enrolled DESC";  
$result = mysqli_query($db, $sql);  
$output .= '  
<div class="table-responsive">  
    <table class="table table-bordered table-striped table-hover dataTable js-exportable">
        <thead>
            <tr>
                <th width="135" class="noExport">Action</th>
                <th width="90">LRN</th>
                <th width="20">Level</th>
                <th>Name</th>
                <th width="20">Gender</th>
                <th width="60">Type</th>
                <th width="105" style="font-size: 14px!important;">Date Enrolled</th>
            </tr>
        </thead>
        <tbody>';
if(mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_array($result)){ 
        $output .= ' 
            <tr>
                <td>
                    <button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $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="#<?php echo $stud_id ?><?php echo $stud_id ?>">
                        <i class="material-icons">person</i>
                        <span>Parent</span>
                    </button>
                </td>
                <td><?php echo $stud_lrn ?></td>
                <td><?php echo $stud_grade ?></td>
                <td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
                <td><?php echo $stud_gender ?></td>
                <td><?php echo $stud_type ?></td>
                <td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
            </tr>
        ';
    }
}

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

 $output .= '
        </tbody>
    </table>  
</div>';  

echo $output;  

?>

It would great if anyone could help because I just don't know why it doesn't work如果有人可以提供帮助,那就太好了,因为我只是不知道为什么它不起作用

Edit: I've changed the code so it returns the data in the console tab and here's what shows up:编辑:我已经更改了代码,因此它在控制台选项卡中返回数据,这是显示的内容:

<div class="table-responsive">  
    <table class="table table-bordered table-striped table-hover dataTable js-exportable">
        <thead>
            <tr>
                <th width="135" class="noExport">Action</th>
                <th width="90">LRN</th>
                <th width="20">Level</th>
                <th>Name</th>
                <th width="20">Gender</th>
                <th width="60">Type</th>
                <th width="105" style="font-size: 14px!important;">Date Enrolled</th>
            </tr>
        </thead>
        <tbody> 
            <tr>
                <td>
                    <button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $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="#<?php echo $stud_id ?><?php echo $stud_id ?>">
                        <i class="material-icons">person</i>
                        <span>Parent</span>
                    </button>
                </td>
                <td><?php echo $stud_lrn ?></td>
                <td><?php echo $stud_grade ?></td>
                <td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
                <td><?php echo $stud_gender ?></td>
                <td><?php echo $stud_type ?></td>
                <td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
            </tr>

            <tr>
                <td>
                    <button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $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="#<?php echo $stud_id ?><?php echo $stud_id ?>">
                        <i class="material-icons">person</i>
                        <span>Parent</span>
                    </button>
                </td>
                <td><?php echo $stud_lrn ?></td>
                <td><?php echo $stud_grade ?></td>
                <td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
                <td><?php echo $stud_gender ?></td>
                <td><?php echo $stud_type ?></td>
                <td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
            </tr>

            <tr>
                <td>
                    <button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $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="#<?php echo $stud_id ?><?php echo $stud_id ?>">
                        <i class="material-icons">person</i>
                        <span>Parent</span>
                    </button>
                </td>
                <td><?php echo $stud_lrn ?></td>
                <td><?php echo $stud_grade ?></td>
                <td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
                <td><?php echo $stud_gender ?></td>
                <td><?php echo $stud_type ?></td>
                <td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
            </tr>

            <tr>
                <td>
                    <button type="button" class="btn bg-cyan btn-xs waves-effect" data-toggle="modal" data-target="#<?php echo $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="#<?php echo $stud_id ?><?php echo $stud_id ?>">
                        <i class="material-icons">person</i>
                        <span>Parent</span>
                    </button>
                </td>
                <td><?php echo $stud_lrn ?></td>
                <td><?php echo $stud_grade ?></td>
                <td><?php echo $stud_lname ?>, <?php echo $stud_fname ?> <?php echo $stud_mname ?></td>
                <td><?php echo $stud_gender ?></td>
                <td><?php echo $stud_type ?></td>
                <td style="font-size: 12px!important;"><?php echo $date_enrolled = date("M-d-Y g:i A", strtotime($date_enrolled));?></td>
            </tr>

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

So it clearly returns the correct data but it just doesn't show up in the live-data div所以它清楚地返回了正确的数据,但它只是没有出现在实时数据 div 中

Maybe take a look in your html where is your div.也许看看你的 html 你的 div 在哪里。 Your div id says "live-data" and in the ajax code you mentioned to fetch data for div id "#live_data" instead of "#live-data".您的 div id 显示为“live-data”,并且在 ajax 代码中您提到为 div id“#live_data”而不是“#live-data”获取数据。 Maybe changing them for same name can solve your problem.也许将它们更改为相同的名称可以解决您的问题。 I would use for thr div id and in the ajax same id names like "#liveData".我将使用 thr div id 和 ajax 相同的 id 名称,如“#liveData”。

Example (same code, just edited to the right IDs, compare with your original):示例(相同的代码,只是编辑为正确的 ID,与您的原始代码进行比较):

Your HTML div你的 HTML div

<div class="body" id="liveData">
</div>

Your ajax code您的 ajax 代码

$(document).ready( function() {
    function fetch_data() {  
        $.ajax({  
            url:"fetch.php",  
            method:"POST",  
            success:function(data){  
                $('#liveData').html(data);  
            }  
        });  
    }
    fetch_data(); 
});

Just append the correct Id of the div tag in sucess function只是 append 成功的 div 标签的正确 ID function

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM