javascript - 如何使用 While 循环使用 DataTables 显示 MYSQL 数据

Question

如何使用 DataTables 显示 MYSQL 表中的数据 我试过了，但顶部显示给我

底部显示来自 MYSQL 表的记录。

我想让DataTables读取Mysql数据显示如下图

//bottstrap html代码

<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代码

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

Answer 1

你的错误是循环表和 tbody，你应该更加小心打开和关闭 HTML 标签

<?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>';
?>

如果不是，我建议您使用 server-side DataTable