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

问题描述:至于怎么转换时间格式,看我另一篇博客
在这里插入图片描述

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

在这里插入图片描述

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配置没有写对
完整的bootstraptable使用我已经在这个博客上说明了
https://blog.csdn.net/asdfghjkl110292/article/details/88823190

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
### 回答1: Bootstrap Table 是一款基于 Bootstrap 的可扩展表格插件,可以通过 AJAX 方式获取表格数据。使用 Bootstrap Table 获取数据的步骤如下: 1. 引入 BootstrapBootstrap Table 的 CSS 和 JS 文件。 2. 在 HTML 中创建一个表格,指定表格的 ID。 3. 在 JS 中使用 Bootstrap Table 的初始化方法,指定表格的 ID 和数据来源。 4. 在服务器端编写接口,返回 JSON 格式的数据。 5. 在 JS 中指定 AJAX 请求的 URL 和数据类型。 6. 在服务器端解析请求参数,查询数据库并返回 JSON 格式的数据。 7. 在 JS 中处理 AJAX 请求的响应,将数据填充到表格中。 以上就是使用 Bootstrap Table 获取数据的基本流程。 ### 回答2: Bootstrap Table是一款基于Bootstrap的表格插件,它能够让我们快速地创建一个漂亮且功能强大的表格。Bootstrap Table提供了很多方便的功能,其中包括数据获取和应用,本文将在此着重介绍。 Bootstrap Table数据获取主要是通过使用AJAX技术从后台获取数据。 我们可以通过设置Table的参数url,来指定后台接口,从而从服务器获取表格数据Bootstrap Table要求数据源必须是json格式,所以我们需要在服务器端返回一个符合json格式的数据,才能够被Bootstrap Table正常的解析显示在表格中。 Bootstrap Table在接收到数据后,可以进行一系列的操作,如数据格式化,数据排序,分页等等。同时,我们也可以自定义内容、样式、事件和处理方法等等。 以上内容仅是Bootstrap Table获取数据的一个方面,除此之外,Bootstrap Table还提供了很多其他有用的功能,如数据的修改、删除、查看、搜索以及打印等等。 总之,Bootstrap Table是一款十分强大的表格插件,无论是前端还是后端开发,都能够极为方便的快速开发出高效的表格功能,它是我们开发中的一个不可缺少的工具。 ### 回答3: Bootstrap Table是一个基于Bootstrap的jQuery表格插件,支持使用Ajax请求获取服务器端数据Bootstrap Table提供了一个数据源服务,可以发送Ajax请求并返回数据,前端页面可以轻松地获取远程数据。在使用Bootstrap Table获取数据时,需要进行以下步骤: 1. 引入Bootstrap Table的CSS和JS文件及相关依赖库的文件。 2. 在HTML中创建一个table标签,并且设置id属性,用于通过jQuery操作元素。 3. 在JS代码中初始化Bootstrap Table,设置table的ID和data-url属性,其中data-url属性用于设置数据请求的URL。 4. 在服务端编写相关接口,并返回对应数据,注意要保证返回的数据格式是JSON格式。 5. 在Bootstrap Table中设置表格的列属性和参数,可以通过属性data-field设置列名,而且可以在表格中展示数据的时候按照需求进行格式化。 6. 在最后进行一次Ajax请求,以请求数据并展示在表格中。 具体来说,例如以下代码片段,用于从服务器获取图书信息并展示在表格中。 ```html <table id="bookTable" class="table table-bordered"></table> ``` ```javascript $(function(){ $("#bookTable").bootstrapTable({ url: '/api/books', //数据请求URL method: 'get', //数据请求方式 striped: true, //是否显示隔行变色 columns: [ { field: 'name', title: '书名' }, { field: 'author', title: '作者' }, { field: 'price', title: '价格', formatter: function (value, row, index) { return value.toFixed(2); //格式化价格 } } ] }); }); ``` 需要注意的是,Bootstrap Table只是一个前端UI插件,需要与后端配合完成数据交互等操作,因此在使用时需要对前后端的数据传递协议进行约定,并实现后端接口以供前端调用。如果在使用时遇到问题,可以查看官方文档或查阅相关的资源进行解决。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值