title: Why html loads completely before loading datatable?
body: <p>For downloading button I had refer page:
  <a href="https://www.datatables.net/extensions/buttons/examples/initialisation/export.html" rel="nofollow noreferrer">https://www.datatables.net/extensions/buttons/examples/initialisation/export.html</a></p>
  
  <p>For server side I had refer page:
  <a href="https://datatables.net/examples/data_sources/server_side.html" rel="nofollow noreferrer">https://datatables.net/examples/data_sources/server_side.html</a></p>
  
  <p>I had refer above page for making datatable to get data from database and download in different format. But the main problem is it first load the html table. after completely loading html table it shows the datatable which is noticeable for large no of rows. I have to get large no of rows to show in datatable and export the file in excel. Can anyone help me how can i load datatable without loading html table.   </p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- for button --&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"&gt;
  &lt;!-- for button --&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table id="example" class="display nowrap" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th style="text-align: center;"&gt;Model No&lt;/th&gt;
                    &lt;th style="text-align: center;"&gt;BIll NO&lt;/th&gt;
                    &lt;th style="text-align: center;"&gt;Name Of Party&lt;/th&gt;
                    &lt;th style="text-align: center;"&gt;Bill Miti&lt;/th&gt;
                    &lt;th style="text-align: center;"&gt;Invoice Date&lt;/th&gt;  
                    &lt;th style="text-align: center;"&gt;IMEI No&lt;/th&gt; 
                    &lt;th style="text-align: center;"&gt;Price&lt;/th&gt; 
                    &lt;th style="text-align: center;"&gt;&lt;div id="section_notTo_Print"&gt; &lt;a href="#"&gt; Edit &lt;/a&gt;&lt;/div&gt;&lt;/th&gt;         
                  &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
       &lt;?php
      include 'dbconnect.php';
                  //get records from database
                  $query = $con-&gt;query("SELECT * FROM salesreport ORDER BY id DESC");
                  if($query-&gt;num_rows &gt; 0){ 
                       while($row = $query-&gt;fetch_assoc()){ ?&gt; 
                  &lt;tr&gt;
                    &lt;td style="text-align: center;"&gt;&lt;?php echo $row['modelno']; ?&gt;&lt;/td&gt;
                    &lt;td style="text-align: center;"&gt;&lt;?php echo $row['billno']; ?&gt;&lt;/td&gt;
                    &lt;td style="text-align: center;"&gt;&lt;?php echo $row['nameOfParty']; ?&gt;&lt;/td&gt;
                    &lt;td style="text-align: center;"&gt;&lt;?php echo $row['billMiti']; ?&gt;&lt;/td&gt;
                    &lt;td style="text-align: center;"&gt;&lt;?php echo $row['invoiceDate']; ?&gt;&lt;/td&gt;
                    &lt;td style="text-align: center;"&gt;&lt;?php echo $row['IMEINo']; ?&gt;&lt;/td&gt;
                    &lt;td style="text-align: center;"&gt;&lt;?php echo $row['price']; ?&gt;&lt;/td&gt;
  
                    &lt;td style="text-align: center;"&gt;&lt;div id="section_notTo_Print"&gt; &lt;a href="edit_saleList.php?id=&lt;?php echo $row['id']; ?&gt;"&gt;Edit&lt;/a&gt; &lt;/div&gt;&lt;/td&gt;
                     &lt;!-- &lt;td&gt;&lt;?php //echo $row['Quantity']; ?&gt;&lt;/td&gt; --&gt;
                    &lt;!-- &lt;td&gt;&lt;?php //echo ($row['status'] == '1')?'Active':'Inactive'; ?&gt;&lt;/td&gt; --&gt;
                  &lt;/tr&gt; 
                  &lt;?php } }else{ ?&gt;
                  &lt;tr&gt;&lt;td colspan="5"&gt;No distributor found.....&lt;/td&gt;&lt;/tr&gt;
                  &lt;?php } ?&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;!-- for exporting --&gt;
  
  
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
  $('#example').DataTable( {
      "processing": true,
       // "serverSide": true,
       // "ajax": "datatable2.php",
      dom: 'lBfrtip',
      buttons: [
          {
              extend: 'collection',
              text: 'Export',
              buttons: [
                  'copy',
                  'excel',
                  'csv',
                  'pdf',
                  'print'
              ]
          }
      ]
  } );
  } );
  
  &lt;/script&gt;
  &lt;!-- for exporting --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>