result does not fetch according to the condition set (Bootstrap)

[sashavalentina]

I'm creating dynamic tabs with dynamic content by using Bootstrap in PHP Mysql. what I want to do here is, display the order_date on the nav-tab and the content of each nav-tab will be displayed by the date of the customer made their orders. The date in each nav-tab can be shown properly according to the condition set, but the content of each nav-tab does not show according to the condition set. It just displays all of the data. Can I know how can I display the content according to the condition set? Let's say I clicked on the '2021-09-09' tab, the order that is only made on this date will be shown as the content of this nav_tab. Any form of help will be appreciated. thanks in advance!

 

<?php 
        $tab_query = "SELECT id,cast(order_datetime as date) AS ordered_date , order_status FROM ordered_items GROUP BY ordered_date order by order_datetime DESC LIMIT 7";
        $tab_result = mysqli_query($conn, $tab_query);
        $tab_menu = '';
        $tab_content = '';
        $i = 0;
        while($row = mysqli_fetch_array($tab_result))
        {
         if($i == 0)
         {
          $tab_menu .= '
           <li class="active"><a href="#'.$row["ordered_date"].'" data-toggle="tab">'.$row["ordered_date"].'</a></li>
          ';
          $tab_content .= '
           <div id="'.$row["ordered_date"].'" class="tab-pane fade in active">
          ';
         }
         else
         {
          $tab_menu .= '
           <li><a href="#'.$row["ordered_date"].'" data-toggle="tab">'.$row["ordered_date"].'</a></li>
          ';
          $tab_content .= '
           <div id="'.$row["ordered_date"].'" class="tab-pane fade">
          ';
         }
         $product_query = "SELECT*, cast(order_datetime as date) AS products_ordered_date , order_status FROM ordered_items 
         LEFT JOIN products ON ordered_items.product_id = products.id
         WHERE order_datetime = '".$row["ordered_date"]."'";
         $product_result = mysqli_query($conn, $product_query);
         if(!mysqli_num_rows($product_result)) {    
          $tab_content .=  '<tr>
          <td colspan="5">
              <div class="badge badge-danger">No Order Found</div>
          </td>
        </tr>';         
          }
         while($sub_row = mysqli_fetch_array($product_result))
         {
          $tab_content .= '
          
          <tr>
          <td>
          #'.$sub_row["order_id"].'
          </td>
          <td>
          '.$sub_row["product_title"].'
          </td>
          <td>
          '.$sub_row["quantity"].'
          </td>
          <td>
          '.$sub_row["products_ordered_date"].'
          </td>
          <td>
          '.$sub_row["delivery_date"].'
          </td>
          </tr>
        
   ';
         }
         $tab_content .= '<div style="clear:both"></div></div>';
         $i++;
        }
?>

 <div class="col-12">
  <div class="card">
    <div class="card-header">
      <h4 class="card-title"> All Products</h4>
      <span>
        <a href="download-list/download-products.php" class="btn btn-info float-right mb-3"><i class="fa fa-download" aria-hidden="true"></i> Download Products List</a>
      </span>
      <span>
        <a href="download-list/download-products.php" class="btn btn-info float-right mb-3"><i class="fa fa-download" aria-hidden="true"></i> Download Products List</a>
      </span>
    </div>
      <div class="card-body">
      <ul class="nav nav-tabs">
      <li class="nav-item">
    <ul class="nav nav-tabs">
    <?php echo $tab_menu; ?>
    </ul>
      </li>
      </ul>
      </div>

      <div class="card-body">
                <div class="table-responsive" style="max-height: 70vh">
                  <table class="table">
                    <thead class="text-primary">
                      <th style=" position: sticky;top: 0; background: white" ;>
                        Order no
                      </th>
                      <th style=" position: sticky;top: 0; background: white" ;>
                        Product Name
                      </th>
                      <th style=" position: sticky;top: 0; background: white" ;>
                        Quantity
                      </th>
                      <th style=" position: sticky;top: 0; background: white" ;>
                        Order Date
                      </th>
                      <th style=" position: sticky;top: 0; background: white" ;>
                        Recieve by
                      </th>
                          <tr>
                          <?php echo $tab_content; ?>
                          </tr>
                     
                    </tbody>
                  </table>
                </div>

 

[gizmola]

I don't see anything overtly wrong, other than you have some wonky markup at the end, where you don't have matching thead/tbody tags.  Compare this, where I added the obvious missing tags, to what you posted.

 

<?php

//
?>
  <div class="card-body">
    <div class="table-responsive" style="max-height: 70vh">
      <table class="table">
        <thead class="text-primary">
          <th style=" position: sticky;top: 0; background: white" ;>
            Order no
          </th>
          <th style=" position: sticky;top: 0; background: white" ;>
            Product Name
          </th>
          <th style=" position: sticky;top: 0; background: white" ;>
            Quantity
          </th>
          <th style=" position: sticky;top: 0; background: white" ;>
            Order Date
          </th>
          <th style=" position: sticky;top: 0; background: white" ;>
            Recieve by
          </th>
        </thead>
        <tbody>
          <tr>
              <?php echo $tab_content; ?>
          </tr>
        </tbody>
      </table>
    </div>