使用 BootstrapTable 实现数据的分页显示（一）

最新推荐文章于 2025-07-03 09:48:53 发布

原创最新推荐文章于 2025-07-03 09:48:53 发布 · 1.5w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap #JS #JSON #Table #表格

JS入门同时被 2 个专栏收录

30 篇文章

订阅专栏

BootStrap 教程

12 篇文章

订阅专栏

本文介绍如何使用JSON数据实现分页显示的方法，包括直接使用JSON格式数据、引用JSON文件及添加参数配置等方式，并提供了具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 json 实现数据表格的分页显示。

方法一，使用 json 格式的数据，实现分页显示。

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

<head>

    <!-- Basic -->
    <meta charset="UTF-8" />

    <title>Dashboard | Nadhif - Responsive Admin Template</title>

    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table.css">

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-table.js"></script>
    <script src="bootstrap-table-zh-CN.js"></script>

</head>

<body>



<div class="col-md-offset-3 col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title text-center">已添加教师账号</h3>
        </div>
        <div class="panel-body">
            <div id="toolbar" class="btn-group">
                <button id="btn_edit" type="button" class="btn btn-default" >
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>
            <table id="teacher_table" data-toggle="table" data-url="data1.json" data-method="post"
                   data-query-params="queryParams"
                   data-toolbar="#toolbar"
                   data-pagination="true"
                   data-search="true"
                   data-show-refresh="true"
                   data-show-toggle="true"
                   data-show-columns="true"
                   data-page-size="5"
                   data-striped="true"
            >
                <thead>
                <tr>
                    <th data-field="id">用户账号</th>
                    <th data-field="name">用户密码</th>
                    <th data-field="price">教师姓名</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>


<script>
    var mydata = '{"employees":[' +
            '{"name":"John","pwd":"Doe","t_name":"John"},' +
            '{"name":"John","pwd":"Doe","t_name":"John"},' +
            '{"name":"John","pwd":"Doe","t_name":"John"},' +
             '{"name":"John","pwd":"Doe","t_name":"John"}]}';

//    obj = JSON.parse(txt);
//
//    document.getElementById("fname").innerHTML=obj.employees[1].firstName
//    document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>

</body>

</html>

方法二，使用 json 文件和标题栏实现数据的分页显示

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

    <!-- Basic -->
    <meta charset="UTF-8" />

    <title>Dashboard | Nadhif - Responsive Admin Template</title>

    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table.css">

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-table.js"></script>
    <script src="bootstrap-table-zh-CN.js"></script>


</head>
<body>
    <table id="table" data-query-params="queryParams"
           data-toolbar="#toolbar"
           data-pagination="true"
           data-search="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-show-columns="true"
           data-page-size="5"
    >

    </table>


    <script>

                $('#table').bootstrapTable({
                    url: 'data1.json',
                    columns: [{
                        field: 'id',
                        title: 'Item ID'
                    }, {
                        field: 'name',
                        title: 'Item Name'
                    }, {
                        field: 'price',
                        title: 'Item Price'
                    }, ]
                });

        <!--$('#table').bootstrapTable({-->
            <!--columns: [{-->
                <!--field: 'id',-->
                <!--title: 'Item ID'-->
            <!--}, {-->
                <!--field: 'name',-->
                <!--title: 'Item Name'-->
            <!--}, {-->
                <!--field: 'price',-->
                <!--title: 'Item Price'-->
            <!--}],-->
            <!--data: [{-->
                <!--id: 1,-->
                <!--name: 'Item 1',-->
                <!--price: '$1'-->
            <!--}, {-->
                <!--id: 2,-->
                <!--name: 'Item 2',-->
                <!--price: '$2'-->
            <!--}]-->
        <!--});-->

    </script>

</body>
</html>
方式三，添加参数配置

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

    <!-- Basic -->
    <meta charset="UTF-8" />

    <title>Dashboard | Nadhif - Responsive Admin Template</title>

    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table.css">

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-table.js"></script>
    <script src="bootstrap-table-zh-CN.js"></script>


</head>
<body>

<table id="table"></table>

<script>

    $('#table').bootstrapTable({
        url: 'data1.json',
        queryParams:"queryParams",
        toolbar:"#toolbar",
        sidePagination:"true",
        search:"true",
        showRefresh:"true",
        showToggle:"true",
        showColumns:"true",
        pageSize:"5",
        columns: [{
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }, ]
    });

    <!--$('#table').bootstrapTable({-->
    <!--columns: [{-->
    <!--field: 'id',-->
    <!--title: 'Item ID'-->
    <!--}, {-->
    <!--field: 'name',-->
    <!--title: 'Item Name'-->
    <!--}, {-->
    <!--field: 'price',-->
    <!--title: 'Item Price'-->
    <!--}],-->
    <!--data: [{-->
    <!--id: 1,-->
    <!--name: 'Item 1',-->
    <!--price: '$1'-->
    <!--}, {-->
    <!--id: 2,-->
    <!--name: 'Item 2',-->
    <!--price: '$2'-->
    <!--}]-->
    <!--});-->

</script>

</body>
</html>

数据源

[
    {
        "id": 0,
        "name": "Item 0",
        "price": "$0"
    },
    {
        "id": 1,
        "name": "Item 1",
        "price": "$1"
    },
    {
        "id": 2,
        "name": "Item 2",
        "price": "$2"
    },
    {
        "id": 3,
        "name": "Item 3",
        "price": "$3"
    },
    {
        "id": 4,
        "name": "Item 4",
        "price": "$4"
    },
    {
        "id": 5,
        "name": "Item 5",
        "price": "$5"
    },
    {
        "id": 6,
        "name": "Item 6",
        "price": "$6"
    },
    {
        "id": 7,
        "name": "Item 7",
        "price": "$7"
    },
    {
        "id": 8,
        "name": "Item 8",
        "price": "$8"
    },
    {
        "id": 9,
        "name": "Item 9",
        "price": "$9"
    },
    {
        "id": 10,
        "name": "Item 10",
        "price": "$10"
    },
    {
        "id": 11,
        "name": "Item 11",
        "price": "$11"
    },
    {
        "id": 12,
        "name": "Item 12",
        "price": "$12"
    },
    {
        "id": 13,
        "name": "Item 13",
        "price": "$13"
    },
    {
        "id": 14,
        "name": "Item 14",
        "price": "$14"
    },
    {
        "id": 15,
        "name": "Item 15",
        "price": "$15"
    },
    {
        "id": 16,
        "name": "Item 16",
        "price": "$16"
    },
    {
        "id": 17,
        "name": "Item 17",
        "price": "$17"
    },
    {
        "id": 18,
        "name": "Item 18",
        "price": "$18"
    },
    {
        "id": 19,
        "name": "Item 19",
        "price": "$19"
    },
    {
        "id": 20,
        "name": "Item 20",
        "price": "$20"
    }
]