Datatables приводит к исчезновению элемента таблицы, только при развертывании
У меня есть веб-приложение Django, которое я размещаю на Heroku, и я использую библиотеку Datatables JQuery для добавления дополнительных функций к таблице. Когда я запускаю приложение локально, оно прекрасно работает. Когда я разворачиваю приложение на Heroku, функция JQuery, которая загружает Datatable, приводит к исчезновению таблицы. В консоли нет никаких ошибок, а на вкладке "Сеть" ничего не изменилось по сравнению с локальным запуском. Я думаю, что это может быть какая-то проблема с конфигурацией в Heroku, хотя Datatables работает на стороне клиента? Буду признателен за любой совет.
Я знаю, что JS-скрипт запущен, потому что я могу выводить данные в консоль. Я также знаю, что проблема заключается именно в создании Datatable, потому что если я включаю вызов setTimeout, таблица появляется (в формате HTML по умолчанию) до тех пор, пока таймаут не закончится и не будет вызвана функция.
Некоторые выдержки - из файла 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
}
});
из файла base.html:
<head>
<title>Ad Dove</title>
{% 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>
из 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>