如何用Laravel控制器传递的$products数据渲染bootstrap-table

1. 确认控制器数据传递 #

确保控制器index方法正确查询并传递数据到视图：

public function index()
{
    $products = \App\Models\Product::where('visible', true)->get();
    return view('products.list', compact('products'));
}

2. 在Blade视图中初始化JS变量 #

在视图的<script>标签中，将Laravel传递的$products转为未转义的JSON，赋值给productos变量：

<script>
// 使用{!! !!}避免JSON被HTML转义
const productos = {!! json_encode($products) !!};
</script>

3. 配置Bootstrap Table加载本地数据 #

移除原表格标签的data-url属性，通过以下两种方式配置表格加载productos数据：

方式一：纯JS初始化（推荐）

<table id="productsTable"></table>

<script>
$(document).ready(function() {
    $('#productsTable').bootstrapTable({
        data: productos,
        // 根据你的Product模型字段配置列
        columns: [
            { field: 'id', title: '产品ID' },
            { field: 'name', title: '产品名称' },
            { field: 'price', title: '售价' },
            { field: 'created_at', title: '创建时间', formatter: function(value) {
                return new Date(value).toLocaleString();
            } },
            // 按需添加更多列
        ],
        // 保留原有表格配置
        pagination: true,
        search: true,
        striped: true
    });
});
</script>

方式二：HTML属性绑定

若想保留原有表格标签结构，可移除data-url，直接通过data-data绑定JSON数据：

<table id="productsTable"
       data-data="{{ json_encode($products) }}"
       data-pagination="true"
       data-search="true"
       data-striped="true">
    <thead>
        <tr>
            <th data-field="id">产品ID</th>
            <th data-field="name">产品名称</th>
            <th data-field="price">售价</th>
            <th data-field="created_at" data-formatter="formatDate">创建时间</th>
        </tr>
    </thead>
</table>

<script>
// 自定义格式化函数示例
function formatDate(value) {
    return new Date(value).toLocaleString();
}
</script>

关键注意事项 #

• 必须用{!! json_encode($products) !!}而非{{ json_encode($products) }}，后者会转义HTML字符导致JSON格式错误。
• 确保表格列的field属性与$products数据中的字段名完全匹配。
• 若原有代码存在data-url属性，必须移除，否则Bootstrap Table会优先尝试从接口拉取数据。

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