bootstrap-table使用（简单案例——JavaScript请求地址版）

最新推荐文章于 2024-09-14 19:44:09 发布

黎明不管黑夜的星空

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量119

点赞数 1

分类专栏： Javascript 前端 boostrap-table 文章标签： javascript bootstrap 前端

本文链接：https://blog.csdn.net/weixin_50930483/article/details/141021045

版权

Javascript 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

boostrap-table

1 篇文章 0 订阅

订阅专栏

HTML代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./bootstrap-table/bootstrap-table.min.css">
    <script src="./jquery.min.js"></script>
    <script src="./bootstrap-table/bootstrap-table.min.js"></script>
    <script src="./bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head>

<body>
    <table id="table">
    </table>
    <p>-------------------------------------------------------------</p>
    <table id="table2">
    </table>
    <script>
        $('#table').bootstrapTable({
            // 本地假数据
            url: './data_json/boostrap_table.json',
            columns: [
                {
                    field: 'id',
                    title: 'Item ID'
                }, {
                    field: 'name',
                    title: 'Item Name'
                }, {
                    field: 'password',
                    title: 'Item Password'
                }],
        })

        $('#table2').bootstrapTable({
            url: './data_json/boostrap_table.json',
            columns: [
                {
                    field: 'id',
                    title: 'Item ID'
                }, {
                    field: 'name',
                    title: 'Item Name'
                }, {
                    field: 'password',
                    title: 'Item Password'
                }],
        })
    </script>
</body>

</html>

本地json假数据：

[
    {
        "id": 0,
        "name": "Item 0",
        "password": "123456"
    },
    {
        "id": 1,
        "name": "Item 1",
        "password": "123456"
    },
    {
        "id": 2,
        "name": "Item 2",
        "password": "123456"
    },
    {
        "id": 3,
        "name": "Item 3",
        "password": "123456"
    },
    {
        "id": 4,
        "name": "Item 4",
        "password": "123456"
    },
    {
        "id": 5,
        "name": "Item 5",
        "password": "123456"
    },
    {
        "id": 6,
        "name": "Item 6",
        "password": "123456"
    },
    {
        "id": 7,
        "name": "Item 7",
        "password": "123456"
    },
    {
        "id": 8,
        "name": "Item 8",
        "password": "123456"
    },
    {
        "id": 9,
        "name": "Item 9",
        "password": "123456"
    }
]

实现的效果如下：