bootstrap table接收json问题

发布于 2022-09-06 01:32:16 字数 523 浏览 21 评论 0

文档中是直接拿json

<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

但是我的json格式如下

{   "code": "0",
    "data": {"messages":[{"id":1,"name":"Mark","price":"10"},....]}
}

请问该如何修改?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

街角卖回忆 2022-09-13 01:32:16

html：

<table data-toggle="table" >
     <thead>
         <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
    <tbody>
       <tr ng-repeat = "td in itemList.data.messages">
            <td data-field="id">{{li.id}}</td>
            <td data-field="name">{{li.name}}</td>
            <td data-field="price">{{li.price}}</td>
        </tr>
    </tbody>
</table>

js:

itemList:{   
    "code": "0", 
    "data": {
        "messages":[
        {"id":1,"name":"Mark","price":"10"},....]
        }
    }

回复收藏 0

走野 2022-09-13 01:32:16

bootstrap-table参数中有responseHandler: function(res){ return res; }函数。

此函数的作用就是可以先对获取到的服务器数据先进行处理、格式化数据之后再进行表格的渲染。
以你取到的数据为例,初始化配置中添加如下参数：

responseHandler: function (res) {
    return res.data.messages;
}

就可以了

回复收藏 0

友谊不毕业 2022-09-13 01:32:16

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap-table.min.css">

</head>
<body>

</body>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap-table.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
$(function () {
var oTable = new TableInit();
oTable.Init();
});