bootstrap-table 使用

云飞扬12345

已于 2022-05-18 17:55:23 修改

阅读量350

点赞数

CC 4.0 BY-SA版权

分类专栏： # bootstrap 文章标签： bootstrap 前端 html

于 2022-05-18 17:53:51 首次发布

本文链接：https://blog.youkuaiyun.com/Z865785437029/article/details/124847717

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

这是一个使用Bootstrap和Bootstrap Table实现的教师账号管理界面，包含修改和删除功能。页面展示了用户账号、密码和教师姓名，支持搜索、刷新、切换列显示，并加载了本地JSON数据。

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

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
  
    <!-- Basic -->  
    <meta charset="UTF-8" />  
  
    <title>Dashboard | Nadhif - Responsive Admin Template</title>  
  
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
  
    <script src="jquery.min.js"></script>  
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.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>

[  
    {  
        "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"  
    }  
]