CODEWITHSUNDEEP
javascriptjquerydatatables
Filipe Aleixo
Filipe Aleixo

Reputation: 4244

How to make DataTable show only after everything has rendered

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?

Upvotes: 0

Views: 6428

Answers (2)

Sivaprasath
Sivaprasath

Reputation: 400

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 compact">

And show a progress on the fnPreDrawCallback show progress and hide it once the initcompleted 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.

Upvotes: 4

zach
zach

Reputation: 72

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

Upvotes: 0

Related Questions