Bootstrap-table接口正常, 但是数据显示不出来

最新推荐文章于 2023-02-25 10:00:38 发布

骑上北极熊去驰骋沙场吧

最新推荐文章于 2023-02-25 10:00:38 发布

阅读量8.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： Bootstrap-table Bootstrap

本文链接：https://blog.youkuaiyun.com/xin00guang/article/details/90369585

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

博客指出使用Bootstrap表格时，接口正常但数据无法渲染到表格上，使用分页功能还会报错。原因是插件定义的行参数默认等于ajax返回参数，导致rows读取不到正确返回参数，解决方法是让其能读取到正确参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接口正常，但是数据就是渲染不到表格上

这里是希望表格能渲染出seqNo字段, 然而API接口正常, 页面表格仍不能渲染出数据.

$('#table').bootstrapTable({
	// ... 插件基本参数, 请求api接口
	columns:  [{
          field: 'seqNo',
          title: '序号'
    }],
    
})
// api返回的json格式
/** {
    "result": [
        {
            "data": [
                {
                    "seqNo": 1
                }
            ],
            "total": 10
        }
    ]
}
*/

如果使用了分页功能的话还会报错:
方法报错
报错原因: columns里面的field: 'seqNo'的实际意思rows.seqNo, rows这个插件定义的行参数, 它默认是等于ajax返回参数的data的;
所以rows.seqNo = res.data.seqNo, 即插件的rows读取不到正确的返回参数

	responseHandler(res) {
	// 插件默认返回
       return {
             "rows": res.data, 
             "total": res.total // 数据条数, 用来配置分页
        };
    },

解决方法: 让rows能读取到正确的参数

	responseHandler(res) {
	// 修改返回
       return {
             "rows": res.result.data, 
             "total": res.result.total
        };
    },

可以用onLoadSuccess方法查看自定义后的rows

onLoadSuccess (res) {
  console.log(res);
},