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

痛定思痛。 2022-07-16 05:59 457阅读 0赞

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

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
    
        
        <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>
    
        
        <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'
                        }, ]
                    });
    
            
                
                    
                    
                
                    
                    
                
                    
                    
                
                
                    
                    
                    
                
                    
                    
                    
                
            
    
        </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"
        }
    ]