html数据的显示不出来了,bootstrap表格显示不出来数据怎么办

c823bc64be3a478535c82c4682951c5e.png

bootstrap table 获取到了数据,但是却显示不出来

问题描述:至于怎么转换时间格式,看我另一篇博客

e1c60cba1cd6c831a677e6e615d3707e.png

1、清理下浏览器缓存就行了

cdc1ab654bff2bdde474b4deb5cbf3e6.png

2、JSON数据格式不对(正确数据应该是json对象数据,并且格式要同下面)其实是因为bootstraptable接收的数据格式,即便是json格式的也不一定能显示

total是大概有多少条,rows才是bootstraptable接收的数据,按照这样的格式,然后就是{

"total": 5,

"rows": [

{

"fileid": "0e41f912f62248dfa172c7ae7561a013",

"filename": "2.doc",

"filetype": "doc",

"path": "/filedata/2.doc",

"CreateDate": "2019-06-10 03:10:05",

"menuid": null

},

{

"fileid": "207e76db0e444d77b1502c826446e5b0",

"filename": "新建文本文档.txt",

"filetype": "txt",

"path": "/filedata/新建文本文档.txt",

"CreateDate": "2019-06-10 03:10:06",

"menuid": null

}

]

}

就算是这样,bootstraptable也是接收不了的,因为不是total而是count,不是rows而是data{

"errcode": 0,

"errmsg": "ok",

"count": 3,

"data": [

{

"id": "f86c5d78-5092-433a-8fed-896742928a60",

"title": "路德的物资采购申请",

"flowid": "2599fae5-a2e0-4e4a-8f98-fcb4afd7292c",

"flowname": "物资采购申请流程",

"stepid": "ad940538-16be-4dc3-bfcb-a96a685b23cf",

"instanceid": "2",

"groupid": "c49d73b9-237d-470a-bbc0-027cbc49e664",

"stepname": "采购部审核",

"senderid": "eb03262c-ab60-4bc6-a4c0-96e66a4229fe",

"sendername": "路德",

"receivetime": "2019-06-12 15:01",

"completedtime": "",

"status": 0,

"note": ""

},

{

"id": "72c06559-0fcd-4a0a-85e3-db56a7ae1258",

"title": "路德的物资采购申请",

"flowid": "2599fae5-a2e0-4e4a-8f98-fcb4afd7292c",

"flowname": "物资采购申请流程",

"stepid": "e2f98fad-47ca-46f3-9b0c-2a0634240b72",

"instanceid": "2",

"groupid": "c49d73b9-237d-470a-bbc0-027cbc49e664",

"stepname": "财务审核",

"senderid": "eb03262c-ab60-4bc6-a4c0-96e66a4229fe",

"sendername": "路德",

"receivetime": "2019-06-12 15:01",

"completedtime": "",

"status": 0,

"note": ""

},

{

"id": "338a5b6d-f3f3-4884-816f-edf8eda65f65",

"title": "路德的物资采购申请",

"flowid": "2599fae5-a2e0-4e4a-8f98-fcb4afd7292c",

"flowname": "物资采购申请流程",

"stepid": "c16bbe7b-e2a9-4b25-8192-3ece54950bef",

"instanceid": "2",

"groupid": "c49d73b9-237d-470a-bbc0-027cbc49e664",

"stepname": "分管领导审核",

"senderid": "eb03262c-ab60-4bc6-a4c0-96e66a4229fe",

"sendername": "路德",

"receivetime": "2019-06-12 15:01",

"completedtime": "",

"status": 1,

"note": ""

}

]

}

js的bootstraptable配置一定要对好columns: [

{ field: 'selectItem', radio: true },

{

field: 'fileid',

title: 'ID'

}, {

field: 'filename',

title: '文件名'

}, {

field: 'filetype',

title: '文件类型'

},

{

field: 'CreateDate',

title: '创建时间'

},

{

field: 'path',

title: '路径'

},

{

field: 'operate',

title: '操作',

formatter: operateFormatter //自定义方法,添加操作按钮

},

]

3、bootstrap table的js配置没有写对

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Table 可以通过 AJAX 请求从后端获取数据并在表格显示。下面是一些实现的步骤: 1. 在 HTML 页面中引入 Bootstrap Table 插件的 CSS 和 JS 文件。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script> ``` 2. 创建一个 HTML 表格,并定义每一列的名称和字段名。 ```html <table id="table"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> ``` 3. 初始化表格,并配置 AJAX 请求参数。 ```javascript $(function () { $('#table').bootstrapTable({ url: '/path/to/server', // 后端 API 地址 method: 'get', // 请求方法 dataType: 'json', // 返回数据类型 pagination: true, // 启用分页功能 sidePagination: 'server', // 分页位置,此处为服务器端分页 queryParams: function (params) { // 自定义查询参数 return { limit: params.limit, // 每页显示的记录数 offset: params.offset, // 当前页码 search: params.search // 搜索关键字 }; }, responseHandler: function (res) { // 自定义响应处理函数 return { total: res.total, // 总记录数 rows: res.data // 当前页记录列表 }; }, columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'price', title: 'Price' }] }); }); ``` 4. 在后端编写 API 接口,接收请求参数并返回 JSON 格式的数据。 ```php // 获取请求参数 $limit = $_GET['limit']; $offset = $_GET['offset']; $search = $_GET['search']; // 查询数据库,获取数据列表和总记录数 // ... // 返回 JSON 格式的数据 echo json_encode([ 'total' => $total, 'data' => $data ]); ``` 这样就可以通过 AJAX 请求从后端获取数据并在表格显示了。需要注意的是,后端 API 必须返回 JSON 格式的数据数据格式要与响应处理函数中返回的格式一致。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值