How can i display MYSQL Data using DataTables using While Loop

Question

How can i display Data from MYSQL table using DataTables I tried but Top part shown me

Bottom Shows Records from MYSQL table.

I want DataTables to read Mysql data display as shown in the picture below

//bottstrap html code

<div class="panel-body">
            <div class="dataTable_wrapper">
                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                       <thead>
                          <tr>
                            <th>Brand Name</th>
                             <th>Size</th>
                          </tr>
                         </thead>

// php

       $record = mysqli_query($con,"SELECT * FROM ts127 ORDER BY Manufacturer");
    while ($row = mysqli_fetch_array($record)) {

       if()
         {
         }
       elseif ($row['field1']==$XXX) 
{   
     echo'<table style="table-layout:fixed;" class="table table-striped table-bordered table-hover" id="dataTables-example">';
     // When i remove the above table code works fine for the first record or first row but other listed as a normal text
                echo "<tr'>";                 
                  echo "<td style=' width:150px;  text-align:left; padding: 10px;vertical-align: middle;'>";echo $row['Brand_Name'];echo"</td>";
                  echo "<td style='width:110px;  text-align:left; vertical-align: middle;'>";echo $row['Size'];"</td>";
                       ....

    echo '<tr/></tbody></table>';
 }

//JS Code

  <script>
$(document).ready(function() {
    $('#dataTables-example').DataTable({
            responsive: true
    });
});
</script>

Answer 1

You mistake was looping the table and tbody, you should be more careful about opening and closing the HTML tags

<?php
$record = mysqli_query($con,"SELECT * FROM ts127 ORDER BY Manufacturer");
echo'<table style="table-layout:fixed;" class="table table-striped table-bordered table-hover" id="dataTables-example">';
    echo '<thead>';
        echo '<tr>';
            echo '<th>Brand Name</th>';
            echo '<th>Size/th>';
        echo '</tr>';
    echo '</thead>';
    echo '<tbody>';
    while ($row = mysqli_fetch_array($record)) {
        if (($row['field1']==$XXX || $row['field1']==$YYY ) && ($row['field2']>=$field1sw && $row['field1']<=$largesw) && ($txtbrand != "" && $size1=="" && $row['field2'] != "" && $row['Brand_Name']!="") ) 
        {   
            echo "<tr'>";                 
                echo "<td style=' width:150px;  text-align:left; padding: 10px;vertical-align: middle;'>";echo $row['Brand_Name'];echo"</td>";
                echo "<td style='width:110px;  text-align:left; vertical-align: middle;'>";echo $row['Size'];"</td>";
                   ....
            echo '</tr>';
        }
    }
    echo '</tbody>';
echo '</table>';
?>

if NOT, I would recommend you to use server-side DataTable

Answer 2

Update this

echo '<tr/></tbody></table>';

To be

echo '</tr>';

Then close the tbody, and table tag outside while loop