Javascript 当引导模式窗口完全加载而没有异步问题时，如何加载DataTable jQuery插件？

我目前正在使用Bootstrap v4.4.1和该插件的nodejs Bootstrap版本：

require('datatables.net-bs4')(window, $);
require('datatables.net-colreorder-bs4')(window, $);
require('datatables.net-fixedheader-bs4')(window, $);

首先，我加载引导模式窗口html内的表中的所有行。所有这些操作都是同步的，所以我看不出有任何问题。每个函数

get.*

只需使用jQuery添加节点元素

for (var i = 0; i < cols.length; i++) {
    var col_name = cols[i];
    var name = self.get_col_name(col_name);
    var data_type = self.get_data_type(col_name)
    var attrs = self.pj_cols[col_name]['attrs'].join(', ');  // TODO: translate to icons or extract just some of them?
    var cb_export = self.get_cb_export(i, col_name);
    var sel_cur_prec = self.get_cur_prec(col_name);
    var txt_cur_unit = self.get_txt_cur_unit(col_name);
    var set_bt = self.get_set_bt(col_name, i);

    var tr = $('<tr>');
    tr.append(
        $('<td>', {html: cb_export }),
        name,
        $('<td>', {html: data_type }),
        $('<td>', {text: attrs }),
        $('<td>', {html: sel_cur_prec }),
        $('<td>', {html: txt_cur_unit }),
        $('<td>', {html: set_bt })
    );
    $('#table_column_project tbody').append(tr);
}

最后，我运行

DataTable（）

函数来转换DataTable中的表

$('#column_project_win').on('shown.bs.modal', function (e) {
    $('#table_column_project').DataTable( {
        scrollY: 400,
        scrollCollapse: true,
        paging: false,
        searching: true,
        ordering: true,
        order: [[ 1, 'asc' ]],
        info: false,
        columnDefs: [
            { targets: '_all', visible: true, },
            { targets: [6], orderable: false, searchable: false, },
            { targets: [0, 2, 4, 5, 6], type: 'html'}
        ],
        initComplete: function () {
            // initially the div which is a containter has opacity 0
            $('#div_column_project').animate({ opacity: 1, }, { duration: 100, });
        },
    });
});

这是工作得很好，只是有时。通常，行永远不会出现，数据表会显示以下消息：

No matching records found

有没有更好的方法来避免这个异步问题？我之所以说异步，是因为它显然是随机的

我也尝试过添加这个hack，但没有很好的效果。我认为问题在于DataTable调用中删除了表行

var _check_loaded_rows = setInterval(function() {
    if ($('#table_column_project tbody tr').length == cols.length) {  // check if all rows are correctly loaded
        clearInterval(_check_loaded_rows);
        $('#table_column_project').DataTable( {  // TODO: show only when rendered
            scrollY: 400,
            scrollCollapse: true,
            paging: false,
            searching: true,
            ordering: true,
            order: [[ 1, 'asc' ]],  // this is the value by default
            info: false,
            columnDefs: [
                { targets: '_all', visible: true, },
                { targets: [6], orderable: false, searchable: false, },
                { targets: [0, 2, 4, 5, 6], type: 'html'}
            ],
            initComplete: function () {
                $('#div_column_project').animate({ opacity: 1, }, { duration: 100, });
            },
        });
    }
}, 100);

实际上，现在我有了一个

setTimeout

，它有500毫秒的延迟，可以很好地工作

---

我还阅读了海报建议我们应该使用引导版本的地方，表格应该初始化（我使用

不透明度
来隐藏它，而不是
显示：无；
）为了显示数据表，我使用内置方法
initComplete
运行指令来设置不透明度。
如果只有几百行，为什么不使用API在
initComplete
中插入它们呢？您可以将API传递给另一个函数（例如使用您已经用来填充的
get.*
方法的函数（不清楚它是否是函数））：

函数填充（api）{
对于（变量i=0；i

或者，您可以使用承诺并在模式事件处理程序中等待：

函数填充（）{
返回新承诺（解决=>{
...
如果（i+1==cols.length）解析（）
})
}
$（“#column_project_win”）.on（'show.bs.modal'，函数（e）{
填充（）。然后（（）=>{
$（“#表#列#项目”）。数据表（{
...
})
})
})

如果您的NodeJ（旧版本）中没有可用的Promise，您可以使用例如
es6 Promise
和

const Promise=require（'es6-Promise'）。Promise
谢谢我喜欢在
initComplete
中添加元素的解决方案。由于一些元素是html代码，我不得不用
sel\u cur\u prec.prop（'outerHTML'）
添加它们。遗憾的是，我仍然有同样的问题，
initComplete
函数可能有问题，我不知道hey@ChesuCR你能设置一个小提琴来复制这个问题吗？这里是一个起点->@ChesuCR，我回家后再做！
var _check_loaded_rows = setInterval(function() {
    if ($('#table_column_project tbody tr').length == cols.length) {  // check if all rows are correctly loaded
        clearInterval(_check_loaded_rows);
        $('#table_column_project').DataTable( {  // TODO: show only when rendered
            scrollY: 400,
            scrollCollapse: true,
            paging: false,
            searching: true,
            ordering: true,
            order: [[ 1, 'asc' ]],  // this is the value by default
            info: false,
            columnDefs: [
                { targets: '_all', visible: true, },
                { targets: [6], orderable: false, searchable: false, },
                { targets: [0, 2, 4, 5, 6], type: 'html'}
            ],
            initComplete: function () {
                $('#div_column_project').animate({ opacity: 1, }, { duration: 100, });
            },
        });
    }
}, 100);