jQuery数据表不适用于动态生成的html表

Question

我正在尝试将jquery dattable应用于动态生成的html表。但它不起作用。我正在这样做..

    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;
    }

在准备好文档中，我正在调用这些功能

           $(document).ready(function() {
                 buildHtmlTable();
                var dtOptions = {
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "bInfo": false,
                bJQueryUI: true              
            }

            var dt = $("#example").dataTable(dtOptions);
            } );

html占位符是这样的

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

正在显示HTML表格。但是数据表的效果即将到来。

Answer 1

看来是因为您的标头定义。 您错过了thead 。

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

同样，在myList数组的末尾（在数组中的最后一个对象之后）还有一个,这不是有效的语法。

演示： 小提琴 。

对于datatable插件，标题行应在中指定 元件