1 bootstrap-table插件介绍
一个基于bootstrap的表格渲染插件,可以极大的简化表格的渲染操作
2 下载
github：https://github.com/wenzhixin/bootstrap-table
中文官网：https://www.bootstrap-table.com.cn/
英文官网：https://bootstrap-table.com/
下载后相关的依赖都在dist文件夹下
3 入门案例
请求json数据渲染表格
3.1 搭建工程
其中data.json的数据文件内容如下：
[
{"id":"1","name":"tom","sal":"4000","sex":"男","age":"18"},
{"id":"2","name":"jerry","sal":"2000","sex":"女","age":"26"},
{"id":"3","name":"heliufang","sal":"8000","sex":"男","age":"25"},
{"id":"4","name":"lucy","sal":"2500","sex":"女","age":"28"},
{"id":"5","name":"linda","sal":"1000","sex":"女","age":"16"},
{"id":"6","name":"jack","sal":"2500","sex":"男","age":"28"}
]
这个data.json只是在做前端分页的时候使用
3.2 编写测试代码
【1.入门案例.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入相关样式表 -->
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
</head>
<body>
<!-- 创建表格容器 -->
<table id="table"></table>
<!-- 引入相关js -->
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//通过bootrap-table插件渲染表格
$('#table').bootstrapTable({
url: 'json/data.json',//请求的url
columns: [{
field: 'id',
title: '序号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'sal',
title: '薪水'
}, {
field: 'sex',
title: '性别'
},{
field: 'age',
title: '年龄'
}]
});
</script>
</body>
</html>
测试结果如下：
可以看到插件自动帮我们把数据渲染好了,是不是很方便！！！
4 前端分页实现
【2.前端分页.html】将【1.入门案例.html】中的渲染的js代码改成如下：
//通过bootrap-table插件渲染表格
$('#table').bootstrapTable({
url: 'json/data.json',
columns: [{
field: 'id',
title: '序号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'sal',
title: '薪水'
}, {
field: 'sex',
title: '性别'
},{
field: 'age',
title: '年龄'
}],
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,//初始化加载第一页，默认第一页,并记录
pageSize: 2,//每页的记录行数（*）
pageList: [2, 5, 10, 20], //可供选择的每页的行数（*）
search: true,//是否显示表格搜索
strictSearch: false,//是否使用严格搜索模式
showColumns: true, //是否显示所有的列（选择显示的列）
showRefresh: true,//是否显示刷新按钮
minimumCountColumns: 2,//最少允许的列数
clickToSelect: true,//是否启用点击选中行
//height: 500,//行高，如果没有设置height属性，表格自动根据记录条数设置表格高度
uniqueId: "id",//每一行的唯一标识，一般为主键列
showToggle: true,//是否显示详细视图和列表视图的切换按钮
cardView: false,//是否显示详细视图
detailView: false,//是否显示父子表
});
效果如下：
5 工具栏
工具栏实现分为两步
-
准备工具按钮容器
-
bootstrap-table中引用插件
加上这个配置即可：toolbar: '#toolbar', //工具按钮用哪个容器
案例【3.工具栏.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入相关样式表 -->
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
</head>
<body>
<!-- 工具栏容器 -->
<div id="toolbar" class="row" style="margin-left: 5px;">
<button type="button" class="btn btn-default col-md-4">新增</button>
<button type="button" class="btn btn-info col-md-4">修改</button>
<button type="button" class="btn btn-danger col-md-4">删除</button>
</div>
<!-- 创建表格容器 -->
<table id="table"></table>
<!-- 引入相关js -->
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//通过bootrap-table插件渲染表格
$('#table').bootstrapTable({
url: 'json/data.json',
columns: [{
field: 'id',
title: '序号'
}, {
field: 'name',
title: '姓名'
}, {
field: 'sal',
title: '薪水'
}, {
field: 'sex',
title: '性别'
},{
field: 'age',
title: '年龄'
}],
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
pageSize: 2, //每页的记录行数（*）
pageList: [2, 5, 10, 20], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索
strictSearch: false,
showColumns: true, //是否显示所有的列（选择显示的列）
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数设置表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
});
</script>
</body>
</html>
效果如下：
6 后端分页
后端接口,我后端是java写的具体分页代码就不上了,这里把接口文档写出来
-
请求方式：GET
-
请求参数
pageNum:查询的是哪一页
pageSize：每页显示的条数
name：姓名
age：年龄
比如：http://localhost:8080/user/searchPage?name=tom&age=&pageSize=2&pageNum=1
- 响应(json)
注意：这里必须是返回{"total":"","rows",[]}这种格式的数据
total是总共的记录数量
rows是当前页查出来的记录对象数组
{
"total": 1,
"rows": [
{
"id": 1,
"name": "tom",
"age": 18,
"gender": "1",
"createTime": "2021-02-22 09:53:24"
}
]
}
【4.后端分页.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入相关样式表 -->
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
</head>
<body>
<div class="container">
<!-- 工具栏 -->
<div id="toolbar" class="row" style="margin-left: 5px;">
<form class="form-inline">
<button type="button" class="btn btn-success">新增</button>
<div class="form-group">
<label>姓名</label><input type="text" class="form-control" id="nameTxt"/>
</div>
<div class="form-group">
<label>年龄</label><input type="text" class="form-control" id="ageTxt"/>
</div>
<button onclick="search()" type="button" class="btn btn-info">查询</button>
</form>
</div>
<!-- 创建表格容器 -->
<table id="myTable"></table>
</div>
<!-- 引入相关js -->
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//封装一个初始化表格的方法
function initTable(tableId,url,columns,query){
//将原有的表格销毁
$("#"+tableId).bootstrapTable('destroy');
//通过bootrap-table插件渲染表格
var myTable = $('#'+tableId).bootstrapTable({
method: 'GET', //请求方式（*）
url: url,
columns: columns,
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,//是否显示分页（*）
sortable: false,//是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式：client客户端分页，server服务端分页
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
pageSize: 2, //每页的记录行数（*）
pageList: [2, 5, 10, 20],//可供选择的每页的行数（*）
search: false,//是否显示表格搜索
strictSearch: false,
showColumns: true,//是否显示所有的列（选择显示的列）
showRefresh: true,//是否显示刷新按钮
minimumCountColumns: 2,//最少允许的列数
clickToSelect: true,//是否启用点击选中行
//height: 500,//行高，如果没有设置height属性，表格自动根据记录条数设置表格高度
uniqueId: "id",//每一行的唯一标识，一般为主键列
showToggle: false,//是否显示详细视图和列表视图的切换按钮
cardView: false,//是否显示详细视图
detailView: false,//是否显示父子表
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
/* var temp = {
pageSize: params.limit, //页面大小
pageNum: (params.offset / params.limit) + 1, //页码
//sort: params.sort, //排序列名
//sortOrder: params.order //排位命令（desc，asc）
//自定义的参数
name:params.name, //姓名
age:params.age //年龄
}; */
if(null == query || undefined == query){
query = {};
}
query.pageSize = params.limit; //页面大小
query.pageNum = (params.offset / params.limit) + 1; //页码
console.log(query);
return query;
}
});
}
//初始化列信息
var columns = [
{
field: 'id',
title: '序号'
},
{
field: 'name',
title: '姓名'
},
{
field: 'gender',
title: '性别',
//formatter 为格式化函数,后端返回的性别类型: 1男2女 所以这里要处理一下再显示
formatter: function(value, row, index){
//console.log(value);//当前列数据
//console.log(row);//当前行json数据
if(value == 1){
return "男";
}
return "女";
}
},
{
field: 'age',
title: '年龄'
},
{
field: '',
title: '操作',
//如果需要对列处理可以写在formatter函数中
formatter: function(value,row,index){
return '<button onclick="updateFun('+row.id+')" type="button" class="btn btn-warning btn-xs">修改</button> '
+ '<button onclick="deleteFun('+row.id+')" type="button" class="btn btn-danger btn-xs">删除</button>'
}
}
];
//点击修改按钮
function updateFun(data){
alert("修改："+data)
console.log(data)
}
//点击删除按钮
function deleteFun(data){
alert("删除："+data)
console.log(data)
}
//点击查询按钮
function search(){
var name = $("#nameTxt").val();
var age = $("#ageTxt").val();
var queryParams = {name,age};
initTable("myTable",'http://localhost:8080/user/searchPage',columns,queryParams);
}
//第一次进入页面加载表格
initTable("myTable",'http://localhost:8080/user/searchPage',columns,null);
</script>
</body>
</html>
运行效果如下：
