Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页

Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页

目录1、前言2、正文 2.1 开发环境介绍2.2 实现代码2.3 实现流程说明2.4 实现效果3、总结

1、前言

最近个人在做开发的时候，需要实现前端的Html页面分页。由于好一段时间没写前端的代码了，有些生疏了。现就实践成果，做下记录与分享！

2、正文

2.1 开发环境介绍

后端：SpringBoot、Thymeleaf

前端：Html、jquery、Layui插件

2.2 实现代码

html页面代码：

...

收费

js代码：

...

//分页

layui.use('laypage', function () {

var laypage = layui.laypage;

var total = 0;

var limit = 6;

//获取列表总数量

$.ajax({

url: '/view/count.do',

type: 'POST',

dataType: 'json',

async: false,

success: function (data) {

if(data != null){

total = data;

}

}

});

//执行一个laypage实例

laypage.render({

elem: 'pageDiv', //注意，这里的 pageDiv 是 ID，不用加 # 号

count: total, //数据总数，从服务端得到

limit: limit,//页面展示数据条数

theme: '33ccff',//主题样式

jump: function (obj, first) {

if (!firavWjqiest) {

$.ajax({

url: '/view/list.do',

type: 'POST',

data: {'pageSize': obj.limit, 'pageIndex': obj.curr},

success: function (data) {

if (data != null) {

$("#refreshList").html(data);

}

}

});

}

}

});

});

后端接口：

@PostMapping("/list.do")

public String getList(PageBean pageBean, Model model){

if(Objects.isNull(pageBean)) pageBean = new PageBean();

pageBean.setPageIndex((pageBean.getPageIndex()-1)*pageBean.getPageSize());

List viewList = viewService.getList(pageBean);

model.addAttribute("viewList",viewList);

//viewList是html页面名称，refreshList是html页面内定义的元素名称，在html页面内可以看到

return "viewList::refreshList";

}

这里说明一下，初次进入页面的时候，我这边使用的是另外一个GET类型的请求获取的数据，跟上面的POST请求接口几乎一样。

2.3 实现流程说明

通过Layui的分页插件代码，点击上下页的时候，调用上面JS中的代码。并获取Layui当前的分页的参数，请求后端列表接口。然后通过thymeleaf的

th:fragment="refreshList"

将后端返回的数据，局部刷新到Html指定元素中。。。从而实现局部刷新的分页实现！！！

2.4 实现效果

3、总结

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。