仅在页面上初始化多个数据表时，才会发生错误

问题描述

我试图在一页上有2个数据表。

但是，我不是在一个函数调用中初始化它们。

我要在单独的函数调用中对其进行初始化。

我制作了一个如下所示的javascript函数：

function initialize_datatable(args) {
    generate_footer(args.table_selector);
    $(args.table_selector).DataTable({
        columns: args.columns,order: args.order,scrollX: true,...
        ...

是否无法两次调用此方法？

我是否需要将多个表合并为一个.DataTable()初始化？例如。 $('#table-one #table-two #table-three').DataTable()？

每当我尝试分别对.DataTable()进行两次调用时，都会出现以下错误：

Uncaught TypeError: Cannot set property 'nTf' of undefined。如果您使用Google这个错误，则表示发生此错误是因为页眉和页脚中元素的数量不同。我已经在页眉页脚中计算了<th>个元素，它们是相同的数字。

我可以初始化一个表或另一个表，但不能同时初始化两个表，所以我知道多次调用.DataTable()

是个问题

这是initialize_datatable的完整定义：

function initialize_datatable(args) {
    generate_footer(args.table_selector);
    $(args.table_selector).DataTable({
        columns: args.columns,sScrollXInner: "100%",dom: "Blfrtip",buttons: [
            {
                extend       : 'copyHtml5',title        : args.title,sheetName    : args.title,footer       : true,exportOptions: {
                    columns: ':visible'
                }
            },{
                extend       : 'excelHtml5',{
                extend       : 'csvHtml5',{
                extend       : 'print',text         : 'Print',autoprint    : true,stripHtml    : false,exportOptions: {
                    columns: ':visible',}
            }
        ],drawCallback: function () {
            let api = this.api();

            // hide columns that add up to 0
            api.columns().every(function (i) {
                let sum = this.data().sum();
                if (sum === 0 && typeof sum === 'number' && i !== 0) {
                    api.column(i).visible(0);
                }
            });
        },footerCallback: function (row,data,start,end,display) {
            let api = this.api()

            intVal = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g,'')*1 :
                    typeof i === 'number' ?
                        i : 0;
            }

            api.columns({page: 'current'}).every(function (i) {
                let columnTotal = this.data().reduce(function (a,b) {
                    return intVal(a) + intVal(b);
                },0);

                if (!isNaN(columnTotal)) {
                    columnTotal = Intl.NumberFormat('en-US',{style: 'currency',currency: 'USD'}).format(columnTotal);
                    $(this.footer()).html(columnTotal);
                }
            })
        }
    });
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）