1.官网
url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 文档包含了表格属性、列属性、事件、方法等等.
2.引入库
只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用默认有写data-toggle=”table”,data-toggle应该知道吧，常用的有”tooltip、popover等等”，这边就不说了.
3.定义住表单
<!-- 主表单 -->
<table id="datatable"></table>
<!-- /主表单 -->
3.表格的增删改查(功能很完整)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="@{import} :: head"></head>
<style type="text/css">
#select-form{
width: 100%;
height: 50px;
border: 1px #ddd solid;
padding: 5px;
min-width: 600px;
}
#select-form label{
width: 250px;
height: 40px;
padding: 6px;
}
#select-form label input{
width: 200px;
height: 30px;
outline: none;
font-size: 12px;
text-indent: 20px;
font-weight: normal;
border-radius: 3px;
border: none;
border: 1px #ddd solid;
}
#select-form button{
outline: none;
cursor: pointer;
}
</style>
<body> <!-- nav -->
<section th:include="@{import} :: nav"></section> <!-- container start -->
<div class="wrapper">
<div class="container-fluid" id="main-container">
<div class="row">
<!-- section of left menu -->
<div class="col-md-1 col-sm-12" th:include="@{import} :: leftMenu"></div>
<!-- /section of left menu --> <!-- section of main 主表单区域 -->
<section class="col-md-11 col-sm-12 box">
<!-- 用于显示警告信息 -->
<div id="alert"></div> <!-- 表单按钮 -->
<div id="toolbar" class="btn-group btn-group-sm">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default" disabled="true">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default" disabled="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<!-- /表单按钮 -->
<!--搜索框-->
<div id="select-form">
<label class="control-label">
<span>名称：</span><input type="text" class="select-name" placeholder="请输入用户名称"/>
</label>
<label class="control-label">
<span>描述：</span><input type="text" class="select-description" placeholder="请输入描述"/>
</label>
<button class="btn btn-default btn-sm btn-search bt">搜索</button>
</div>
<!--/搜索框-->
<!-- 主表单 -->
<table id="datatable"></table>
<!-- /主表单 --> <!-- 新增/编辑 表单 -->
<div class="modal fade" id="datatable-editor" tabindex="-1" role="dialog" aria-labelledby="datatable-editor">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">编辑表单</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form">
<input type="hidden" name="id" id="id" />
<input type="hidden" name="_method" id="_method" />
<div class="form-group">
<label for="name" class="col-md-2 control-label">名称</label>
<div class="col-md-10">
<input type="text" name="name" id="name" class="form-control" placeholder="名称">
</div>
</div>
<div class="form-group">
<label for="description" class="col-md-2 control-label">描述</label>
<div class="col-md-10">
<input type="text" name="description" id="description" class="form-control" placeholder="描述">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btn-ok" class="btn btn-primary pt-close">保存</button>
<button type="button" id="btn-cancel" class="btn btn-default pt-close" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- /新增/编辑 表单 --> <!-- 删除确认 -->
<div class="modal fade" id="datatable-confirm" tabindex="-1" role="dialog" aria-labelledby="datatable-confirm">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">删除确认</h4>
</div>
<div class="modal-body">
<p>确认删除以下数据,此操作不可恢复?</p>
<ul class="list-group" id="delete-list"></ul>
</div>
<div class="modal-footer">
<button type="button" id="btn-ok" class="btn btn-primary pt-close">确认</button>
<button type="button" id="btn-cancel" class="btn btn-default pt-close" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- /删除确认 -->
</section>
<!-- /section of main -->
</div>
</div>
</div>
<!--/.container end--> <script th:inline="javascript">
$(document).ready(function() {
var tableEditor = $("#datatable-editor");
var URL = {
insert : {url : "/system/role/roles" , method : "POST"},
update : {url : "/system/role/roles" , method : "PUT"},
"delete" : {url : "/system/role/roles/batch" , method : "DELETE"}
} var getEditorInsert = function() {
tableEditor.find("#_method").val(URL.insert.method);
var url = URL.insert.url;
return {editor : tableEditor, url : url};
} var getEditorUpdate = function(id) {
tableEditor.find("#_method").val(URL.update.method);
var url = URL.update.url + "/" + id;
return {editor : tableEditor, url : url};
} var getEditorDelete = function() {
var url = URL["delete"].url;
return {editor : tableEditor, url : url , method: URL["delete"].method};
} /* 表格操作 */
// 根据选中项目数切换按钮点击状态
var changeToolbarStatus = function(row,tr) {
var select = $('#datatable').bootstrapTable('getSelections');
$("#toolbar").find("#btn_edit").attr("disabled",select.length != 1);
$("#toolbar").find("#btn_delete").attr("disabled",select.length == 0);
}
// 表格属性
var initTable = function() {
$('#datatable').bootstrapTable({
showColumns: true,
toolbar: "#toolbar",
iconSize: "sm",
idField : "id",
clickToSelect: true, url: "roles",
contentType: "application/x-www-form-urlencoded",
dataField : "rows",
queryParams: function(params) {
params["std.offset"] = params.offset;
params["std.limit"] = params.limit;
return params;
}, sidePagination: "server",
pagination: true,
pageNumer: 1,
pageSize: 20,
pageList: [20,50,100], columns:[
{
title:'',
field:'_select',
checkbox:true,
align:'center'
},
{
title: "ID",
field: "id",
visible: false
},
{
title: "名称",
field: "name"
},
{
title: "描述",
field: "description"
}
], onCheck: changeToolbarStatus,
onUncheck: changeToolbarStatus
});
}
initTable(); // ajax提交数据后的操作
var onSubmitOver = function(data) {
if(data.success)
$("#datatable").bootstrapTable("refresh");
else {
var html = '<div class="alert alert-warning alert-dismissible fade in" role="alert">';
html += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>';
html += '<p>' + data.errorMsg + '</p>';
html += '</div>';
$("#alert").append(html);
}
} // 用于打开编辑表单
var openEditor = function(editor,onBeforeOpen) {
return new Promise(function(resolve,reject) {
if(onBeforeOpen)
onBeforeOpen(editor.editor.find("form")); editor.editor.modal('show');
editor.editor.find("input[type=text]:first")[0].focus(); editor.editor.find("#btn-ok").on("click",function() {
var data = editor.editor.find("form").serializeArray();
resolve(data);
editor.editor.modal("hide");
});
editor.editor.find("#btn-cancel").on("click",function() {
reject();
}); });
}
// 用于对第一个输入框聚焦
tableEditor.on("shown.bs.modal",function() {
tableEditor.find("input[type=text]:first")[0].focus();
});
// 关闭时清除form内容
tableEditor.on("hidden.bs.modal",function() {
tableEditor.find(":input").not(':button,:submit,:reset').val("");
}); // 打开新增表单
$("#toolbar").find("#btn_add").on("click",function() {
var editor = getEditorInsert();
openEditor(editor).then(function(data) {
var submitParam = {};
for(idx in data) {
var item = data[idx];
if(item.name != "id") {
submitParam[item.name] = item.value;
}
}
$.post(editor.url,submitParam,onSubmitOver,'json');
});
}); // 打开编辑表单
$("#toolbar").find("#btn_edit").on("click",function() {
var select = $('#datatable').bootstrapTable('getSelections');
var line = select[0]; var beforeOpen = function(form) {
$.each(line,function(key,value) {
form.find("#" + key).val(value);
});
}
var editor = getEditorUpdate(line.id);
openEditor(editor,beforeOpen).then(function(data) {
var submitParam = {};
for(idx in data) {
var item = data[idx];
submitParam[item.name] = item.value; }
//console.info(submitParam)
$.post(editor.url,submitParam,onSubmitOver,'json');
});
}); // 删除确认
var deleteConfirm = function() {
return new Promise(function(resolve,reject) {
var select = $('#datatable').bootstrapTable('getSelections');
if(select.length == 0) {
reject();
return;
} $("#datatable-confirm").find("#btn-ok").on("click",function() {
resolve(select);
$("#datatable-confirm").modal("hide");
});
$("#datatable-confirm").find("#btn-cancel").on("click",function() {
reject();
});
$("#datatable-confirm").modal("show");
});
}
// 删除按钮点击
$("#toolbar").find("#btn_delete").on("click",function() {
var editor = getEditorDelete();
deleteConfirm().then(function(select) {
var ids = [];
$.each(select,function(idx,item) {
ids.push(item.id);
}); $.post(editor.url,{"_method":editor.method,ids:ids},onSubmitOver,'json');
});
});
// 查询用户
var oInp=document.querySelector('.select-name');
var oSet=document.querySelector('.select-description');
var searchName=null,searchDes=null;
var str='';
var arrDate=[];
function getName(){
searchName = oInp.value;
}
function getDes(){
searchDes = oSet.value;
}
oInp.oninput = getName;
oSet.oninput = getDes;
$('#select-form').find('.btn-search').on('click',function(){
//按name和description检索
if(searchName!= null && searchDes!= null){
$.ajax({
async: false,
type: "get",
url:'http://*.*.*.*:8090/system/role/roles',
contentType : "application/x-www-form-urlencoded; charset=utf-8",
data:{
name:searchName,
description:searchDes
},
success: function (res) {
$('#datatable').bootstrapTable('removeAll') //删除表格数据
$('#datatable').bootstrapTable('append', res.rows) //新增表格数据
},
error: function (err) {
console.log('服务器有误'+err)
}
})
//按name搜索
}else if(searchName != '' && searchDes == null){
$.ajax({
async: false,
type: "get",
url:'http://*.*.*.*:8090/system/role/roles',
contentType : "application/x-www-form-urlencoded; charset=utf-8",
data:{
name:searchName
},
success: function (res) {
$('#datatable').bootstrapTable('removeAll') //删除表格数据
$('#datatable').bootstrapTable('append', res.rows) //新增表格数据
},
error: function (err) {
console.log('服务器有误'+err)
}
})
}else if(searchName == null && searchDes != ''){
$.ajax({
async: false,
type: "get",
url:'http://*.*.*.*:8090/system/role/roles',
contentType : "application/x-www-form-urlencoded; charset=utf-8",
data:{
description:searchDes
},
success: function (res) {
$('#datatable').bootstrapTable('removeAll') //删除所有表格数据
$('#datatable').bootstrapTable('append', res.rows) //新增表格数据
},
error: function (err) {
console.log('服务器有误'+err)
}
})
}
})
});
</script>
<!-- footer -->
<div th:include="@{import} :: footer"></div>
</body>
</html>
4.中文文档
https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1(网站转载)
5.效果图
刚想贴图，发现服务器炸了······下次再贴 看这个的时候对着文档一起看。