создание данных для php кодов с bootstrap 4

Question

привет, я создал базу данных, чтобы загрузить мои данные, отсортировать их и использовать функцию поиска, но она не работает. Я пробовал это 5 дней, и я застрял здесь, я не знаю, что мне не хватает или что я сделал неправильно, это мои коды, если кто-нибудь может мне помочь, я был бы благодарен

<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">

    <thead style="color:black;" >
    <th>id</th>
    <th>Product</th>
    <th>Price</th>
    <th>Weight</th>
    <th>Image</th>
    <th>Type</th>
    <th>Type 2</th>
    </thead>

    <?php

        $get = mysqli_query($conn,"SELECT * FROM products;");
    ?>
        <tbody>
<?php
        while ($row=mysqli_fetch_array($get)) {
            $id=$row['product_id'];
            $name=$row['product_name'];

            $type2=$row['product_type'];
            $weight=$row['weight'];
            $price=$row['product_price'];

            $type=$row['type'];
            $img=$row['img'];

        $get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");

        while ($row1 = mysqli_fetch_assoc($get1)):
            $p=$row1['price'];
            $newprice = $p*$weight;
        ?>
        <td><?php echo $id;?></td>
        <td><?php echo $name;?></td>
        <td>$<?php echo $newprice;?></td>
        <td><?php echo $weight;?> g</td>
        <td>
            <img  src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
        </td>
        <td><?php echo $type;?></td>
        <td><?php echo $type2;?></td>

        </tbody>

        <?php
    endwhile;
  }


  ?>


                    </div>
                    </table>

это мои bootstrap и скрипты, которые я использую

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

также это мой код таблицы данных

 <script type="text/javascript">
      $(document).ready(function() {
    $('#datas').dataTable( { "ordering": true } );

} );
    </script>

таблица данных создана, но она не работает как поиск или сортировка. Это изображение того, что ему нравится я использую bootstrap 4

Answer 1

Вам не хватает <tr> как на <thead>, так и на <tbody>

<thead style="color:black;">
<th>Product</th>
</thead>

должно быть:

<thead style="color:black;">
  <tr>
    <th>Product</th>
  <tr>
</thead>

и внутри вас tbody while:

while ($row1 = mysqli_fetch_assoc($get1)):
    $p=$row1['price'];
    $newprice = $p*$weight;
?>
    <tr>
       <td>...</td>
    </tr>
<?php endwhile; ?>

Вы также закрываете </tbody> на каждом while l oop:

    </tbody>    
<?php
    endwhile;
?>
    </div> //where are you opening this div? Seems it should not be here
</table>

, изменяющемся на:

        <?php endwhile; ?>
    </tbody> 
</table>

Это изменения должны заставить ваш DataTable работать как положено.

Answer 2

Неверно сформирован html, неправильные циклы, отсутствует тег tr и т. Д. c. Должно быть что-то вроде этого.

    <div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">

    <thead style="color:black;" >
        <th>id</th>
        <th>Product</th>
        <th>Price</th>
        <th>Weight</th>
        <th>Image</th>
        <th>Type</th>
        <th>Type 2</th>
    </thead>

    <?php
    $get = mysqli_query($conn,"SELECT * FROM products;");
    ?>
    <tbody>

    <?php
    while ($row=mysqli_fetch_array($get)) {
        $id=$row['product_id'];
        $name=$row['product_name'];

        $type2=$row['product_type'];
        $weight=$row['weight'];
        $price=$row['product_price'];

        $type=$row['type'];
        $img=$row['img'];

        $get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");

        while ($row1 = mysqli_fetch_assoc($get1)):
            $p=$row1['price'];
            $newprice = $p*$weight;
            ?>
            <tr>
            <td><?php echo $id;?></td>
            <td><?php echo $name;?></td>
            <td>$<?php echo $newprice;?></td>
            <td><?php echo $weight;?> g</td>
            <td>
                <img  src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
            </td>
            <td><?php echo $type;?></td>
            <td><?php echo $type2;?></td>
            </tr>
        ?>
        <?php endwhile; ?>
    <?php } ?>
    </tbody>
</table>
</div>