Как сделать так, чтобы 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 отображается как необработанный без рендеринга / форматирования. Например, для столбца с логотипом, для которого я определяю визуализацию как:

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

при открытии страницы она по-прежнему показывает текст URL в каждой ячейке, а не изображения, которые уже были отрисованы. Как сделать так, чтобы таблица отображалась только после того, как весь код js для рендеринга / форматирования завершился?

Answer 1

Может видеть ту же проблему в их реальных образцах. Одним из способов может быть скрытие таблицы начальной загрузки самого html, как показано ниже:

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

И покажите прогресс на fnPreDrawCallback, покажите прогресс и скройте его после завершения init, а также покажите фактическую таблицу для этого события для лучшего опыта.

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

Надеюсь, это поможет.

Answer 2

вы можете скрыть использование

$("#T_coin_list").hide(); 

при рендеринге.Или скрыть это как-то иначе.

затем

$("#T_coin_list").show(); 

после рендеринга imgs