creating datatable for php codes with bootstrap 4

Question

hello i created a datatabe to to load my datas sort them and using the search functionality but it dose not work i tried it been 5 days and i am stuck here i do not know what i am missing or what i done wrong this is my codes if any one can help me i would be thankful

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

these are my bootstrap and scripts that i use

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

also this is my data table code

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

} );
    </script>

the datatable is created but it does not work like the search or the sorting this is picture of what it likes i am using bootstrap 4

Answer 1

Malformed html, loops wrong, missing tr tag, etc. Should be something like this.

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

Answer 2

You are missing <tr> both on your <thead> and <tbody>

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

should be:

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

and inside you tbody while:

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

You're also closing your </tbody> on every while loop:

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

change to:

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

This changes should make your DataTable work as expected.