如何在新增值时刷新指定表格？附Laravel Blade代码片段

嘿，我来帮你搞定这个表格自动刷新的问题！针对你用Laravel Blade写的这个买单列表，我给你两种实用方案，你可以根据业务需求来选：

这种方案不需要额外依赖，核心思路是每隔一段时间通过AJAX请求获取最新数据，替换页面上的表格内容。

1. 抽离表格为局部视图
   把需要刷新的表格部分单独拆成一个Blade片段，方便后续AJAX调用返回内容：

<!-- resources/views/partials/orders_buy_table.blade.php -->
<table class="table table-striped hovered">
    <thead>
        <tr class="header-tb">
            <th>{{ trans('texts.price')}}</th>
            <th>{{ $coinmain }}</th>
            <th>{{ $coinsecond }}</th>
        </tr>
    </thead>
    <tbody>
        <!-- 这里放你原来渲染订单的循环逻辑 -->
        @foreach($buyOrders as $order)
            <tr>
                <td>{{ $order->price }}</td>
                <td>{{ $order->amount_main }}</td>
                <td>{{ $order->amount_second }}</td>
            </tr>
        @endforeach
    </tbody>
</table>

然后在你的主视图里引用这个局部视图：

<div class="content-inbox">
    <h3>{{ trans('texts.top_buy_orders')}}</h3>
    <div id="orders-b-list">
        <div id="orders_buy_{{Session::get('market_id')}}" class="scrolltable">
            @include('partials.orders_buy_table', ['buyOrders' => $buyOrders])
        </div>
    </div>
</div>

2. 添加刷新路由
   在routes/web.php里加一个路由，用来返回最新的表格内容：

use Illuminate\Http\Request;
use App\Models\Order; // 替换成你的订单模型

Route::get('/refresh-buy-orders', function(Request $request) {
    $marketId = $request->session()->get('market_id');
    // 这里替换成你获取最新买单的业务逻辑，比如按价格倒序取前10条
    $buyOrders = Order::where('market_id', $marketId)
                     ->where('type', 'buy')
                     ->orderBy('price', 'desc')
                     ->limit(10)
                     ->get();
    $coinmain = // 保持和主视图一致的主币名称逻辑
    $coinsecond = // 保持和主视图一致的副币名称逻辑
    return view('partials.orders_buy_table', compact('buyOrders', 'coinmain', 'coinsecond'));
})->name('buy.orders.refresh');

3. 编写前端刷新逻辑
   在主视图末尾添加JavaScript，定时调用上面的路由更新表格：

<script>
function refreshBuyOrders() {
    const marketId = "{{ Session::get('market_id') }}";
    const container = document.getElementById(`orders_buy_${marketId}`);
    
    fetch("{{ route('buy.orders.refresh') }}")
        .then(response => response.text())
        .then(html => {
            container.innerHTML = html;
        })
        .catch(error => {
            console.error('刷新买单失败:', error);
        });
}

// 页面加载完成后立即刷新一次，之后每隔3秒刷新（时间可自行调整）
document.addEventListener('DOMContentLoaded', function() {
    refreshBuyOrders();
    setInterval(refreshBuyOrders, 3000);
});
</script>

如果你的系统对实时性要求很高，不想有定时刷新的延迟，那用WebSocket主动推送是更好的选择。这里以Laravel Echo + Pusher为例：

1. 安装依赖

composer require pusher/pusher-php-server
npm install laravel-echo pusher-js

2. 配置.env文件

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=你的Pusher应用ID
PUSHER_APP_KEY=你的Pusher应用Key
PUSHER_APP_SECRET=你的Pusher应用Secret
PUSHER_APP_CLUSTER=你的Pusher集群

3. 创建订单事件
   生成一个事件类，当新买单创建时触发广播：

php artisan make:event NewBuyOrderCreated

编辑事件文件：

// app/Events/NewBuyOrderCreated.php
namespace App\Events;

use App\Models\Order;
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class NewBuyOrderCreated implements ShouldBroadcast
{
    use Dispatchable, SerializesModels;

    public $order;
    public $marketId;

    public function __construct(Order $order)
    {
        $this->order = $order;
        $this->marketId = $order->market_id;
    }

    public function broadcastOn(): array
    {
        // 按市场ID创建专属频道，避免跨市场推送
        return [new Channel("market.{$this->marketId}")];
    }

    // 自定义推送内容，只传需要的字段减少数据量
    public function broadcastWith()
    {
        return [
            'price' => $this->order->price,
            'amount_main' => $this->order->amount_main,
            'amount_second' => $this->order->amount_second,
        ];
    }
}

4. 触发事件
   在创建新买单的控制器方法里触发广播：

public function store(Request $request)
{
    $order = Order::create([
        'market_id' => $request->market_id,
        'type' => 'buy',
        'price' => $request->price,
        'amount_main' => $request->amount_main,
        'amount_second' => $request->amount_second,
    ]);

    // 触发广播事件
    event(new NewBuyOrderCreated($order));

    return response()->json(['success' => true]);
}

5. 配置Laravel Echo
   在resources/js/bootstrap.js里添加Echo配置：

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

然后编译前端资源：

npm run build

6. 前端监听事件并更新表格
   在Blade视图里添加监听逻辑：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const marketId = "{{ Session::get('market_id') }}";
    const tbody = document.querySelector(`#orders_buy_${marketId} table tbody`);

    // 监听对应市场的新订单事件
    window.Echo.channel(`market.${marketId}`)
        .listen('NewBuyOrderCreated', (event) => {
            // 创建新行并插入到表格顶部（符合买单从高到低的排序逻辑）
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>${event.price}</td>
                <td>${event.amount_main}</td>
                <td>${event.amount_second}</td>
            `;
            tbody.insertBefore(newRow, tbody.firstChild);

            // 可选：限制表格只显示前10条数据
            while (tbody.children.length > 10) {
                tbody.removeChild(tbody.lastChild);
            }
        });
});
</script>

内容的提问来源于stack exchange，提问作者Zacharin