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>Titletitle>
<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;">
<h2>前端分页h2>
<button class='btn btn-success' onclick='add()'>创建button>
<table id="mytable">table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
<h4 class="modal-title" id="myModalLabel">提示h4>
div>
<div class="modal-body">删除成功div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">确定button>
div>
div>
div>
div>
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="@{/js/popper.min.js}">script>
<script type="text/javascript" th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.min.js?ver=s5s}" src="../static/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 "" +
" " +
"";
}
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: {
确定: function(){
dele(val);
},
取消: function(){
console.log('取消了删除');
}
}
});
}
function dele(val){
$.ajax({
url: baseUrl+"/news/deleteNews",
type: "post",
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(){
$('#myModal').modal('show');
console.log("add");
//window.location.href = baseUrl+"/news/toEditNewsDetails";
}
script>
html>
后台Java方法
/** * 后端分页,效率高 * @param pageNum * @param pageSize * @return */ @RequestMapping("/getNewsPage") @ResponseBody public MapgetNewsPage(String pageNum, String pageSize){ Map res = new HashMap<>(); try { int pageNumInt = Integer.parseInt(!StringUtils.isEmpty(pageNum) ? pageNum : "0"); int pageSizeInt = Integer.parseInt(!StringUtils.isEmpty(pageSize) ? pageSize : "1"); List 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; } }