jquery 数据表：“未捕获的类型错误：无法读取未定义的属性‘长度’”在销毁和重新初始化后。表作为数据源

Posted 2023-05-07

【中文标题】jquery 数据表：“未捕获的类型错误：无法读取未定义的属性‘长度’”在销毁和重新初始化后。表作为数据源

【英文标题】：jquery datatables: "Uncaught TypeError: Cannot read property 'length' of undefined" after destroying and reinitializing. Table as data source

【发布时间】：2020-12-16 13:12:43

【问题描述】：

我对 DataTables() 的初始初始化加载了带有服务器端数据表的表。

Data.columns = [];
  $('th').each(function(item,i)
    Data.columns.push('data': $(this).text().trim())
  );

  $('#searchtable').DataTable(
    'serverSide': true,
    'ajax': '/api/v1/reports/?format=datatables',
    'columns': Data.columns
  );

当用户执行自定义（非数据表）搜索时，我向非数据表 api 函数发出 ajax 请求。 api函数发回响应，我做$('#searchtable').DataTables( destroy : true )，表被清除并重新加载新数据，我重新初始化表。

这是加载新的（搜索生成的表）的函数：

Template = 
    fill_search_table : function(data)
        Data.table = $('#searchtable');
        Data.table.html('');

        var $thead = $('<thead/>', );
        var $tbody = $('<tbody/>', );

        var header_values = Object.keys(data[0])

        var $thead_tr = $('<tr/>');

        $thead.append($thead_tr);
        $(header_values).each(function(i, item)
            var $th = $('<th/>', 
                text: item
            )
            $thead_tr.append($th);
        );

        Data.table.append($thead);

        cells = new Array(header_values.length).fill(0);
        $(data).each(function(i, item)
            var $tr = $('<tr/>', );
            $tbody.append($tr);
            
            for(cell in item)
                cell_header_index = header_values.indexOf(cell);
                var $td = $('<td/>', 
                    text: item[cell]
                )
                cells[cell_header_index] = $td; 
            
            $(cells).each(function(j, cell)
                $tbody.append(cell)
            )
        )

        Data.table.append($tbody);
        Data.table.DataTable(destroy: true)
        Data.table.DataTable(
            bPaginate: false,
            bFilter: false,
            bInfo: false,
        );


    ,

重新初始化表时，我得到：“Uncaught TypeError: Cannot read property 'length' of undefined”

出了什么问题？

【问题讨论】：

你到底是从哪里得到这个错误的？我怀疑它是Data.table.append($tbody); - 在这种情况下，您需要先销毁 existing 表，然后再向其中添加新行。

在 .append($tbody) 之前放置破坏会导致“无法重新初始化表”错误。也就是说，我认为该表会重新初始化，但似乎只是部分重新初始化。

@freedomn-m 是的，好像有初始化，但是实际的datatable里没有数据，后面是DOM表里的数据（空第一tbody行，然后是 DOM 表）

【参考方案1】：

我的问题是我将

附加到 而不是