首页 > bootstrap-table 加载远程数据 无效

bootstrap-table 加载远程数据 无效

按照github中引入所需资源,想实现远程json数据的加载。
在浏览器中调试时可以看到,是能够加载到json数据的,但是无法渲染到前端页面中。
不知道是什么问题,坐等大神解答。


有没有跨域?


格式不对 要 是{total:11, rows:[{}]}


bootstrap-table 配置:

columns: [{
                    field: 'title',//这里的`title`对应从服务得到的数据中的字段就可以正确显示
                    title: '标题',
                }, {
                    field: 'createdAt',//这里的`createdAt`对应从服务得到的数据中的字段就可以正确显示
                    title: '发布日期',
                }, {
                    field: 'action',
                    title: '操作',
                }],

从服务器获得的一部分数据如下(表格中只匹配了titlecreatedAt字段):

{
      "content": "8月25日在接受澎湃新闻(www.thepaper.cn)独家专访时,面对网友质疑其学历造假一事,兰州交通大学博文学院院长陈玲边说边流泪,称自己确实是北京师范大学博士毕业生,也曾在北京大学做过访问学者,并拿出了北师大博士同等学力证书、北大国内访问学者证书等相关资料来证实。",
      "categoryId": {
        "__type": "Pointer",
        "className": "ArticleCategory",
        "objectId": "57c259c579bc440063dd3e05"
      },
      "title": "北师大:陈玲博士同等学力证无法核查,北大:确曾为访问学者 ",
      "studioId": 1,
      "objectId": "57c818460e3dd90063dd0216",
      "createdAt": "2016-09-01T12:00:06.306Z",
      "updatedAt": "2016-09-01T12:00:06.306Z"
    },

如下图:


代码清单:

