Bootstrap Table通过URL加载PHP返回JSON数据失效问题求助

我来帮你一步步排查这个问题，先从最核心的点入手：

1. 先确认PHP接口本身是否正常 #

首先直接在浏览器地址栏访问你的PHP文件URL，检查两个关键点：

• 页面是否输出纯净的JSON：{"COL1":"data1","COL2":"data2"}，不能有任何多余字符（比如空格、PHP报错信息、HTML标签），否则JSON会解析失败。
• 打开浏览器开发者工具的「Network」面板，查看该请求的响应头：
  • 必须包含Content-Type: application/json; charset=UTF-8
  • 必须包含Access-Control-Allow-Origin: *（如果前端和PHP不在同一域名下）

如果这里有问题，先修复PHP代码，比如确保没有额外的echo或空格，检查PHP语法是否正确。

2. 修正Bootstrap Table的服务器分页数据格式 #

你设置了data-side-pagination="server"，这意味着Bootstrap Table要求接口返回特定格式的数据，而你当前的PHP返回的是单个对象，不符合要求。正确的服务器分页返回格式应该是：

{
  "total": 1, // 总记录数
  "rows": [{"COL1":"data1","COL2":"data2"}] // 当前页的数据数组
}

所以需要修改PHP代码，把返回的数组包装成符合要求的结构：

$array = ["COL1"=> "data1","COL2"=> "data2"];
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// 包装成服务器分页需要的格式
echo json_encode([
    "total" => 1,
    "rows" => [$array]
]);

3. 确保自定义ajax函数正确实现 #

你用了data-ajax="ajaxRequest"，这个自定义函数必须符合Bootstrap Table的要求——要接收params参数，并在请求成功后调用params.success()传递数据。示例代码如下：

function ajaxRequest(params) {
    $.ajax({
        url: "你的PHP文件路径", // 务必填写正确的PHP文件URL
        type: "GET",
        dataType: "json",
        success: function(res) {
            // 把接口返回的数据传给Bootstrap Table
            params.success(res);
        },
        error: function(xhr) {
            params.error(xhr);
        }
    });
}

4. 检查表格表头的字段匹配 #

你的表头<th>必须设置data-field属性，且属性值要和PHP返回的JSON键名完全一致（区分大小写）：

<thead>
    <tr>
        <th data-field="COL1">列1名称</th>
        <th data-field="COL2">列2名称</th>
    </tr>
</thead>

5. 用开发者工具调试 #

打开浏览器F12开发者工具，重点看这两个面板：

• Network：查看ajax请求的状态（是否200）、请求URL是否正确、返回的JSON格式是否符合要求。
• Console：查看是否有JavaScript报错（比如ajaxRequest函数未定义、跨域错误等）。

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