DataTable控件显示不正确

时间：2019-08-09 04:02:31

标签： php datatable

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

PHP代码显示不正确的地方。 See this image for context. 

    <?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”>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代码正确显示的位置。 See this image for context. 

<?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”>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”>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”>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>

第一组代码有什么问题？

2 个答案:

答案 0 :(得分：1)

<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”>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>

答案 1 :(得分：0)

您正在在PHP代码页中的Jquery库之前加载数据表js。

按以下顺序加载js和CSS，它应该可以工作。

<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>
相关问题
最新问题