Twitter Bootstrap Question posted in

DataTable controls aren't displaying properly-Twitter bootstrap

I’m trying to add DataTables to my webpage, but the DataTable isn’t displaying as expected. In order to troubleshoot the issue, I copied the key contents into another PHP file (see code below) and it seems that it an error occurs whenever data is displayed into the table using the SELECT SQL query.

PHP code where it displays incorrectly. 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 code where it displays correctly. 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>

What’s wrong with the first set of code?

Tags:

2

Answers


  1. 0

    You are loading datatable js before Jquery library in PHP code page.

    Load js and css in below order, it should work.

    <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>
    Login or Signup to reply.
  2. 0

    Problem inside <tbody></tbody> code. You have added more <td> then <th>.
    You have to remove all <td style = "display:none">. You have 6 header and every row must contain exactly same number of <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search