Javascript Jquery数据表无法处理Dynamicly生成的html表

我试图在动态生成的html表上应用jquery dattable。但它不起作用。我是这样做的

    function buildHtmlTable() {
    var columns = addAllColumnHeaders(myList);
    ////alert("Inserted rows");tp
    for (var i = 0 ; i < myList.length ; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
        var cellValue = myList[i][columns[colIndex]];
        if (cellValue == null) { cellValue = ""; }
        if (colIndex==3)
        {
        cellValue = myList[i][columns[2]]+","+myList[i][columns[3]];
        row$.append($('<td class="cell3" width="100"/>').html(cellValue));
        var quantity=myList[i][columns[1]];
        addMarkeronload(myList[i][columns[2]],myList[i][columns[3]],quantity);
        }
        else if(colIndex!=2)
        row$.append($('<td width="100"/>').html(cellValue));
    }

    $("#example").append(row$);
    }
   // $('#example1').paginate({itemsPerPage: 5});
    ////alert("Inserted rows");
    $('.cell3').each(function(index, element){
    var tn = $(element).text();
    $(element).html('<a onclick=LocateMarker('+tn+',this) href=javascript:void(0);>Locate</a>');
    });
}
        var myList=[{"time" : "abc", "qty" : 150, "price" : 8.504768900000000000, "tot" :76.931176100000010000,"id":12},
            {"time" : "abc", "qty" : 150, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 450, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 250, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 350, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":62},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":42},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":72},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":71},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":10},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":72},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":10},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":71},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":11},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":41},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":11},
            {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12},
            ];


    function addAllColumnHeaders(myList)
    {
        var columnSet = [];
        var headerTr$ = $('<tr/>');

        for (var i = 0 ; i < myList.length ; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
            if ($.inArray(key, columnSet) == -1){
            ////alert(key);
            columnSet.push(key);
            if(key!="price")
            headerTr$.append($('<th/>').html(key));
            }
        }
        }
        $("#example").append(headerTr$);

        return columnSet;
    }

html占位符是这样的

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
      <tbody></tbody></table>

---

Html表正在显示。但是datatable的效果不会出现。我必须修复哪里？

这似乎是因为您的标题定义。您缺少

thead

$('<thead />').appendTo($("#example")).append(headerTr$)

$（''）.appendTo（$（“#示例”）.append（headerTr$）

在

myList

数组的末尾（数组中最后一个对象之后），还有一个

，

，它不是有效的语法

演示：

---

对于datatable plugin，标题行应在元素中用指定

是否有错误？你也可以创建一个JSBin或JSFIDLE来重新创建它吗？不要出错并显示html表格非常感谢你Arun..像你这样的人让这个社区成为天堂..它正在工作..我会正确地测试它并将它标记为答案

$('<thead />').appendTo($("#example")).append(headerTr$)