Использование функции footerCAllback в сторонних плагинах( у меня Flyon UI)

Не могу использовать функцию footerCallback в datatable от Flyon UI , имеется такая ошибочка

Uncaught TypeError: Cannot read properties of undefined (reading 'push')

но кажется не только из-за нее

{% load django_vite %}

{% block title %}
Отчет {{ current_report }}
{% endblock %}
{% block content %}
<div class="bg-base-100 border border-base-content/20 rounded-lg p-4 shadow-lg">
<h1>
  {% block title_report %}
  {{ current_report }} отчет за {{ period }} год <span class="text-base-content/50 text-base">(С {{ period_start|date:"d M."}} по {{ period_end|date:"d M." }})</span>
  {% endblock %}
</h1>
</div>
<div class="card card-sm h-full mt-5">
    <div class="card-body ">
        <div id="datatable-with-export" data-datatable='{
            "pageLength": 15,
            "ordering": false,
            "scrollY": "470px",
            "pagingOptions": {
                "pageBtnClasses": "btn btn-text btn-circle btn-sm"
            },
            "layout": {
                "top2": "searchPanes",
                "top1": {
                    "buttons": [
                        {
                            "extend": "copy",
                            "className": "btn btn-primary btn-outline btn-sm",
                            "text": "Копировать"
                        },
                        {
                            "extend": "csv",
                            "className": "btn btn-primary btn-outline btn-sm",
                            "text": "CSV"
                        },
                        {
                            "extend": "excel",
                            "className": "btn btn-primary btn-outline btn-sm",
                            "text": "Excel"
                        }

                    ]
                }
            },
            "searchPanes": {
                "controls": true,
                "layout": "columns-2",
                "cascadePanes": true,
                "initCollapsed": true,
                "i18n": {
                    "collapseMessage": "Скрыть фильтры",
                    "showMessage": "Показать фильтры",
                    "clearMessage": "Сбросить фильтры",
                    "title": "Активные фильтры - %d"
                }
            },
            "columnDefs": [
                {
                    "searchPanes": {
                        "show": true
                    },
                    "targets": [0]
                }, 
                {
                    "searchPanes": {
                        "show": true
                    },
                    "targets": [1]
                },
                {
                    "searchPanes": {
                        "show": false
                    },
                    "targets": [2]
                },
                {
                    "searchPanes": {
                        "show": false
                    },
                    "targets": [3]
                },
                {
                    "searchPanes": {
                        "show": false
                    },
                    "targets": [4]
                }
            ]
        }'>
            <div class="min-h-[460px] overflow-x-auto">
                <div class="min-w-full align-middle">
                    <div class="overflow-hidden [&_th]:text-wrap [&_table]:table">
                      {% autoescape off %}
                      {{ table_data }}
                      {% endautoescape off %}
                    </div>
                </div>
            </div>
            <!-- table pagination -->
            <div
                class="border-base-content/25 flex items-center justify-between gap-3 border-t p-3 max-md:flex-wrap max-md:justify-center">
                <div class="text-base-content/80 text-sm" data-datatable-info="">
                    Строки с
                    <span data-datatable-info-from=""></span>
                    по
                    <span data-datatable-info-to=""></span>
                    из
                    <span data-datatable-info-length=""></span>
                    строк
                </div>
                <div class="flex items-center space-x-1" data-datatable-paging>
                    <button type="button" class="btn btn-text btn-circle btn-sm" data-datatable-paging-prev>
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">Previous</span>
                    </button>
                    <div class="flex items-center space-x-1 [&>.active]:text-bg-soft-primary"
                        data-datatable-paging-pages>
                    </div>
                    <button type="button" class="btn btn-text btn-circle btn-sm" data-datatable-paging-next>
                        <span class="sr-only">Next</span>
                        <span aria-hidden="true">»</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js_footer %}

<script>
    window.addEventListener('load', () => {
        const sumColumns = $("th.column_for_sum");
        // Получение номеров колонок для суммирования
        const columnsIndex = sumColumns.map(function() {
        return $(this).index();
        }).get();

        const panesColumns = $("th.column_for_panes");
        // Получение номеров колонок для searchpanes
        const columnsSearchPanes = panesColumns.map(function() {
        return $(this).index();
        }).get();
        console.log("Колонки для панелей:", columnsSearchPanes);

        // Добавление атрибута к колонке в подвале
        const footerTd = $("tfoot").find("td");
        const columnCount = $("#dataTable thead tr th").length;
        footerTd.attr("colspan", columnCount);
        const { dataTable } = new HSDataTable('#datatable-with-export', {
            footerCallback: function () {
                var api = this.api();
                // Получение имен колонок
                const columnsNames = columnsIndex.map(index => {
                  return api.column(index).header().textContent.trim();
                });
      
                const totals = [];
                const pageTotals = [];
         
                // Преобразование числа до двух знаков после запятой
                var intVal = function (i) {
                  var num = Number((typeof i === 'string' ? parseFloat(i.replace(',', '.')): i).toFixed(2)) || 0;
                    return isNaN(num) ? 0 : num;
                };
         
                // Подсчет сумм(на все страницы, для текущей страницы)
                columnsIndex.forEach((index) => {
                  totals.push(
                    api
                      .column(index)
                      .data()
                      .reduce(function (a, b) {
                          return intVal(a) + intVal(b);
                      }, 0));
      
                  pageTotals.push(
                    api
                    .column(index, { page: 'current' })
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0));
                });
        
                // Обновление подвала
                $(api.column(0).footer()).html(
                  `
                      <div class="grid grid-rows-${columnsIndex.length} gap-2 p-2">
                        ${columnsIndex.map((index, i) => 
                        `
                        <div class="text-left">
                              Итого (${columnsNames[i]}) ${pageTotals[i] } ₽ (${totals[i]} ₽ по всем страницам)
                        </div>
                        `
                        ).join('')}
                  `
                );
            },
            })
    });
      
</script>
{% endblock %}

Вернуться на верх