DataTable not working in Flask app

MightyModest

I'm using Flask to build a web app and am struggling to get the DataTable to load. The data for the table itself is loading in to a Bootstrap styled table, but the search and paging at the bottom are not appearing. I'm wondering if it has anything to do with the template inheritance feature in Flask (I'm using a layout.html to store header and footer information and letting most pages, including the one I'm trying to add the table to, inherit from that). I'm also using Jinja2, and wondering if that might also be a culprit?

Here is what's in the head section of the layout (which the page in question inherits from):

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

and the footer:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="{{url_for('static', filename='js/scripts.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>

My linked JS file:

$(document).ready(function () {
    $('#datatable').DataTable();
});

and the HTML of the table itself:

<h3 class="pt-5">Latest Surge Alerts</h3>
                <h5 class="text-secondary mb-3">via GO API</h5>
                <table class="table table-striped table-sm" id="datatable">
                  <thead class="text-danger">
                    <tr>
                      <th scope="col">Event</th>
                      <th scope="col">Position</th>
                      <th scope="col">Alert Date</th>
                      <th scope="col">Location</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for alert in surge_alerts %}
                    <tr>
                      <td class="fw-bold align-middle"><a href="https://go.ifrc.org/emergencies/{{alert.event_go_id}}" class="text-dark">{{alert.event_name}}</a></td>
                      <td class="align-middle">{{alert.role_profile}}</td>
                      <td class="align-middle">{{alert.alert_date}}</td>
                      {% if alert.alert_status == "active" %}
                      <td class="align-middle text-center">✓</td>
                      {% else %}
                      <td class="align-middle">{{alert.location}}</td>
                      {% endif %}
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>

Again, the table itself above loads fine with the right data, but none of the DataTable features appear.

What am I missing?

colin

At a glance, everything looks fine. Are you seeing any console errors? If you can link to your page we can take a look and see if the libraries are loaded. It might also be worth trying the debugger.

Colin

MightyModest

hey Colin, thanks for taking a look. I ran the debugger and got: "15 tests complete. No failures or warnings found!"

The site is still just in a virtual environment on my machine, but I've shared the code on GitHub if someone has time to look at it, I'd appreciate it!

https://github.com/JonathanGarro/SIMS-Portal-Neo

kthorngren

Most of the time when the Datatable features don't appear there is an error on the page. Are you getting any alert messages or errors in the browser's console?

Kevin

MightyModest

Hey Kevin, I forgot to mention in my last response - yes I did get the following errors:

• ReferenceError: Can't find variable: $ (Global Code - dashboard:327)
• ReferenceError: Can't find variable: bootstrap (Global Code - script.js:5
• TypeError: $("#alert").fadeTo is not a function. (In "$("#alert") .fadeTo(500, 0)', "$("#alert") .fadeTo' is undefined)
  f (anonymous function) - scripts.js:2

Not sure about the first one. The second isn't clear to me, as all of the bootstrap elements are loading fine. And the last one also doesn't make sense, as that is meant to help bootstrap alert pop ups I've set up for messages, and those are functioning fine.

Thanks again for helping troubleshoot!

kthorngren

I suspect that the errors are stopping the Javascript before it gets to the Datatables initialization. You can verify this by putting a debugger breakpoint on the $('#datatable').DataTable(); statement to see if it executes. Or use a console.log statement just before $('#datatable').DataTable();. Probably need to fix those errors in scripts.js.

Kevin

MightyModest

Turned out to be the scrollSpy variable within the Javascript file, part of a Bootstrap-related animation. Thank you very much for your help!