Блог

Главная - Вопросы по программированию - Как сделать отображение данных только после того, как все отрисовано

Как сделать отображение данных только после того, как все отрисовано

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

Я только начинаю с 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();

});

Это работает хорошо, но дело в том, что при открытии страницы таблица данных отображается как необработанная без рендеринга / форматирования. Например, для столбца логотипа, для которого я определяю рендеринг как:

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

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

Комментарии:

1. Как генерируется начальная таблица? Разве вы не можете вставить <img> теги тогда?

2. datatables.net/reference/option/initComplete

3. @charlietfl данные поступают в простой HTML из Python, а затем помещаются в DataTable

4. Итак, единственная проблема с изображениями? Если вы поместите их <img> в исходный код html, они будут загружаться намного быстрее, поскольку js не нужно запускать для выполнения запросов

5. Обратный вызов InitComplete, связанный выше, может использоваться для скрытия индикатора загрузки и отображения таблицы

Ответ №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");
}

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

Ответ №2:

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

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

когда вы его отрисовываете. Или скрыть это другим способом.

затем

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

после отрисовки изображений