0

我正在尝试在动态生成的 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;
    }

在准备好文档时，我正在调用这些函数

           $(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 表格正在显示。但数据表效果即将到来..我必须修复哪里？

4

1 回答 1

1

这似乎是因为您的标题定义。你失踪了thead。

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

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

演示：小提琴。

对于数据表插件，标题行应在元素

于 2013-02-06T07:18:15.793 回答