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配列の最後 (配列内の最後のオブジェクトの後) には,、有効な構文ではない a があります。

デモ:フィドル.

データテーブル プラグインの場合、ヘッダー行はエレメント

于 2013-02-06T07:18:15.793 に答える