Question

我正在尝试在动态生成的html table上应用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表正在显示。但是数据表效果是mot来了......我必须修复哪里？

Answer 1

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

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

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

演示：Fiddle。

对于datatable插件，应在元素

中指定标题行

Jquery数据表无法动态生成html表

1 个答案: