Bootstrap Table 數據不顯示？響應格式適配與字段映射完整排查清單

現象

後端返回 JSON 正常，前端 Bootstrap Table 初始化無報錯，**表格空白無數據**。

核心排查三步走

1. 確認 sidePagination 模式與響應結構匹配

2. 字段名映射：dataField / responseHandler

若後端返回：

{ "result": { "count": 100, "list": [...] } }

配置：

$('#table').bootstrapTable({
    sidePagination: 'server',
    dataField: 'result.list',        // 指定數據數組路徑
    // 或使用 responseHandler 完全控制
    responseHandler: function(res) {
        return { total: res.result.count, rows: res.result.list };
    },
    columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }]
});

3. columns.field 必須與數據對象鍵名完全一致

• 數據：{ "userId": 1, "userName": "Tom" }
• 列定義：{ field: 'userId', ... }、{ field: 'userName', ... }
• **區分大小寫**，userId ≠ userid。

調試技巧

1. Console 執行 $('#table').bootstrapTable('getData') 查看內部數據是否已加載。
2. Network 面板檢查響應 JSON 結構、字段名。
3. 臨時添加 onLoadSuccess: function(data){ console.log('loaded', data); } 回調確認數據進入。

常見坑點

• sidePagination: 'server' 但響應是數組 → 表格以為 total=0 不顯示分頁也無數據。
• 後端返回 rows 字段但前端用 dataField: 'data' → 找不到數據。
• 列 field 拼寫錯誤 → 列顯示空白。
• 數據類型不匹配（如數字 vs 字符串） → 排序/搜索異常但顯示正常。

對比：EasyUI DataGrid vs Bootstrap Table

總結

Bootstrap Table 不顯示數據**90% 是響應結構與配置不匹配**。檢查：1. sidePagination 模式 2. dataField/responseHandler 映射 3. columns.field 與 JSON 鍵名一致。用 responseHandler 統一規範化響應最靈活可控。