skip to Main Content

Edit: typos removed, datatables library is working and is applied to table, however the responsive extension (now added with cdn) isn’t working when scaling the window to mobile sizes.

I’m a beginner with datatables and I’m trying to convert my table so that it can be responsive. Initially I got an error which meant I had to add thead and tbody tags, however now I’m getting an internal server error.

<?php
   if(!$_SESSION['loggedin']){
       //User is not logged in
       echo "<h1>Access Denied</h1>";
       echo "<script> window.location.assign('index.php?p=login'); </script>";
       exit;
   }
?>

<div class="card container mt-5">
   <div class="card-body">
       <br><h1 id="RemoveScorecard">Your scorecards:</h1>

       <ul id="scoreTable">
       <?php
           
        echo "<table id='scorecards' border='1' style='width:90%;'>
               <thead>
                   <tr>
                       <th>Scorecard <br>(click number to delete scorecard)</th>
                       <th>Hole 1</th>
                       <th>Hole 2</th>
                       <th>Hole 3</th>
                       <th>Hole 4</th>
                       <th>Hole 5</th>
                       <th>Hole 6</th>
                       <th>Hole 7</th>
                       <th>Hole 8</th>
                       <th>Hole 9</th>
                       <th>Hole 10</th>
                       <th>Hole 11</th>
                       <th>Hole 12</th>
                       <th>Hole 13</th>
                       <th>Hole 14</th>
                       <th>Hole 15</th>
                       <th>Hole 16</th>
                       <th>Hole 17</th>
                       <th>Hole 18</th>
                       <th>Account number</th>
                       <th>Delete?</th>
                   </tr>
               </thead>";
           
       $query = "SELECT * FROM scorecards WHERE user_id = :userid";
       $result = $DBH->prepare($query);
       $result->bindParam(':userid', $_SESSION['userData']['user_id']);
       $result->execute();            
           
       while($row = $result->fetch(PDO::FETCH_ASSOC)) {
               echo "<tbody>";
                   echo "<tr>";
                       echo "<td  style='text-align:center;'>" . $row['scorecard_id']. "</td>";
                       echo "<td>" . $row['place_1_name']. "</td>";
                       echo "<td>" . $row['place_2_name']. "</td>";
                       echo "<td>" . $row['place_3_name']. "</td>";
                       echo "<td>" . $row['place_4_name']. "</td>";
                       echo "<td>" . $row['place_5_name']. "</td>";
                       echo "<td>" . $row['place_6_name']. "</td>";
                       echo "<td>" . $row['place_7_name']. "</td>";
                       echo "<td>" . $row['place_8_name']. "</td>";
                       echo "<td>" . $row['place_9_name']. "</td>";
                       echo "<td>" . $row['place_10_name']. "</td>";
                       echo "<td>" . $row['place_11_name']. "</td>";
                       echo "<td>" . $row['place_12_name']. "</td>";
                       echo "<td>" . $row['place_13_name']. "</td>";
                       echo "<td>" . $row['place_14_name']. "</td>";
                       echo "<td>" . $row['place_15_name']. "</td>";
                       echo "<td>" . $row['place_16_name']. "</td>";
                       echo "<td>" . $row['place_17_name']. "</td>";
                       echo "<td>" . $row['place_18_name']. "</td>";
                       echo "<td>" . $row['user_id']. "</td>";
                       echo "<td>Delete</td>";
                   echo "</tr>";
               echo "</tbody>";
   }
           echo "</table>";
       
       ?>
       </ul>

   </div>
</div>

<script>
   $('#scorecards').DataTable({
              responsive: true
       });
</script>

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

<a href="index.php">Back to homepage</a>

Its hosted with plesk if that helps at all, although the error log file isn’t showing anything.

I’m using a php template for the header which includes the cdn for datatables.

Thanks for any help!

2

Answers


  1. This line is missing a semicolon:
    echo "<tbody>"

    And this line has a > instead of a semicolon:
    echo "</tbody>">

    Those will cause fatal PHP errors, which can show up as "Internal Server Error" depending on the error handling settings.

    Login or Signup to reply.
  2. I use a config object for my tables, you should write CSS rules to the classes you assign to your columns, that way you can control your table via media queries

    let table_configuration = {
            scrollX   : window.innerWidth < 800, //enables scroll on the X axis when screen is less than 800 px
            order: [
                [1, 'desc'] //order table by 2nd column in descent order
            ],
            columnDefs: [
                //order in these definitions is important
                {className: "td-text-center", targets: "_all"},// change targets accordingly and add CSS to make them change via media queries
                {width    : "130px", targets: [0, 3]}, //you can add a default with for one, two, all columns
            ],
            language: language_configuration //this is another config object I use
        };
    

    also useful but completely unrelated, you could try this format

    <table id="x-table" class="x-table display stripe hover cell-border">
            <thead>
                <th>header y</th>
                <th>header z</th>
            </thead>
            <tbody>
                <?php foreach ($x_array as $value): ?>
                    <tr>
                        <td><?= $value['y'] ?></td>
                        <td><?= $value['z'] ?></td>
                    </tr>
                <?php endforeach ?>
            </tbody>
        </table>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search