bootstrapTable 插件使用
Bootstrap Table API 中文版 说明文档
https://blog.csdn.net/yapengliu/article/details/80191699
前端页面 thymeleaf:
使用bootstrap-table 显示数据非常方便,而且自带分页。以下是demo。
<!DOCTYPE html> <html lang="en" xmlns:th=http://www.thymeleaf.org> <head> <meta charset="UTF-8"><meta> <title>Title</title> <link th:href="@{/css/bootstrap-table.min.css}" rel="stylesheet" href="../static/css/bootstrap-table.css" type="text/css" ></link> <link th:href="@{/bootstrap-4.4.1-dist/css/bootstrap.min.css}" rel="stylesheet" href="../static/bootstrap-4.4.1-dist/css/bootstrap.min.css" type="text/css" ></link> <link th:href="@{/css/jquery-confirm.min.css}" rel="stylesheet" type="text/css" ></link> </head> <body style="margin: 0 20px;"> <button class='btn btn-success' onclick='add()'>创建</button> <table id="mytable"></table> </body> <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}" src="../static/js/jquery-3.4.1.min.js"></script> <!--<script th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>--> <script th:src="@{/js/popper.min.js}"></script> <script type="text/javascript" th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.min.js}" ></script> <!--模态框插件--> <script th:src="@{/js/jquery-confirm.min.js}"></script> <script th:src="@{/js/bootstrap-table.js}"></script> <script th:src="@{/js/bootstrap-table-zh-CN.js}"></script> <script> var baseUrl = ""; $(function () { var pathName = window.location.pathname.substring(1); console.log(pathName); var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/')); baseUrl = window.location.protocol + '//' + window.location.host+'/' + webName; console.log(baseUrl); var dataResponse; var pageNum = ""; var pageSize = ""; $("#mytable").bootstrapTable({ url:baseUrl+"//news/getNewsPage", //请求地址 toolbar: '#toolbar', //queryParams:值是一个函数,函数参数params包括:search: sort: order: offset(处理过的,第一页offset为0): limit: queryParams: function(params){ console.log(params); pageNum = params.offset; pageSize = params.limit; return{ "pageNum":pageNum/pageSize+1, "pageSize":pageSize, } }, striped : true, //是否显示行间隔色 pagination : true,//是否分页 pageNumber: 1,//默认第1页,用于设置初始的页数 sidePagination : 'server',//server:服务器端分页|client:前端分页 pageSize : 10,//默认每页显示10条记录 pageList : [ 1,5, 10,20],//可选择单页记录数 showRefresh : true,//刷新按钮 search : false,//是否启用搜索功能。 showHeader : false,//默认为true显示表头,设为false隐藏 locale:'zh-CN',//语言 //导出功能设置(关键代码) exportDataType:'all',//'basic':当前页的数据, 'all':全部的数据, 'selected':选中的数据 showExport: true, //是否显示导出按钮 buttonsAlign:"right", //按钮位置 exportTypes:['excel'], //导出文件类型,[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //columns 本质就是显示这个,测试显示可以写死 columns : [ { title : 'id', field : 'id', sortable : true, visible : false //默认为true显示该列,设为false则隐藏该列。 }, { title : '新闻标题', field : 'title', sortable : true, }, { title : '操作', field : 'id', sortable : true, formatter: operationTable }], responseHandler: function (res) { //后端返回的非total、rows数据,转换为对应的total和rows前段可处理数据并返回 console.log("responseHandler"); console.log(res); return{ "total":res.page.total, "rows":res.page.rows } }, /*data:dataResponse,//加载json格式的数据。 onLoadSuccess: function (data) { //加载成功时执行,data只包含rows和total。 console.log("onLoadSuccess"); console.log(data); dataResponse = data.rows; },*/ onPageChange: function (pageNumber,size) { pageNum = pageNumber; pageSize = size; }, onLoadError: function (res) { //加载失败时执行 //console.log(res); } }) }) /** * 操作列 * @param value 代表当前单元格中的值,即field属性对应的值 * @param row 当前行 * @param index 代表当前行的下标, * @returns {string} 返回渲染数据 */ function operationTable(value, row, index) { return "<button class='btn btn-warning' update_uri='' onclick='toUpdate(" + JSON.stringify(row) + ")'> 修改</button>" + " " + "<button class='btn btn-danger' id='deleBtn' del_uri='/news/toEditNewsDetails/'"+row.id+" onclick='modalDelete(" + JSON.stringify(row) + ")'> 删除</button>"; } function toUpdate(val){ var row = JSON.stringify(val); console.log(val); window.location.href = baseUrl+"/news/toEditNewsDetails?id="+val.id; } function modalDelete(val){ $.confirm({ title: "提示",//默认值'Hello' content: "确定要删除吗?", //keyboardEnabled: true,//设置快捷键 //enterKeys: 'confirm', // ENTER key buttons: { cancelButtonClass: 'btn-default', 确定: { btnClass: 'btn-blue', action:function(){ dele(val); }}, 取消: function(){ console.log('取消了删除'); } } }); } function dele(val){ $.ajax({ url: baseUrl+"/news", type: "delete", async:true, data: { 'id':val.id, }, // 预期服务器返回的数据类型 dataType: "json", success: function(data){ if(data.status="succ"){ $(".modal-body").text("删除成功!"); $.alert({ title: '提示', content: '删除成功!', closeIcon: true,//右上角关闭小叉 autoClose: '关闭|500', buttons: { 关闭: function () { console.log('自动关闭'); } } }); $('#mytable').bootstrapTable('refresh',{});//局部刷新 }else{ $.alert('删除失败!'+data.msg); } } }); } function add(){ console.log("add"); window.location.href = baseUrl+"/news/toEditNewsDetails"; } </script> </html>
后台Java方法
/** * 后端分页,效率高 * @param pageNum * @param pageSize * @return */ @RequestMapping("/getNewsPage") @ResponseBody public Map<String,Object> getNewsPage(String pageNum, String pageSize){ Map<String,Object> res = new HashMap<>(); try { int pageNumInt = Integer.parseInt(!StringUtils.isEmpty(pageNum) ? pageNum : "0"); int pageSizeInt = Integer.parseInt(!StringUtils.isEmpty(pageSize) ? pageSize : "1"); List<News> newsList = newsMapper.selectPage(pageNumInt, pageSizeInt); int total = newsMapper.selectPageCount(); PageUtils pageUtils = new PageUtils(); pageUtils.setTotal(total); pageUtils.setRows(newsList); res.put("status","succ"); res.put("page",pageUtils); return res; } catch (Exception e) { res.put("status","error"); res.put("msg",e.getMessage()); return res; } }
<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
<meta charset="UTF-8"><meta>
<title>Title</title>
<link th:href="@{/css/bootstrap-table.min.css}" rel="stylesheet" href="../static/css/bootstrap-table.css" type="text/css" ></link>
<link th:href="@{/bootstrap-4.4.1-dist/css/bootstrap.min.css}" rel="stylesheet" href="../static/bootstrap-4.4.1-dist/css/bootstrap.min.css" type="text/css" ></link>
<link th:href="@{/css/jquery-confirm.min.css}" rel="stylesheet" type="text/css" ></link>
</head>
<body style="margin: 0 20px;">
<button class='btn btn-success' onclick='add()'>创建</button>
<table id="mytable"></table>
</body>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}" src="../static/js/jquery-3.4.1.min.js"></script>
<!--<script th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>-->
<script th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.min.js}" ></script>
<!--模态框插件-->
<script th:src="@{/js/jquery-confirm.min.js}"></script>
<script th:src="@{/js/bootstrap-table.js}"></script>
<script th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
<script>
var baseUrl = "";
$(function () {
var pathName = window.location.pathname.substring(1);
console.log(pathName);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
baseUrl = window.location.protocol + '//' + window.location.host+'/' + webName;
console.log(baseUrl);
var dataResponse;
var pageNum = "";
var pageSize = "";
$("#mytable").bootstrapTable({
url:baseUrl+"//news/getNewsPage", //请求地址
toolbar: '#toolbar',
//queryParams:值是一个函数,函数参数params包括:search: sort: order: offset(处理过的,第一页offset为0): limit:
queryParams: function(params){
console.log(params);
pageNum = params.offset;
pageSize = params.limit;
return{
"pageNum":pageNum,
"pageSize":pageSize,
}
},
striped : true, //是否显示行间隔色
pagination : true,//是否分页
pageNumber: 1,//默认第1页,用于设置初始的页数
sidePagination : 'server',//server:服务器端分页|client:前端分页
pageSize : 10,//默认每页显示10条记录
pageList : [ 1,5, 10,20],//可选择单页记录数
showRefresh : true,//刷新按钮
search : false,//是否启用搜索功能。
showHeader : false,//默认为true显示表头,设为false隐藏
locale:'zh-CN',//语言
//导出功能设置(关键代码)
exportDataType:'all',//'basic':当前页的数据, 'all':全部的数据, 'selected':选中的数据
showExport: true, //是否显示导出按钮
buttonsAlign:"right", //按钮位置
exportTypes:['excel'], //导出文件类型,[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],
//columns 本质就是显示这个,测试显示可以写死
columns : [ {
title : 'id',
field : 'id',
sortable : true,
visible : false //默认为true显示该列,设为false则隐藏该列。
}, {
title : '新闻标题',
field : 'title',
sortable : true,
}, {
title : '操作',
field : 'id',
sortable : true,
formatter: operationTable
}],
responseHandler: function (res) {
//后端返回的非total、rows数据,转换为对应的total和rows前段可处理数据并返回
console.log("responseHandler");
console.log(res);
return{
"total":res.page.total,
"rows":res.page.rows
}
},
/*data:dataResponse,//加载json格式的数据。
onLoadSuccess: function (data) { //加载成功时执行,data只包含rows和total。
console.log("onLoadSuccess");
console.log(data);
dataResponse = data.rows;
},*/
onPageChange: function (pageNumber,size) {
pageNum = pageNumber;
pageSize = size;
},
onLoadError: function (res) { //加载失败时执行
//console.log(res);
}
})
})
/**
* 操作列
* @param value 代表当前单元格中的值,即field属性对应的值
* @param row 当前行
* @param index 代表当前行的下标,
* @returns {string} 返回渲染数据
*/
function operationTable(value, row, index) {
return "<button class='btn btn-warning' update_uri='' onclick='toUpdate(" + JSON.stringify(row) + ")'> 修改</button>" +
" " +
"<button class='btn btn-danger' id='deleBtn' del_uri='/news/toEditNewsDetails/'"+row.id+" onclick='modalDelete(" + JSON.stringify(row) + ")'> 删除</button>";
}
function toUpdate(val){
var row = JSON.stringify(val);
console.log(val);
window.location.href = baseUrl+"/news/toEditNewsDetails?id="+val.id;
}
function modalDelete(val){
$.confirm({
title: "提示",//默认值'Hello'
content: "确定要删除吗?",
//keyboardEnabled: true,//设置快捷键
//enterKeys: 'confirm', // ENTER key
buttons: {
cancelButtonClass: 'btn-default',
确定: {
btnClass: 'btn-blue',
action:function(){
dele(val);
}},
取消: function(){
console.log('取消了删除');
}
}
});
}
function dele(val){
$.ajax({
url: baseUrl+"/news",
type: "delete",
async:true,
data: {
'id':val.id,
},
// 预期服务器返回的数据类型
dataType: "json",
success: function(data){
if(data.status="succ"){
$(".modal-body").text("删除成功!");
$.alert({
title: '提示',
content: '删除成功!',
closeIcon: true,//右上角关闭小叉
autoClose: '关闭|500',
buttons: {
关闭: function () {
console.log('自动关闭');
}
}
});
$('#mytable').bootstrapTable('refresh',{});//局部刷新
}else{
$.alert('删除失败!'+data.msg);
}
}
});
}
function add(){
console.log("add");
window.location.href = baseUrl+"/news/toEditNewsDetails";
}
</script>
</html>
源码,是痛苦的,又是快乐的,如果没有这痛苦,也就没有了这快乐!