单击 laravel 中的按钮时执行 foreach 循环

Question

我希望如果我点击按钮今天然后会显示与今天相关的循环，如果点击按钮月然后 foreach 循环应显示月份。

这是我的控制器：

public function render()
{
    $this->today=Order_Detail::whereDate('created_at', Carbon::today())->get();
    $this->todaySale=Order_Detail::whereDate('created_at', Carbon::today())->sum('amount');
    $this->month=Order_Detail::whereMonth('created_at', date('m'))->get();
    $this->montlySale=Order_Detail::whereMonth('created_at', date('m'))->sum('amount');
    return view('livewire.order');
}

这是我的 order.blade.php 代码：

<!-- Today -->
<div class="col-lg-12">
<div class="row">
    <div class="col-md-9">
    <div class="card">
    <div class="card-header"><h4 style="float:left">Recent Orders</h4>
 
 </div>
<div class="card-body">              
    <Table class="table table-bordered table-left">

    <div style="float:right">
    <button type="button" onclick="" id="today" >Today</button>
    <button type="button" onclick="" id="today" >Month</button>
    </div>

      <tbody>
        <thead>
        <tr>
        <th>Product id</th>
        <th>Order Id</th>
        <th>Product Name</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total Amount</th>
        <th>Discount</th>
        <th>Date and Time</th>
        </tr>
        </thead>

        <div id="todayTag">
      <label for="">Total Sale Today {{$todaySale}}</label>
      @foreach($today as $today)
        <tr>
        <td>{{$today->product_id}}</td>
        <td>{{$today->order_id}}</td>
        <td>{{$today->product->product_name}}</td>
        <td>{{$today->quantity}}</td>
        <td>{{$today->unitprice}}</td>
        <td>{{$today->amount}}</td>
        <td>{{$today->discount}}</td>
        <td>{{$today->created_at}}</td>
        <td></td>
        </tr>
        @endforeach
        </div>

       <div id="monthTag">
      <label for="">Total Sale by Month {{$montlySale}}</label>
        @foreach($month as $month)
          <tr>
          <td>{{$month->product_id}}</td>
          <td>{{$month->order_id}}</td>
          <td>{{$month->product->product_name}}</td>
          <td>{{$month->quantity}}</td>
          <td>{{$month->unitprice}}</td>
          <td>{{$month->amount}}</td>
          <td>{{$month->discount}}</td>
          <td>{{$month->created_at}}</td>
          <td></td>
          </tr>
          @endforeach
          <div>

        <tbody>
        </Table> 

        </div>
      </div>
    </div>
  </div>
</div>

请建议一种将循环放入按钮内的方法？通过 livewire，javascript 或任何？找了很多都做不到

Answer 1

假设默认情况下没有显示 table 并且您必须先单击一个按钮才能显示一个按钮，我建议您从 table 并将其放在 card-body div 之后和 table 之前，像这样：

<div class="card-body"> 
    <button type="button" onclick="document.getElementById('todayTable').style.display ='block'; document.getElementById('monthTable').style.display ='none';" id="today">Today</button>
    <button type="button" onclick="document.getElementById('todayTable').style.display ='none'; document.getElementById('monthTable').style.display ='block';"  id="month">Month</button>             
<table class="table table-bordered table-left">

至于你的table，你可以这样做：

// Today Table

 <table class="table table-bordered table-left" id="todayTable" style="display: none;">
      <tbody>
        <thead>
        <tr>
        <th>Product id</th>
        <th>Order Id</th>
        <th>Product Name</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total Amount</th>
        <th>Discount</th>
        <th>Date and Time</th>
        </tr>
        </thead>

      <label for="">Total Sale Today {{$todaySale}}</label>
      @foreach($today as $today)
        <tr>
        <td>{{$today->product_id}}</td>
        <td>{{$today->order_id}}</td>
        <td>{{$today->product->product_name}}</td>
        <td>{{$today->quantity}}</td>
        <td>{{$today->unitprice}}</td>
        <td>{{$today->amount}}</td>
        <td>{{$today->discount}}</td>
        <td>{{$today->created_at}}</td>
        <td></td>
        </tr>
        @endforeach  
      </tbody>
        </table> 


// Month Table

 <table class="table table-bordered table-left" id="monthTable" style="display: none;">
      <tbody>
        <thead>
        <tr>
        <th>Product id</th>
        <th>Order Id</th>
        <th>Product Name</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total Amount</th>
        <th>Discount</th>
        <th>Date and Time</th>
        </tr>
        </thead>

    <label for="">Total Sale by Month {{$montlySale}}</label>
        @foreach($month as $month)
          <tr>
          <td>{{$month->product_id}}</td>
          <td>{{$month->order_id}}</td>
          <td>{{$month->product->product_name}}</td>
          <td>{{$month->quantity}}</td>
          <td>{{$month->unitprice}}</td>
          <td>{{$month->amount}}</td>
          <td>{{$month->discount}}</td>
          <td>{{$month->created_at}}</td>
          <td></td>
          </tr>
          @endforeach
          <div>
      </tbody>
        </table>

有了这个，tables 根据点击的按钮显示和隐藏。

单击 laravel 中的按钮时执行 foreach 循环

Execute foreach loop on clicking a button in laravel

javascript

onclick

button

laravel

script