Table controls do not work

konsyr11

Link to test case: https://acmeplugins.cf/demo/masswhitelist/application/all_apps.php
Debugger code (debug.datatables.net): ujetup
Error messages shown: None
Description of problem: All datatable controls are gone. This includes pagination, sorting, search etc. I remember it working, and I have never touched the JavaScript files, I have left them how they came with the template I am using. I do not understand why it just broke, and how. I have checked all dependencies, tried changing the table ID, confirmed that answered questions did not fix the problem. I shall note that the table is pulling data from MySQL using PHP (snippet attached below), and bServerSide is set to false.
Table code snippet:

<!-- DataTables -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Pending Applications</h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered" id="example" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th>ID</th>
            <th>Skin</th>
            <th>Minecraft Username</th>
            <th>Timestamp</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>ID</th>
            <th>Skin</th>
            <th>Minecraft Username</th>
        <th>Timestamp</th>
            <th>Status</th>
        <th>Actions</th>
          </tr>
        </tfoot>
        <tbody>
          <?php
            while ($row = mysqli_fetch_array($query)) {?>
              <tr>
                <td><?php echo $row['id'];?></td>
                <td style="text-align:center"><img src="https://minotar.net/helm/<?php echo $row['username'];?>/50.png"/></td>
                <td><?php echo $row['username'];?></td>
                <td><?php echo $row['application_time'];?></td>
                <td><?php echo $row['status'];?></td>
        <td style="text-align:center"><a class="btn btn-primary" href="#<?php echo $row['id'];?>" data-toggle="modal" application-id="<?php echo $row['id'];?>" data-target="#viewModal">View</a></td>
              </tr>
          <?php  } ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

Thanks in advance!

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

konsyr11

Hello, I have linked to a test case in the original post, but I just realized I made a typo in the link and it points to a 404...
The link is https://acmeplugins.cf/demo/masswhitelist/panel/all_apps.php

kthorngren

I'm guessing this loads your Datatables initialization JS code:

<!-- Page level custom scripts -->
  <script src="js/demo/datatables-demo.js"></script>

That page is not loading. You will need to look at the server to determine why its not loading.

Kevin

konsyr11

Thanks for replying, that file was missing for some reason, it somehow got lost through the versions. Now it is back there and is still not working... The link I supplied above is the demo page which runs on a hosting service. As it worked in the past, I don't believe it's an issue with the actual server. I also have a development LAMP stack locally, on which it doesn't work either. Any ideas?

kthorngren

Your demo app still seems to be reporting a 404 error for js/demo/datatables-demo.js. Does this file contain your Datatables initialization code?

If not then please point us to were the initialization script resides.

Kevin

konsyr11

The file is there, you can see yourself at https://acmeplugins.cf/demo/masswhitelist/panel/js/demo/. It contains the following:

// Call the dataTables jQuery plugin
$(document).ready(function() {
  $('#dataTable').DataTable();
});

In my development environment the file shows up (doesn't give a 404), but it still won't work...

kthorngren

For some reason when I load your page the response to loading js/demo/datatables-demo.js is a 302 Redirect to a 404 message:

If I click on the link I' redirected to https://infinityfree.net/errors/404/ .

If I click on the link for this:

<!-- Custom scripts for all pages-->
  <script src="js/sb-admin-2.min.js"></script>

Which is in the same js path it opens the file. I've cleared my browser's cache to make sure. Open your page in the browser and View the Source. At the bottom of the page is this:

<!-- Page level custom scripts -->
  <script src="js/demo/datatables-demo.js"></script>

Click the link to see what result you get.

Kevin

konsyr11

I can see the problem myself, I will look into it. Let me just note that on my local server the file is there and can be opened, but the datatables are still broken.

kthorngren

Opened your example again and typed $('#dataTable').DataTable(); into the console and the Datatable initialized:

You will need to look at your server to diagnose why the scripts aren't being loaded properly.

Kevin

konsyr11

Thank you, it appears to be working on my development server, however it still 404s on the demo page. I will contact my hosting provider for that. Your help is very much appreciated!!