- <!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>
<!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":"袁杰"}]
[{"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":"袁杰"}]
运行效果: