datatable不显示HTML表数据

dataTables not showing HTML table data

本文关键字：数据 HTML 显示 datatable      更新时间：2023-09-26

我有一个HTML表的数组，我在调用数据表之前构建，但我的表中的数据不显示，一旦我进行调用，除非我放置一个警报与代码一行数据表被调用之前。除非我删除'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
        });
    }

尝试document load而不是ready

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

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

asHTML.push("</tr>");
asHTML.push("</table>");
$("#sandBox").html(asHTML.join(''));  // Insert the lists into the DOM
for(var i=0; i<data.SANDBOX.LIST.length; i++) { 
   // ... skipped ...
}

问题已解决。它原来是由以下行引起的:

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

$("#parkingLot").height()返回0。显然，那个元素还没有被渲染，尽管我认为"ready"函数应该已经调和了这一点。

"alert('Stop')"给页面时间来完全渲染元素，然后返回它的真实高度。

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

$('#' + 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.
    }
});
相关文章：