jquerydjangoherokudatatables

Datatables causes table element to disappear, only when deployed

I have a Django web app which I'm hosting on Heroku, and I'm using the Datatables JQuery library to add extra features to a table. When I run my app locally, it works beautifully. When I deploy on Heroku, the JQuery function that loads the Datatable instead causes the table to disappear. There are no errors in the console and nothing different in the Network tab than when I run locally. I'm thinking that it might be some kind of configuration problem with Heroku, even though Datatables is client-side? Any advice would be appreciated.

I know that the JS script is running because I can print things to the console. I also know that it's specifically the creation of the Datatable that causes the problem, because if I include a setTimeout call, the table appears (in default HTML format) until the timeout ends and the function gets called.

Some excerpts - from table.js:

$('#ads').DataTable( {
        autoWidth: false,
        tabIndex: -1,
        pageLength: 100,
        stateSave: true,
        order: [[3, 'desc']],
        columnDefs: [{ orderable: false, targets: 2 },
                     { render: $.fn.dataTable.render.number(',', '.', 0, '$', ''), targets: 3 },
                     { searchPanes: { show: true }, targets: $(location).attr('pathname')=='/review/all' ? [0, 1, 4] : [0, 1] },
                     { searchPanes: { show: false }, targets: [2, 3]},
                     { tabIndex: -1, targets: [0]} ],
        language: {
            searchPanes: {
                collapse: { 0: 'Filters', _: 'Filters (%d)' },
                clearMessage: 'Remove filters'
            },
            emptyTable: "No ads available.",
            zeroRecords: "No results found."
        },
        layout: {
            top1Start: {
                buttons: [
                    {
                        extend: 'colvis',
                        columns: ':not(.noVis)',
                        popoverTitle: 'Column visibility selector',
                        text: 'Columns',
                    },
                    {
                        extend: 'searchPanes',
                        config: {
                            cascadePanes: true,
                            collapse: false
                        },
                    }
                ]},
            top1End: 'pageLength',
            topStart: null,
            topEnd: null
        }
    });

from base.html:

<head>
    {% load bootstrap5 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}
    {% load static %}
    {% load humanize %}

    <script src="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/sp-2.3.1/sl-2.0.3/datatables.js"></script>
    <link href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/sp-2.3.1/sl-2.0.3/datatables.css" rel="stylesheet">
</head>

from index.html:

{% extends "base.html" %}
{% load static %}
<script src="{% static 'table.js' %}" style="display: table"></script>
<table id="ads" class="display">
    <thead>...</thead>
    <tbody>...</tbody>
Solution

  • Solved: it was because of my ad blocker. Figured it out by opening the site in incognito mode. Thanks for the replies everyone.