bootstrap-table数据循环以及分页
2017-01-18 09:36
316 查看
<!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":"袁杰"}]
运行效果:
相关文章推荐
- bootstrap-table数据循环以及分页
- bootstrap table处理含有子集json的数据以及fastjson禁止循环引用的问题
- BootStrap中的table实现数据填充与分页应用小结
- 简述bootstrap 之间版本的区别。以及结合springmvc 生成table 分页,传参
- 基于bootstrap table分页数据及行内编辑和导出数据(一)
- bootstrap-table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题。
- bootstrapTable后台完分页请求数据格式的问题
- bootstrap-table的导出数据功能的使用,以及导出中文时无效的问题(点击无效)。
- bootstrap-table当查询后再去点击分页时,后台返回的数据是正确的,前台也显示正确了,但是当我点击分页时,列表会刷新为最初的数据,而不再是本次查询得到的数据
- 基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据
- BootStrap table 数据填充与分页
- jquery将数据以table的形式显示,实现数据统计,分页,以及动态添加,搜索
- BootStrap table 数据填充与分页应用总结
- DataList的编辑、更新、删除、全选、分页以及 <EditItemTemplate>模版中的DropDownList的数据绑定
- android左右滑动加载分页以及动态加载数据
- 对数据进行分页,显示到table中。
- objective-c(四)-基本数据类型以及循环和选择结构
- 用table,js实现web动态取数据并实现分页效果
- 【EntityFramework系列教程三,翻译】在ASP.NET MVC程序中使用EntityFramework对数据进行排序、过滤筛选以及实现分页
- Extjs4.2+webAPI+EF实现分页以及webapi的数据传值(续)