$('#article').bootstrapTable({
                pagination : true,
                striped : true, //设置为 true 会有隔行变色效果
                responseHandler : function (res) { /*加载服务器数据之前的处理程序,可以用来格式化数据。 参数:res为从服务器请求到的数据。*/
                    console.log(res);
                    res.data.forEach(function (vo) {
                        const datetime = new Date(vo.createdAt).format('yyyy-MM-dd HH:mm:ss');
                        vo.createdAt = datetime;
                        vo.action = `<a href="{:U('Article/editArticle')}?id=${vo.objectId}">编辑</a> | <a href="#" onclick="del('${vo.objectId}')">删除</a> `
                    });
                    return res;
                },
                search : true,
                searchAlign : 'left',
                showHeader : true,
                showColumns : true,
                showRefresh : true,
                showToggle : true,
                showPaginationSwitch : true,
                columns: [{
                    field: 'title',
                    title: '标题',
                    sortable : true,
                    align : 'center',
                }, {
                    field: 'createdAt',
                    title: '发布日期',
                    sortable : true,
                    align : 'center',
                }, {
                    field: 'action',
                    title: '操作',
                    align : 'center',
                }],
                url: '请求服务器数据地址',
            });
{
  "code": 200,
  "data": [
    {
      "content": "8月25日在接受澎湃新闻(www.thepaper.cn)独家专访时,面对网友质疑其学历造假一事,兰州交通大学博文学院院长陈玲边说边流泪,称自己确实是北京师范大学博士毕业生,也曾在北京大学做过访问学者,并拿出了北师大博士同等学力证书、北大国内访问学者证书等相关资料来证实。",
      "categoryId": {
        "__type": "Pointer",
        "className": "ArticleCategory",
        "objectId": "57c259c579bc440063dd3e05"
      },
      "title": "北师大:陈玲博士同等学力证无法核查,北大:确曾为访问学者 ",
      "studioId": 1,
      "objectId": "57c818460e3dd90063dd0216",
      "createdAt": "2016-09-01T12:00:06.306Z",
      "updatedAt": "2016-09-01T12:00:06.306Z"
    },
    {
      "content": "Bootstrap Table",
      "objectId": "57c81660a633bd006cfffb8d",
      "createdAt": "2016-09-01T11:52:00.668Z",
      "updatedAt": "2016-09-01T11:52:00.668Z"
    },
    {
      "content": "Bootstrap Table",
      "objectId": "57c8165ea633bd006cfffb83",
      "createdAt": "2016-09-01T11:51:58.332Z",
      "updatedAt": "2016-09-01T11:51:58.332Z"
    },
    {
      "content": "Bootstrap Table",
      "objectId": "57c81656165abd0068d60d14",
      "createdAt": "2016-09-01T11:51:50.293Z",
      "updatedAt": "2016-09-01T11:51:50.293Z"
    },
    {
      "content": "Bootstrap Table",
      "objectId": "57c81653d342d30068d04114",
      "createdAt": "2016-09-01T11:51:47.564Z",
      "updatedAt": "2016-09-01T11:51:47.564Z"
    },
    {
      "content": "Bootstrap Table",
      "objectId": "57c8164da633bd006cfffb18",
      "createdAt": "2016-09-01T11:51:41.248Z",
      "updatedAt": "2016-09-01T11:51:41.248Z"
    },
    {
      "content": "Bootstrap Table",
      "objectId": "57c8164379bc440063e9f1e8",
      "createdAt": "2016-09-01T11:51:31.363Z",
      "updatedAt": "2016-09-01T11:51:31.363Z"
    },
    {
      "content": "Bootstrap Table",
      "title": "Bootstrap Table",
      "objectId": "57c8163dd342d30068d04085",
      "createdAt": "2016-09-01T11:51:25.425Z",
      "updatedAt": "2016-09-01T11:51:33.923Z"
    },
    {
      "content": "Bootstrap Table",
      "title": "Bootstrap Table",
      "objectId": "57c816340a2b58006b1e0920",
      "createdAt": "2016-09-01T11:51:16.536Z",
      "updatedAt": "2016-09-01T11:51:21.197Z"
    },
    {
      "content": "Bootstrap Table",
      "title": "Bootstrap Table",
      "objectId": "57c8162b6be3ff006a75b7fb",
      "createdAt": "2016-09-01T11:51:07.515Z",
      "updatedAt": "2016-09-01T11:51:18.601Z"
    },
    {
      "content": "8月25日在接受澎湃新闻(www.thepaper.cn)独家专访时,面对网友质疑其学历造假一事,兰州交通大学博文学院院长陈玲边说边流泪,称自己确实是北京师范大学博士毕业生,也曾在北京大学做过访问学者,并拿出了北师大博士同等学力证书、北大国内访问学者证书等相关资料来证实。",
      "categoryId": {
        "__type": "Pointer",
        "className": "ArticleCategory",
        "objectId": "57c259c579bc440063dd3e05"
      },
      "title": "北师大:陈玲博士同等学力证无法核查,北大:确曾为访问学者 ",
      "author": {
        "__type": "Pointer",
        "className": "_User",
        "objectId": "57c4f6d65bbb5000634978e6"
      },
      "studioId": 1,
      "objectId": "57c7f53bd342d30068cf2ea4",
      "createdAt": "2016-09-01T09:30:35.458Z",
      "updatedAt": "2016-09-01T10:54:11.366Z"
    },
    {
      "content": "8月25日在接受澎湃新闻(www.thepaper.cn)独家专访时,面对网友质疑其学历造假一事,兰州交通大学博文学院院长陈玲边说边流泪,称自己确实是北京师范大学博士毕业生,也曾在北京大学做过访问学者,并拿出了北师大博士同等学力证书、北大国内访问学者证书等相关资料来证实。",
      "categoryId": {
        "__type": "Pointer",
        "className": "ArticleCategory",
        "objectId": "57c259c579bc440063dd3e05"
      },
      "title": "北师大:陈玲博士同等学力证无法核查,北大:确曾为访问学者 ",
      "author": {
        "__type": "Pointer",
        "className": "_User",
        "objectId": "57c4f6d65bbb5000634978e6"
      },
      "studioId": 1,
      "objectId": "57c7f50ba633bd006cfee88d",
      "createdAt": "2016-09-01T09:29:47.617Z",
      "updatedAt": "2016-09-01T11:03:48.495Z"
    },
    {
      "content": " 美国出版的《走路!不要跑步》一书中,作者史塔曼博士指出:行走健身要求迈大步,速度较快,双臂摆动,抬头挺胸。     不要以为健步行走就是简单的下肢运动。目前已有许多研究证实,规律的健走可有效锻炼身体各部位:     头脑——促使脑部释放内啡肽,使心情愉悦。     肺部——增加肺活量、降低嗜烟者对吸烟的渴望。     背部——加强背肌力量,且对背部伤害较小。     腿脚——行走相当于对骨骼进行力量训练,能明显增强腿脚骨骼和肌肉力量。     一周步行三个小时以上,就可以降低35%~40%的罹患心血管疾病风险。     一周三天,每次步行45分钟以上,可以预防老年痴呆。     一周步行7小时以上,可以降低20%的乳腺癌罹患率,对II型糖尿病有50%的疗效。     1.步行能增强心脏功能,使心脏慢而有力。     2.步行能增强血管弹性,减少血管破裂的可能性。     3.步行能增强肌肉力量,强健腿足、筋骨,并能使关节灵活,促进人体血液循环和新陈代谢。",
      "categoryId": {
        "__type": "Pointer",
        "className": "ArticleCategory",
        "objectId": "57c259c579bc440063dd3e05"
      },
      "title": "长期步行、健步行走,重塑你的健康人生",
      "author": {
        "__type": "Pointer",
        "className": "_User",
        "objectId": "57c4f6d65bbb5000634978e6"
      },
      "studioId": 3,
      "objectId": "57c4f8036be3ff00584800ee",
      "createdAt": "2016-08-30T03:05:39.004Z",
      "updatedAt": "2016-09-01T10:59:19.517Z"
    }
  ]
}
【热门文章】
【热门文章】