How to fix "Uncaught TypeError: Cannot read property 'style' of undefined" error in jQuery DataTables?

Question

JavaScript

The DataTables plugin throws an error:

Uncaught TypeError: Cannot read property 'style' of undefined

Googled for a long time, the main answer is the number of columns in thead and tbody do not match .
I xs, maybe I'm super stupid and I didn't count correctly from the 10th time, maybe the problem is different.
The second most popular answer is the wrong order of scripts .
I'm already fucked up and I'm sure that somewhere there is a stupid game that I did not notice.
Why? Because on another page, similar code works. All that has changed is cycles, but according to the DOM, everything looks normal.
I tried to initialize one class at a time, and jQuery.each, and different dynamic id-shnikam - all garbage, misha!

Here is the cycle and the table itself (specially through id, damn it!):

{% for category, ads in ads_roots.items %}
    <h5 class="mb-3">{{ category }}</h5>
    <div class="mb-5">
        <table id="table{{ forloop.counter0 }}" class="table table-hover table-bordered w-100 text-center">
            <thead class="bg text-white font-weight-bold">
                <tr>
                    <th colspan="3">Объявление</th>
                    <th class="d-none d-md-table-cell" data-toggle="tooltip" data-placement="top" title="Сортировать">Дата</th>
                    <th data-toggle="tooltip" data-placement="top" title="Сортировать">Статус</th>
                    <th data-toggle="tooltip" data-placement="top" title="Сортировать">Цена</th>
                </tr>
            </thead>
            <tbody>
                {% for ad in ads %}
                    <tr class="align-middle">
                        <td class="align-middle stars-customized to-favorite" data-adid="{{ ad.id }}" style="width: 30px">
                            <i class="fas fa-star"></i>
                        </td>
                        <td class="align-middle p-0" style="width: 120px" data-href="/{{ ad.slug }}/">
                            <img src="{{ ad.img }}" alt="{{ ad.img_alt }}">
                        </td>
                        <td class="col" data-href="/{{ ad.slug }}/">
                            <div class="overflow-hidden" style="height: 80px">
                                <span style="line-height: 80px">
                                    {{ ad.name|truncatechars:59 }}
                                </span>
                            </div>
                        </td>
                        <td class="align-middle d-none d-md-table-cell" data-href="/{{ ad.slug }}/">
                            {{ ad.date|date:"d.m.y" }}
                        </td>
                        <td class="align-middle" data-href="/{{ ad.slug }}/">
                            {% if ad.status == 'active' %}
                                Активно
                            {% else %}
                                Завершено
                            {% endif %}
                        </td>
                        <td class="align-middle" data-href="/{{ ad.slug }}/">
                            {{ ad.price|floatformat:2 }}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endfor %}

Here is the script (specially through id 0 and 1, since 2 elements! + setTimeout, in case the problem is still in the DOM):

$(function() {
    setTimeout(function () {
        var t1 = $('#table0');
        var t2 = $('#table1');
        console.log(t1, t2);
        $(t1).DataTable({
            "info": false,
            "language": {
                "decimal": ",",
                "thousands": ".",
                "lengthMenu": "Показывать _MENU_ записей на странице",
                "zeroRecords": "Ничего не найдено",
                "info": "_PAGE_/_PAGES_",
                "search": "Поиск:",
                "loadingRecords": "Загрузка...",
                "processing":     "Загрузка...",
                "infoEmpty": "Нет объявлений",
                "infoFiltered": "(отфильтровано из _MAX_ объявлений)",
                "paginate": {
                    "next":       "Далее",
                    "previous":   "Назад"
                },
            }
        });
        console.log(t1, t2);
        $(t2).DataTable({
            "info": false,
            "language": {
                "decimal": ",",
                "thousands": ".",
                "lengthMenu": "Показывать _MENU_ записей на странице",
                "zeroRecords": "Ничего не найдено",
                "info": "_PAGE_/_PAGES_",
                "search": "Поиск:",
                "loadingRecords": "Загрузка...",
                "processing":     "Загрузка...",
                "infoEmpty": "Нет объявлений",
                "infoFiltered": "(отфильтровано из _MAX_ объявлений)",
                 "paginate": {
                    "next":       "Далее",
                    "previous":   "Назад"
                },
            }
        });
    }, 2000);
});

Here is the final DOM of the scripts:


Here is the error: Here is the


screenshot:


crashes at the initialization stage of the first.

Answer 1

Found a solution. As it turns out , you can't use colspan unless you have at least 2 thead rows , i.e. colspan only applies to complex headers.

...
<thead class="bg text-white font-weight-bold">
    <tr class="d-none">
        <th></th>
        <th></th>
        <th></th>
        <th class="d-none d-md-table-cell"></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th colspan="3">Объявление</th>
        <th class="d-none d-md-table-cell" data-toggle="tooltip" data-placement="top" title="Сортировать">Дата</th>
        <th data-toggle="tooltip" data-placement="top" title="Сортировать">Статус</th>
        <th data-toggle="tooltip" data-placement="top" title="Сортировать">Цена</th>
    </tr>
</thead>
...

columnDefs: [
    { orderable: false, targets: [ 0, 1, 2 ] }
]

Thank you WhiteBearDev , although I did not move in right away.