bootstrap-table数据循环以及分页

最新推荐文章于 2024-04-03 10:52:03 发布

lucky芬

最新推荐文章于 2024-04-03 10:52:03 发布

阅读量5.1k

点赞数 1

分类专栏：数据循环

本文链接：https://blog.csdn.net/daimomo000/article/details/54598635

版权

数据循环专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>bootstrap-table</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-table.min.css"/>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table.js"></script>
    <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div class="col-md-offset-2 col-md-8">
    <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" class="text-center" data-toggle="table" data-url="data.php" 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">
                <thead>
                    <tr>
                        <th data-field="name">用户账号</th>
                        <th data-field="pwd">用户密码</th>
                        <th data-field="t_name">教师姓名</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>
</html>

data.php文件内容：

[{"name":"shangsan","pwd":"20160822","t_name":"张三"},
{"name":"lisi","pwd":"20170233","t_name":"李四"},
{"name":"wangwu","pwd":"20140985","t_name":"王五"},
{"name":"zhengkai","pwd":"20140011","t_name":"郑凯"},
{"name":"guanlin","pwd":"20141122","t_name":"关林"},
{"name":"zhaoli","pwd":"20146699","t_name":"赵丽"},
{"name":"dengming","pwd":"20167582","t_name":"邓明"},
{"name":"limin","pwd":"20142541","t_name":"李敏"},
{"name":"lixiaojuan","pwd":"20143651","t_name":"李晓娟"},
{"name":"liming","pwd":"20142015","t_name":"李明"},
{"name":"yuanjie","pwd":"20142036","t_name":"袁杰"}]

运行效果：