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

Question

我对 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,
        });


    },
}

重新初始化表时，我得到：“未捕获的类型错误：无法读取未定义的属性‘长度’”

出了什么问题？

Answer 1

我的问题是我将 <td> 附加到 <tbody> 而不是 <tr>