Question

当我制作一个普通的表（没有php代码）时，它会显示具有所有功能的数据表。但是当我使用php加载我的数据库时，我看到数据表，但没有所有功能。

我做错了什么？刚刚使用了datatables网站的基本javascript代码。

 <!DOCTYPE html>
    <html>
    <head>
       <title>Overzicht Exportzendingen</title>

    <meta charset="utf-8">
    <title>Exportzendingen</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

</head>
<body>
     <nav class="navbar navbar-inverse ">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">Exportzendingen</a>
            </div>
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Overzicht</a></li>
            </ul>
              <a href="invoer.html" class="btn btn-default" >Zending Toevoegen</a>
          </div>
    </nav>   
    <div class="container-fluid">
     <table id="table_id" class="display table table-bordered">
        <thead>
            <tr>
            <th width="2%">ID</th>
            <th width="6%">Debiteur</th>
            <th width="10%">Klantnaam</th>
            <th width="3%">Aantal Pallets</th>
            <th width="3%">Totaal Gewicht</th>
            <th width="30%">PB Nummers</th>
            <th>Edit</th>
        </thead>
        <tbody>
            <!-- Fetch from db -->
            <!-- Connect to db-->>
         <?php
         $conn = mysqli_connect("localhost","root","","export") or die("Error in Connection");

         $query = mysqli_query($conn, "SELECT exportid, deb_nmr, cost_name, numb_pal, tot_weight, pb_s FROM export_tabel");

            while ($result = mysqli_fetch_array($query)) {
                echo "<tr>
                    <td>".$result['exportid']."</td>
                    <td>".$result['deb_nmr']."</td>
                    <td>".$result['cost_name']."</td>
                    <td>".$result['numb_pal']."</td>
                    <td>".$result['tot_weight']."</td>
                    <td>".$result['pb_s']."</td>
                </tr>";
            }

            ?>
        </tbody>
     </table> 
   </div>
            <script>    
                $(document).ready(function(){
            $('#table_id').DataTable();
                });
            </script>

    </body>
    </html>

Answer 1

你的表头有一个额外的列而不是表的其余部分，所以它导致错误，你可能已经看到了JavaScript控制台中的错误，

从表头中删除该额外的列或在其余行中添加适当的信息，这应该可以解决您的问题

Jquery数据表未显示基本功能

1 个答案: