javascript - How to make DataTable show only after everything has rendered - Stack Overflow

admin管理员组

文章数量:1431018

I'm just starting out with js, and developed this code for a 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();

});

This works well, but the thing is that when the page is opened, the DataTable is shown as raw without the rendering/formatting. For example, for the Logo column, for which I define the rendering as:

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

when the page opens, it still shows the url text in each cell - and not the images already rendered. How can I make it so that the table is only shown after all the js code for rendering/formatting has finished running?

I'm just starting out with js, and developed this code for a 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();

});

This works well, but the thing is that when the page is opened, the DataTable is shown as raw without the rendering/formatting. For example, for the Logo column, for which I define the rendering as:

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

when the page opens, it still shows the url text in each cell - and not the images already rendered. How can I make it so that the table is only shown after all the js code for rendering/formatting has finished running?

• javascript
• jquery
• datatables

Share Improve this question Follow edited Apr 12, 2019 at 17:46 chazsolo 8,56411 gold badge2424 silver badges4545 bronze badges asked Apr 12, 2019 at 16:57 Filipe AleixoFilipe Aleixo 4,26266 gold badges5151 silver badges8181 bronze badges 6

• How is initial table generated? Can't you put the <img> tags in then? – charlietfl Commented Apr 12, 2019 at 17:03
• datatables/reference/option/initComplete – zod Commented Apr 12, 2019 at 17:05
• @charlietfl the data is ming in simple HTML from Python and then wrapped inside the DataTable – Filipe Aleixo Commented Apr 12, 2019 at 17:06
• So is the only issue the images? If you put those <img> in html source they would load much quicker as the js doesn't need to run for the requests to get made – charlietfl Commented Apr 12, 2019 at 17:08
• 1 The initComplete callback linked above could be used to hide a loading indicator and show the table – charlietfl Commented Apr 12, 2019 at 17:16

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

Can able to see the same issue in their actual samples as well. One way could be to hide the table on the initial load on html itself as below,

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

And show a progress on the fnPreDrawCallback show progress and hide it once the initpleted and also show the actual table on that event itself for better experience.

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

Hope it helps.

you can hide use

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

when you render it. Or hide it someother way.

then

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

after you render the imgs

本文标签： javascriptHow to make DataTable show only after everything has renderedStack Overflow