Question

我在调用dataTables之前构建了一个HTML表格数组，但是一旦我打电话，我的表格中的数据就不会显示，除非我在调用dataTables之前放置了与代码一致的警报。代码工作正常，除非我删除'alert（“Stop”）;'线。以下是我的代码摘录：

    // Code above builds HTML table contents

asHTML.push("</tr>");
asHTML.push("</table>");

$("#sandBox").html(asHTML.join(''));  // Insert the lists into the DOM


$(document).ready(function() {
alert("Stop");
    for(var i=0; i<data.SANDBOX.LIST.length; i++) {

        $('#' + data.SANDBOX.LIST[i].LIST_ID).DataTable({
        autoWidth: false,
        "columnDefs": [
                {   // Hide the 'Assigned' Column
                    "targets": [0],
                    "visible": false,
                    "orderable": false
                },
                {   // No sort on this column
                    "targets": [1],
                    "width": "1em",
                    "orderable": false
                },
                {   // No sort on this column
                    "targets": [2],
                    "orderable": false
                },
                {   // No sort on this column
                    "targets": [3],
                    "orderable": false
                }

        ],
        "paging":   false,
        "info":     false,
        "bFilter":  false,
        "scrollY": $("#parkingLot").height() - 50
        });
    }

Answer 1

尝试加载文档而不是准备好

$(document.body).load(function() {
//alert("Stop");
....

Answer 2

完全删除ready事件处理程序，不需要它。

"clean": "rm -rf dist"

Answer 3

问题已经解决。结果是由以下行引起的：

  "scrollY": $("#parkingLot").height() - 50

$（＆＃34;＃parkingLot＆＃34;）。height（）返回0.显然该元素尚未呈现，尽管我认为＆＃34;准备好了＃34;功能会调和。

＆＃34;提醒（＆＃39;停止＆＃39;）＆＃34;给页面时间完全渲染元素，然后它返回它的真实高度。

Answer 4

我认为您可以在DataTable的scrollY事件中执行initComplete。您的元素将在此函数中呈现并可用。

$('#' + data.SANDBOX.LIST[i].LIST_ID).DataTable({
    autoWidth: false,
    "columnDefs": [
            {   // Hide the 'Assigned' Column
                "targets": [0],
                "visible": false,
                "orderable": false
            },
            {   // No sort on this column
                "targets": [1],
                "width": "1em",
                "orderable": false
            },
            {   // No sort on this column
                "targets": [2],
                "orderable": false
            },
            {   // No sort on this column
                "targets": [3],
                "orderable": false
            }

    ],
    "paging":   false,
    "info":     false,
    "bFilter":  false,
    initComplete: function (settings, json) {
        //do your stuff here, when everything is fully initialised and data loaded.

    }
});

dataTables不显示HTML表数据

4 个答案: