title: How can i display MYSQL Data using DataTables using While Loop
body: <p>How can i display Data from MYSQL table using DataTables
    I tried  but Top part shown me
   <a href="https://i.stack.imgur.com/Rsj32.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rsj32.png" alt="enter image description here"></a></p>
  
  <p>Bottom Shows Records from MYSQL table.</p>
  
  <p>I want DataTables to read Mysql data display as shown in the picture below</p>
  
  <p><a href="https://i.stack.imgur.com/45xwK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/45xwK.png" alt="enter image description here"></a></p>
  
  <p>//bottstrap html code</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
              &lt;div class="dataTable_wrapper"&gt;
                  &lt;table class="table table-striped table-bordered table-hover" id="dataTables-example"&gt;
                         &lt;thead&gt;
                            &lt;tr&gt;
                              &lt;th&gt;Brand Name&lt;/th&gt;
                               &lt;th&gt;Size&lt;/th&gt;
                            &lt;/tr&gt;
                           &lt;/thead&gt;
  </code></pre>
  
  <p>// php</p>
  
  <pre><code>       $record = mysqli_query($con,"SELECT * FROM ts127 ORDER BY Manufacturer");
      while ($row = mysqli_fetch_array($record)) {
  
         if()
           {
           }
         elseif ($row['field1']==$XXX) 
  {   
       echo'&lt;table style="table-layout:fixed;" class="table table-striped table-bordered table-hover" id="dataTables-example"&gt;';
       // When i remove the above table code works fine for the first record or first row but other listed as a normal text
                  echo "&lt;tr'&gt;";                 
                    echo "&lt;td style=' width:150px;  text-align:left; padding: 10px;vertical-align: middle;'&gt;";echo $row['Brand_Name'];echo"&lt;/td&gt;";
                    echo "&lt;td style='width:110px;  text-align:left; vertical-align: middle;'&gt;";echo $row['Size'];"&lt;/td&gt;";
                         ....
  
      echo '&lt;tr/&gt;&lt;/tbody&gt;&lt;/table&gt;';
   }
  </code></pre>
  
  <p>//JS Code</p>
  
  <pre><code>  &lt;script&gt;
  $(document).ready(function() {
      $('#dataTables-example').DataTable({
              responsive: true
      });
  });
  &lt;/script&gt;
  </code></pre>