javascript - 如何让php输入后运行js？

Question

我尝试将数据表添加到我的网站，但我有一个问题，即在完成包含 HTML 和 PHP 的输入后，代码将不会应用 js 代码。这是我的 js 代码:

$(document).ready(function() {
$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for '+data[0]+' '+data[1];
                }
            } ),
            renderer: function ( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                    return '<tr>'+
                            '<td>'+col.title+':'+'</td> '+
                            '<td>'+col.data+'</td>'+
                        '</tr>';
                } ).join('');

                return $('<table class="table"/>').append( data );
            }
        }
    }
} );
} );

这是我的 html 代码:

<thead>
        <tr>
            <th>STT</th>
            <th>Tên sản phẩm</th>
            <th>Ngày sản xuất</th>
            <th>Mã sản phẩm</th>
            <th>Vị trí lắp đặt</th>
            <th>Chủng loại</th>
            <th>Nhóm</th>
            <th>Dự án</th>
            <th>Nhà sản xuất</th>
            <th>Miêu tả sản phẩm</th>
            <th>Lỗi</th>
            <th>Cấp độ</th>
            <th>Miêu tả lỗi</th>
            <th>Người khắc phục</th>
            <th>Thời gian khắc phục</th>
            <th>Chi tiết lỗi</th>
            <th style="width:1%; text-align:center">Hành động</th>
        </tr>
    </thead> 
    <tbody>

这是 php 代码

$stt= 1;
    $sql= "SELECT * from fixed ORDER BY sta ASC, level ASC";
    //thuc hien cau lenh voi bien conn lay tu file connection.php
    $query= mysqli_query($conn, $sql);
    while ($data=mysqli_fetch_array($query)){
?>
    <tr>
        <td scope="row"><?php echo $stt++?></td>
        <td><?php echo $data["ten_sp"]?></td>
        <td><?php echo $data["ngay_sx"]?></td>
        <td><?php echo $data["ma_sp"]?></td>
        <td><?php echo $data["vitrilapdat"] ?></td>
        <td><?php echo $data["chungloai"] ?></td>
        <td><?php echo $data["nhom"] ?></td>
        <td><?php echo $data["d_an"] ?></td>
        <td><?php echo $data["nhasx"] ?></td>
        <td><?php echo $data["mieuta"] ?></td>
        <td><?php echo $data["loi"] ?></td>
        <td>
            <?php
            if($data["level"] == 1){
                echo '<p style="color: red;">Khẩn cấp</p>';
            }else if($data["level"] == 2){
                echo '<p style="color: #00b300;">Quan trọng</p>';
            } else if($data["level"] == 3){
                echo '<p style="color: #0000cc;">Cần lưu ý</p>';
            }
                        ?>  
        </td>
        <td><?php echo $data["mieutaloi"] ?></td>
        <td><?php echo $data["nguoikhacphuc"] ?></td>
        <td><?php echo $data["thoigian"] ?></td>
        <td><?php echo $data["chitiet"] ?></td>
        <td><a href="prod_fixed_editinfo.php?id=<?php echo $data["id"]?>" class="btn btn-info btn-sm" role="button">
            <?php 
            if($data["sta"] == 1){

                    echo "Un-read";
                    }else{
                        echo "Read";
                        } ?></a></td>

        <td><a href="prod_fixed_delete.php?id=<?php echo $data["id"]?>" class="btn btn-danger btn-sm" role="button">Xóa</a></td>
    </tr>
    <?php
    }
    ?>

这是我得到的结果:

我想要这样的结果:

这是这张图片的代码:(与第一张图片相同的js和样式)

<thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
            <th>Extn.</th>
            <th>E-mail</th>
            <th>Extn.</th>
            <th>E-mail</th>
            <th>Extn.</th>
            <th>E-mail</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
             <td>5421</td>
            <td>t.nixon@datatables.net</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
             <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>
        <tr>
            <td>Vivian</td>
            <td>Harrell</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
            <td>9422</td>
            <td>v.harrell@datatables.net</td>
            <td>9422</td>
            <td>v.harrell@datatables.net</td>
             <td>5421</td>
            <td>t.nixon@datatables.net</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
             <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td>Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
            <td>5384</td>
            <td>m.bruce@datatables.net</td>
            <td>9422</td>
            <td>v.harrell@datatables.net</td>
             <td>5421</td>
            <td>t.nixon@datatables.net</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
             <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>
        <tr>
            <td>Donna</td>
            <td>Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
            <td>4226</td>
            <td>d.snider@datatables.net</td>
            <td>9422</td>
            <td>v.harrell@datatables.net</td>
             <td>5421</td>
            <td>t.nixon@datatables.net</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
             <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>
    </tbody>

我认为这里的问题是从 php 代码输入所有信息后，js 代码将无法运行，但我不知道如何解决这个问题，你能帮忙吗？

Answer 1

1/首先再检查一下元素id#example，有没有，一定是这样的:

<table id="example">

 <thread>
  <tr>
   <th></th>
  </tr>      
 </thread>

 <tbody>
  <tr>
   <td></td>
  </tr>      
 </tbody>

</table>

2/其次，确保将DataTable js的链接添加到页面中，路径正确，例如:

<link href="css/dataTables.bootstrap.css" rel="stylesheet">

<link href="css/dataTables.responsive.css" rel="stylesheet">

<script src="js/jquery.dataTables.min.js"></script>

<script src="js/dataTables.bootstrap.min.js"></script>

<script src="js/yourscript.js"></script>

3/第三，尝试去掉php代码，创建一个正常的表，看看js能不能工作..？