bootstrap-table的基本使用
一、基本使用步骤
1.引入相关资源文件
页面如下：
代码如下（示例）：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>bootstrap-table</title>
<!--css样式-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<!--js样式-->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<%--表格导出脚本引入--%>
<script src="js/bootstrap-table-export.min.js"></script>
<script src="js/tableExport.min.js"></script>
<script src="js/jspdf.min.js"></script>
<script src="js/jspdf.plugin.autotable.js"></script>
<%--表格打印脚本--%>
<script src="js/bootstrap-table-print.min.js"></script>
</head>
<body>
<div id="toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<span>偏移量: </span>
<input name="offset" class="form-control w70" type="number" value="0">
</div>
<div class="form-group">
<span>限制: </span>
<input name="limit" class="form-control w70" type="number" value="5">
</div>
<div class="form-group">
<input name="search" class="form-control" type="text" placeholder="搜索">
</div>
<div class="form-group">
<button id="print" class="btn btn-info btn-undefined" type="button" name="print" aria-label="Print" title="Print"><i class="glyphicon glyphicon-print icon-share"></i> 打印</button>
</div>
<button id="ok" type="submit" class="btn btn-primary">查询</button>
</div>
</div>
<div class="container" style="margin-top: 150px">
<table id="table"></table>
</div>
<script>
//打印事件
$("#print").click(function (){
var printData = $('#table').parent().html();
window.document.body.innerHTML = printData;
// 开始打印
window.print();
window.location.reload(true);
})
</script>
<script>
$("#table").bootstrapTable({
url: 'user/findAllUser', //请求路径
method: 'get', //请求方式
dataType:"json", //表格数据类型
cache:false, //不缓存
striped:true, //是否紧凑
pagination:true, //启用分页
sidePagination: "client", //客户端分页
sortable:true, //客户端排序一般排序方式排序字段同用
sortOrder:"asc", //排序方式 desc 降序 asc 升序
// silentSort:true, //静态排序
toolbar:"#toolbar", //自定义工具栏
detailView:true, //显示详细视图
detailFormatter:function (index,row){
var html = []
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>')
})
return html.join('')
}, //显示详细视图的数据转换函数
rowStyle:function (row,index){
var classes = [
'info',
'active',
'success',
'danger',
'warning'
]
if (index % 2 === 0 && index / 2 < classes.length) {
return {
classes: classes[index / 2]
}
}
return {
css: {
color: 'blue'
}
}
}, //定义行样式类型
iconSize: "undefined", //定义图标大小可选值 undefined | ls | sm
showColumnsSearch: true, //显示列搜索框
showColumns: true, //显示选择列
showColumnsToggleAll: true, //显示列切换全部
pageList: "[10, 25, 50, 100, 200, All]", //定义可选的行数
// pageNumber:"1", //定义在第几页
// pageSize:"2", //定义初始化页面大小
paginationPreText: "上一页", //上一页文字
paginationNextText: "下一页", //下一页文字
showButtonText: true, //显示按钮文字
paginationHAlign: "left", //页数选择栏在左边
paginationDetailHAlign: "right", //页面大小选择在右边
search:true, //显示搜索框
showExport: true, //显示导出按钮
exportDataType: "basic", //默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据
// exportButton:$("#id"), //绑定自定义按钮样式和图标
exportOptions: {
fileName:"用户数据", //文件名
worksheetName:"sheet1", //表格工作区名
tableName: "文档数据表格", //表格名
}, //导出参数设置
showSearchButton: true, //显示搜索按钮
showSearchClearButton: true, //显示搜索清除按钮
showRefresh: true, //显示刷新按钮
showFullscreen: true, //是否全屏显示
buttonsClass:"info", //按钮的类选择器名
showPaginationSwitch: true, //显示或隐藏分页信息
clickToSelect:true, //点击行进行选中checkbox
// buttonsPrefix:"btn btn-sm", //按钮前缀的定义
// cardView:true, //表格卡视图
showToggle: true, //显示详细信息转换按钮
columns: [{
checkbox: true,},
{
title: "序号",
formatter:function (value,row,index){
return index+1;
}
},
{
field: 'id', title: 'id', visible: false,switchable:false /*决定是否列切换与否*/},
{
field: 'name',title: '姓名'},
{
field: 'gender',title: '性别'},
{
field: 'age', title: '年龄'},
{
field: 'address', title: '籍贯'},
{
field: 'qq', title: 'QQ'},
{
field: 'email', title: 'email'},
{
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
width: 200,
events: {
'click #edit': function (e, value, row, index) {
alert(row.id)
},
'click #delete': function (e, value, row, index) {
deleteInfo(row.id);
},
'click #add': function (e, value, row, index) {
}
},
formatter: function (value, row, index) {
var result = "";
result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#updateBookInfo">编辑</button>';
result += '<button id="add" class="btn btn-success" data-toggle="modal" data-target="#addBookInfo" style="margin-left:10px;">添加</button>';
result += '<button id="delete" class="btn btn-danger" style="margin-left:10px;">删除</button>';
return result;
}
}
],
});
</script>
</body>
</html>
详细文档请参考官网：
bootstrap-table官网