springboot+mybatis Plus+pagehelper+layui实现数据分页呈现模板样式
写个文档方便随时查看
后端代码实现
yml配置
## pagehelper 分页插件配制
pagehelper:
reasonable: false # 禁用合理化时，如果pageNum<1或pageNum>pages会返回空数据
support-methods-arguments: true
params: count=countSql
row-bounds-with-count: true
helper-dialect: mysql
controller
/*
* @return
*/
@ResponseBody
@RequestMapping(value = "/findAllRule", method = RequestMethod.GET)
public HashMap<String,Object> findAllRule(Integer pageNum,Integer pageSize ){
HashMap<String, Object> map = new HashMap<>();
// 开启分页支持
PageHelper.startPage(pageNum,pageSize);
List<Tright> rule = trightService.list();
PageInfo<Tright> pageInfo = new PageInfo<>(rule);
System.out.println("数据："+pageInfo.getPages());
map.put("code",0);
map.put("msg","请求成功");
//count：总数据条数
map.put("count",pageInfo.getTotal());
//data：数据
map.put("data",pageInfo.getList());
return map;
}
需要特别注意的是jar包的导入–可能会造成pagehelper拦截器不起作用
<!--pagehelper分页:插件排除pagehelper的依赖mybatis和mybatis-spring的jar包以免
与mybatis-plus的冲突，导致报NoClassFound org.mybatis.logging.LoggerFactory-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
<exclusions>
<exclusion>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
</exclusion>
<exclusion>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- mybatisPlus 核心库 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.3.1</version>
</dependency>
前端实现
导入layui以及js
<link type="text/css" href="./lib/layui/css/layui.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
样式到layui模板示例找，具体是js的实现
<div class="layui-btn-container">
<!-- -->
<button class="layui-btn" lay-event="add" id="add" lay-filter="add">
<i class="layui-icon"></i>增加</button>
</div>
<table class="layui-hide" id="test" lay-filter="test">
</table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs btn-delete" lay-event="del" >删除</a>
</script>
</div>
layui.use(['table','form'], function(){
var table = layui.table,
form = layui.form;
<!--分页-->
table.render({
elem: '#test' //至于这里这个#要不要加我也不是很清楚，查出来的资料说不用，但是layui的官网模板上又有
,url: baseUrl+"/rule/findAllRule"
,id: 'tableReload'//重载数据表格
,title: '用户权限表'
,request: {
pageName: 'pageNum'
,limitName: 'pageSize'
}
,cols: [[
{field:'trName', title: '权限名称',align: 'center', width: '35%'}
,{field:'rightDescrip', title: '权限描述',align: 'center', width: '35%'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo',align: 'center', width: '30%'}
]]
,page: true
,limits: [3,12] //一页选择显示数据条数
,limit: 3 //一页显示x条数据
,parseData: function (res) {
var result;
console.log(this);
console.log(JSON.stringify(res));
if(this.page.curr){
result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else{
result=res.data.slice(0,this.limit);
}
return{
//后端传递的那参数
"code": res.code, //解析接口状态
"msg": res.msg, //即系提示文本
"count": res.data.total, //解析数据长度
"data": res.data.data, //解析数据列表
};
}
});
//监听工具行事件
table.on('tool(test)', function(obj,data){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('确定删除改权限吗?', function(index){
obj.del();
$.ajax({
type : "get",
url: baseUrl+"/rule/deleteRuleByid?id="+data.id,
dataType : "json"
});
layer.close(index);
});
}
else if(obj.event === 'edit'){ //编辑按钮
<!--在编辑弹出层做数据回显-->
$("#name").val(data.trName);
$("#Descrip").val(data.rightDescrip);
layer.open({
//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
type: 1,
title: "修改权限设定",
area: ['420px', '300px'],
content: $("#popUpdateTest"),//引用的弹出层的页面层的方式加载修改界面表单
});
//动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
edit(obj,data);
$("#tid").val(data.id);
}
});
<!--编辑-->
function edit(data){
form.on('submit(demo11)',function () {
var trName = $("#name").val();//获取表单的输入值;
var rightDescrip = $("#Descrip").val();//获取表单的输入值;
var tid = $("#tid").val();
$.ajax({
type: "post", //数据提交方式（post/get）
url: baseUrl+"/rule/updateRuleByid",
data: {"trName": trName,
"rightDescrip": rightDescrip,
"id": tid},
dataType: "json",//返回的数据类型格式
});
})
}
//添加事件
$('#add').click(function(data){
layer.open({
//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
type: 1,
title: "添加权限设定",
area: ['420px', '300px'],
content: $("#ruleAdd"),//引用的弹出层的页面层的方式加载修改界面表单
});
addRule(data);
});
<!--添加实现-->
function addRule(data){
//监听提交 --添加
form.on('submit(add)', function (data) {
console.log(data);
//发异步，把数据提交给后端
layer.alert("增加成功", {icon: 6}, function () {
var trName = $("#limitName").val();//获取表单的输入值;
var rightDescrip = $("#limitDescrip").val();//获取表单的输入值;
$.ajax({
url: baseUrl+"/rule/insertRule",
data: {"trName": trName,
"rightDescrip": rightDescrip},
type: "post",
dataType: "json", //表示返回值类型，不必须
})
// 关闭所有弹出层 layer.close(layer.index);--关闭当前（最新）弹出层
layer.closeAll();
});
return false; //避免表单重复提交
});
}
// 刷新表格
$('#btn-refresh').on('click', function () {
// tableIns.reload()
})
});
<!--编辑弹出层-->
<div class="layui-row" id="popUpdateTest" style="display:none;">
<div class="layui-col-md10">
<form class="layui-form layui-from-pane" action="" style="margin-top:20px" >
<div class="layui-form-item">
<label class="layui-form-label">权限名称</label>
<div class="layui-input-block">
<input type="hidden" id="tid">
<input type="text" name="name" id="name" lay-verify="required" placeholder="请输入权限名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限描述</label>
<div class="layui-input-block">
<input type="text" name="Descrip" id="Descrip" lay-verify="required" placeholder="请输入权限描述" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item" style="margin-top:40px">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
实现样式
