无法设置属性'_DT_CellIndex'

Question

我正在动态填充数据表，使用javascript解析json并填充表中的数据但是当我执行它时，我看不到搜索栏和其他组件。当我检查页面时，我得到了这个错误： 无法设置未定义的属性'_DT_CellIndex'

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
    at Ja (datatables.min.js:76)
    at N (datatables.min.js:68)
    at HTMLTableRowElement.<anonymous> (datatables.min.js:68)
    at jquery-3.1.1.min.js:2
    at Function.map (jquery-3.1.1.min.js:2)
    at r.fn.init.map (jquery-3.1.1.min.js:2)
    at oa (datatables.min.js:68)
    at e (datatables.min.js:144)
    at HTMLTableElement.<anonymous> (datatables.min.js:145)
    at Function.each (jquery-3.1.1.min.js:2)

这是我的js函数：

// construction du data table
var reports = getReportsByProject(getListReports());
var datajs;
window.onload = createReportTable(reports);

function createReportTable(Reports) {
    var newtbody = document.createElement('tbody');
    var value = "";
     for (var i = 0; i < Reports.length; i++) {
        for ( property in Reports[i] ) {
            var contenu ='';
            var contenu =contenu+ '<tr class="gradeA">' + '<td rowspan='+eval("Reports[i]."+property).length+'><strong>'+property+
             '</strong></td>';
            for (var j = 0; j < eval("Reports[i]."+property).length; j++) {
              console.log(eval("Reports[i]."+property+"["+j+"]"));
              contenu = contenu  + '<td><strong>' + eval("Reports[i]."+property+"["+j+"]").companyName
                + '</strong></td>' + '<td><strong>' + eval("Reports[i]."+property+"["+j+"]").reference
                + '</strong></td>' + '<td><strong>' + eval("Reports[i]."+property+"["+j+"]").reference + '</strong></td>' +
                '</tr>';
            }  
                value = value + contenu;
            }
    } 
    newtbody.innerHTML = value;
    document.getElementById('tableReports').appendChild(newtbody);
}

function reportsTable(obj,n) {
    var contenu = "";
    contenu = '<tr class="gradeA" >' + '<td rowspan='+n+'><strong>' + obj.acronym
    + '</strong></td>' + '<td><strong>' + obj.companyName
            + '</strong></td>' + '<td><strong>' + obj.reference
            + '</strong></td>' + '<td><strong>' + obj.reference + '</strong></td>' +
            '</tr>';
    return contenu; 
}

function getReportSingleValue() {
    var value = "";
    var url = "/pmnweb3/mvc/reports/getReports";
    jQuery.ajax({
        type : 'GET',
        url : url,
        async : false,
        contentType : "application/json",
        dataType : 'json',
        success : function(json) {
            datajs = json; // needs to match the payload (i.e. json must have
                            // {value: "foo"}
            value = json;
        },
        error : function(e) {
            console.log("jQuery error message = " + e.message);
        }
    });
    return value;
}

function getListReports() {
    var i = getReportSingleValue();
    return i.items;
}

function getReportsByProject(data) {
    var groups = Object.create(null);

    for (var i = 0; i < data.length; i++) {
        var item = data[i];

        if (!groups[item.project["acronym"]]) {
            groups[item.project["acronym"]] = [];
        }

        groups[item.project["acronym"]].push({
            reference : item.reference,
            acronym : item.project["acronym"],
            companyName:item.application["companyName"]
        });
    }

    var result = [];

    for ( var x in groups) {
        var obj = {};
        obj[x] = groups[x];
        result.push(obj);
    }
    return result;
}
console.log(getReportsByProject(getListReports()));
function getAppsByProject() {
    var i = getReportSingleValue();
    return i.items;
}

这是我表中的jsp部分：

<div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                            <h5>All projects</h5>
                            <div class="ibox-tools">
                            <button class="btn btn-primary btn-xs" data-toggle="modal" type="button" title="Create new project" 
                            data-target="#myAdProjectModal" onclick="getCurrentDate();">Create new project</button>
                            </div>
                        </div>
                    <div class="ibox-content">

                        <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover dataTables-example" id="tableReports">
                    <thead>
                    <tr>
                        <th style="text-align: center;">Projet</th>
                        <th style="text-align: center;">Application</th>
                        <th style="text-align: center;">Rapport</th>
                        <th style="text-align: center;">Etat</th>

                    </tr>
                    </thead>                
                    </table>
                        </div>

                    </div>
                </div>
            </div>
            </div>
        </div>