How do I use datatables for jquery without server error?

Question

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!

A 500 error/Internal Server Error is a generic error message and covers pretty much every single thing that can go wrong with a PHP script. Check your server error logs to find out the exact error message. However, I can tell you that you have several parse/syntax errors due to missing semi-colons. — aynber
– aynber, Commented May 6, 2021 at 18:53
Hi, yeah sorry, I've edited the post to clarify that the error log isn't showing anything, however it has in the past with other php errors. — LilWegg
– LilWegg, Commented May 6, 2021 at 18:54
If you want your table to be responsive, have you remembered to include the Responsive extension? It's not sufficient just to use responsive: true. See the documentation and use the download page. Also, why is there a semicolon at the end of your responsive: true;? — andrewJames
– andrewJames, Commented May 6, 2021 at 19:09
The semicolon was a typo, I have now included the responsive part in the cdn but to no avail. — LilWegg
– LilWegg, Commented May 6, 2021 at 19:17

Jeremy · Accepted Answer · 2021-05-06 18:56:25Z

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.

answered May 6, 2021 at 18:56

Jeremy

4799 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nigel Ren Over a year ago

This would be more a reason to close the question as typos.

LilWegg Over a year ago

That definately helped, datatables is working now. Any ideas why the table isn't responsive vertically though?

Mike Walker · Accepted Answer · 2021-05-06 19:08:51Z

0

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>

answered May 6, 2021 at 19:08

Mike Walker

513 bronze badges

1 Comment

LilWegg Over a year ago

I use the format you showed, I had just changed the formatting around lots in an attempt to fix it, I was really hoping to get datatables to work but will try your solution if I cann't get it to work soon. Thanks

Collectives™ on Stack Overflow

How do I use datatables for jquery without server error?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related