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;"> <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-default" data-dismiss="modal">关闭</button>--> <button type="button" class="btn btn-primary">确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </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="@{/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?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 "<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: { 确定: 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 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; } }
原文：https://www.cnblogs.com/erlongxizhu-03/p/12193258.html