使用bootstrap-table通过data-url加载JSON，无法显示POI中items数据求助

问题根源 #

你返回的JSON数据里，表格需要的列表数据嵌套在poi.items路径下，但Bootstrap Table默认会把返回的根对象当作数据源——而根对象不是数组，所以找不到可渲染的记录，才会显示“无匹配记录”。

两种解决方式 #

方式一：HTML属性直接指定数据路径 #

在表格标签上添加data-data-field="poi.items"，明确告诉组件要读取的数组位置：

<table id="meetingPoiModalTable" class="caption-top"
       data-toggle="table"
       data-url="http://example.org/data"
       data-data-field="poi.items">
  <caption class="h5">Points of Interest</caption>
  <thead>
    <tr>
      <th data-field="title" data-title="Title">Title</th>
    </tr>
  </thead>
</table>

方式二：JS自定义响应处理函数 #

如果需要对数据做额外处理（比如过滤字段、转换格式），可以用responseHandler配置来提取目标数组：

let $meetingPoiModalTable = $('#meetingPoiModalTable');

$(function() {
    // 初始化表格时配置响应处理
    $meetingPoiModalTable.bootstrapTable({
        url: 'http://example.org/data',
        responseHandler: function(res) {
            // 返回poi.items作为表格数据源
            return res.poi.items;
        }
    });

    $('#meetingPlanModal').on('shown.bs.modal', function () {
        $meetingPoiModalTable.bootstrapTable('resetView');
    })
})

注意：用这种方式时，要删掉HTML里的data-url属性，避免重复配置冲突。

修改后刷新页面，表格就能正确渲染poi.items里的三条数据了。

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