Bootstrap Datatable绑定问题

Question

我正在使用现有表创建数据表。

这是我的代码：

Loaddata: function () {
    var table = $('#main-table');
    var row = "";
    var count = 0;
    $.ajax({
        type: "GET",
        url: apicall,
        beforeSend: CommonJS.BeforeSendAjaxCall,
        processdata: OPVConfig.ProcessData,
        contentType: "application/json; charset=utf-8",

        success: function (data) { //getting object array
            if (data !== null) {

                $.each(data.Data, function (key, val) {      //creating table from api responce
                    row = "<tr class=clickable - row data-href='/'" +
                        "<td scope=row>" + CommonJS.checkNull(val.containercode) + "</td>" +
                        "<td>" + val.Streetname + val.Housenumber + val.city + "</td> " +
                        "<td>" + CommonJS.checkNull(val.Zipcode) + "</td> " +

                        "<tr>";
                    $("#main-table").append(row); //append the row 
                });

                $("#main-table").dataTable();

            }
        },
        error: function (xhr, status, error) {
           //do error stuff here
        },
        complete: function () {

             //do complete stuff here


        }
    });
}

数据获取和表数据填充正常工作，但数据表不工作，控制台出现错误：

  

“未捕获的TypeError：无法读取未定义的属性'length'”