时间戳

首页 > 解决方案 > DataTable 控件未正确显示

php - DataTable 控件未正确显示

问题描述

我正在尝试将 DataTables 添加到我的网页，但 DataTable 未按预期显示。为了解决这个问题，我将关键内容复制到另一个 PHP 文件中（见下面的代码），似乎每当使用 SELECT SQL 查询将数据显示到表中时就会发生错误。

PHP 代码显示不正确。有关上下文，请参阅此图像。

    <?php
    include 'includes/config.inc.php';
    ?>

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta meta name="viewport" content ="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content ="ie=edge">
      <title>Troubleshoot page</title>
    </head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>



    <body>

      <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
          <tr>
            <th>Theme</th>
            <th>Visual Idea</th>
            <th>Caption</th>
            <th>Date</th>
            <th>Visual</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <?php
          $table  = mysqli_query($conn ,"SELECT * FROM content WHERE uidCompany='" . $_SESSION[ "userCid" ] . "'");
          while($row  = mysqli_fetch_array($table)){ ?>
            <tr id="<?php echo $row['uidContent']; ?>">
              <td style = "display:none" data-target="uidContent"><?php echo $row['uidContent']; ?></td>
              <td width="200" data-target="themeContent"><?php echo $row['themeContent']; ?></td>
              <td width="300" data-target="visualIdeaContent"><?php echo $row['visualIdeaContent']; ?></td>
              <td width="600" data-target="captionContent"><?php echo $row['captionContent']; ?></td>
              <td width="100" data-target="dateContent"><?php echo $row['dateContent']; ?></td>
              <td><img src="<?php echo $row['visualContent']; ?>"width="100"/></td>
              <td style = "display:none" width="100" data-target="linkContent"><?php echo $row['linkContent']; ?></td>
              <td style = "display:none" width="100" data-target="visualContent"><?php echo $row['visualContent']; ?></td>
              <td width="170">
                <a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”&gt;Link</a>
                <a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
                <a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
              </td>
            </tr>
          <?php }
          ?>
        </tbody>
      </table>

    </body>

    <script>
    $(document).ready(function() {
        $('#example').DataTable();
    } );
    </script>



    </html>

正确显示的 PHP 代码。有关上下文，请参阅此图像。

<?php
$title = "My Calendar";
include 'includes/config.inc.php';
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta meta name="viewport" content ="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content ="ie=edge">
  <title>Title</title>
</head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

<body>
  <table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
      <tr>
        <th>Theme</th>
        <th>Visual Idea</th>
        <th>Caption</th>
        <th>Date</th>
        <th>Visual</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This is</td>
        <td>Some Example</td>
        <td>Data</td>
        <td>2019-08-08</td>
        <td>image here</td>
        <td>
          <a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”&gt;Link</a>
          <a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
          <a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
        </td>
      </tr>
      <tr>
        <td>This is</td>
        <td>Some More</td>
        <td>Sample Data</td>
        <td>2019-08-08</td>
        <td>image here</td>
        <td>
          <a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”&gt;Link</a>
          <a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
          <a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
        </td>
      </tr>
      <tr>
        <td>This is</td>
        <td>Another row</td>
        <td>Of sample data</td>
        <td>2019-08-08</td>
        <td>image here</td>
        <td>
          <a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”&gt;Link</a>
          <a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
          <a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
        </td>
      </tr>
    </tbody>
  </table>

</body>

<script>
$(document).ready(function() {
  $('#example').DataTable();
} );
</script>



</html>

第一组代码有什么问题？

标签： phpdatatable

解决方案

代码内部的问题<tbody></tbody>。你已经添加了<td>更多<th>。您必须删除所有<td style = "display:none">. 您有 6 个标题，每行必须包含完全相同数量的<td>.

<tbody>
  <?php
  $table  = mysqli_query($conn ,"SELECT * FROM content WHERE uidCompany='" . $_SESSION[ "userCid" ] . "'");
  while($row  = mysqli_fetch_array($table)){ ?>
    <tr id="<?php echo $row['uidContent']; ?>">
      <td width="200" data-target="themeContent"><?php echo $row['themeContent']; ?></td>
      <td width="300" data-target="visualIdeaContent"><?php echo $row['visualIdeaContent']; ?></td>
      <td width="600" data-target="captionContent"><?php echo $row['captionContent']; ?></td>
      <td width="100" data-target="dateContent"><?php echo $row['dateContent']; ?></td>
      <td><img src="<?php echo $row['visualContent']; ?>"width="100"/></td>
      <td width="170">
        <a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" rel=“external”&gt;Link</a>
        <a class="badge badge-success p-2 text-white" href="#" data-toggle="modal" data-target="#updatePostModal" data-role="update" data-id="<?php echo $row['uidContent']; ?>">Edit</a>
        <a class="badge badge-danger p-2" role="button" href="includes/action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>
      </td>
    </tr>
  <?php }
  ?>
</tbody>

推荐阅读