javascript - 如何使DataTable仅在所有内容都呈现后才显示

Question

我刚刚开始使用 js，并为 DataTable 开发了这段代码

$(document).ready(function() {
  var table = $('#T_coin_list').DataTable({
    dom: 'Blfrtip',
    iDisplayLength: 100,
    lengthMenu: [
      [50, 100, -1],
      [50, 100, "All"]
    ],
    order: [
      [4, "desc"]
    ],
    buttons: [
      'copyHtml5',
      'excelHtml5',
      'csvHtml5',
      'pdfHtml5'
    ],
    columnDefs: [{
        targets: [0, 1],
        className: 'dt-head-left'
      },
      {
        targets: [2, 3, 4, 5, 6, 7, 8],
        className: 'dt-head-center'
      },
      {
        targets: [2, 3],
        className: 'dt-body-center'
      },
      {
        targets: 0,
        data: "Logo",
        render: function(data, type, row) {
          return '<img src="' + data + '" height="30" width="30" />';
        }
      },
      {
        width: "3%",
        targets: 0
      },
      {
        width: "15%",
        targets: 1
      },
      {
        width: "7%",
        targets: 2
      },
      {
        width: "10%",
        targets: [3, 4, 5, 6, 7, 8]
      },
      {
        targets: 0,
        searchable: false,
        orderable: false
      },
      {
        type: "natural",
        targets: [3, 4, 5, 6, 7, 8]
      }

    ]
  });

  $(table.column(0).header()).text('');



  function replaceNans(item, index) {
    table.column(item).nodes().each(function(node, index, dt) {
      if (table.cell(node).data() == 'nan') {
        table.cell(node).data('---------------');
      }
    });
  }

  var numbers = [4, 5, 6, 7, 8];
  numbers.forEach(replaceNans)


  $($.fn.dataTable.tables(true)).DataTable()
    .columns.adjust();

});

这很好用，但问题是当页面打开时，DataTable 显示为原始数据，没有渲染/格式化。例如，对于Logo列，我将其渲染定义为:

{
  targets: 0,
  data: "Logo",
  render: function(data, type, row) {
  return '<img src="'+data+'" height="30" width="30" />'; }
},

当页面打开时，它仍然在每个单元格中显示网址文本 - 而不是已经渲染的图像。如何才能使表格仅在所有用于渲染/格式化的 js 代码运行完成后才显示？

Answer 1

在实际样本中也能看到同样的问题。一种方法可能是在 html 本身的初始加载时隐藏表格，如下所示，

<table id="T_coin_list" style="display:none" border="0" class="display cell-border nowrap compact">

并在 fnPreDrawCallback 上显示进度，并在初始化完成后隐藏它，并显示该事件本身的实际表格以获得更好的体验。

"fnPreDrawCallback":function(){
  $("#progress").show();
  //alert("Pre Draw");
},
"fnInitComplete":function(){
  $("#T_coin_list").show();
  $("#progress").hide();
  //alert("Completed");
}

希望有帮助。