如何在 Bootstrap 模式 window 完全加载时加载 DataTable jQuery 插件而不会出现异步问题？

Question

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

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

首先，我加载 Bootstrap 模态 window 的 html 内的 table 中的所有行。所有这些操作都是同步的，所以我在这里看不到任何问题。每个函数 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);
}

然后我通过点击按钮触发并显示它以编程方式加载模态window

$('#modal_column_project').click();

最后我运行 DataTable() 函数将 table 转换为 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, });
        },
    });
});

这有时效果很好。通常，行永远不会出现并且 DataTable 显示消息：

No matching records found

有没有办法更好地避免这种异步问题？我说异步是因为显然是随机的。

我也试过添加这个 hack，但没有很好的效果。我认为问题出在删除了 table 行的 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 毫秒以使其正常工作。

我也看过发帖者建议我们应该使用bootstrap版本，应该初始化table（我用opacity来隐藏它，而不是 display: none;) 并显示 DataTable 我使用内置方法 initComplete 到运行设置不透明度的指令。

Answer 1

如果您只有几百行，为什么不使用 initComplete 中的 API 插入它们？您可以将 API 传递给另一个函数（例如使用您已经使用的 get_* 方法填充的函数（不清楚它是否是一个函数））：

function populate(api) {
  for (var i = 0; i < cols.length; i++) {
    ...
    api.row.add([cb_export, name, data_type, attrs, sel_cur_prec, txt_cur_unit, set_bt])
  }
  api.draw/()
}

$('#table_column_project').DataTable({
  ...
  initComplete: function() {
    const api = this.api()
    populate(api)
  }
})

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

function populate() {
  return new Promise(resolve => {
    ...
    if (i+1 === cols.length) resolve()
  })
}

$('#column_project_win').on('shown.bs.modal', function (e) {
  populate().then(() => {
    $('#table_column_project').DataTable( {
      ...
    })
  })
})

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

const Promise = require('es6-promise').Promise

如何在 Bootstrap 模式 window 完全加载时加载 DataTable jQuery 插件而不会出现异步问题？

How to load the DataTable jQuery plugin when a Bootstrap modal window is completely loaded without getting asynchronous issues?

javascript

datatable

jquery

twitter-bootstrap

bootstrap-modal