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

更新时间：2021年10月26日 08:54:45 作者：善良勤劳勇敢而又聪明的老杨

本文主要介绍了Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

1、前言

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

2、正文

2.1 开发环境介绍

后端：SpringBoot、Thymeleaf

前端：Html、Jquery、Layui插件

2.2 实现代码

html页面代码：

<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
 
...
 
<table class="table table-hover text-center" id="refreshList" th:fragment="refreshList">
  <tr>
    <th width="100" style="text-align:left; padding-left:20px;">ID</th>
    <th width="10%">景点名称</th>
    <th width="10%">图片</th>
    <th>景点类型</th>
    <th>门票价格</th>
    <th>景点负责人</th>
    <th width="10%">创建时间</th>
    <th width="20%">操作</th>
  </tr>
  <tr th:each="view : ${viewList}" >
    <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id" value="" /></td>
    <td th:text="${view.viewTitle}"></td>
    <td ><img th:src="${'/upload/img/'+view.pictureUrl}"  alt="" width="100" height="70" /></td>
    <td th:switch="${view.type}">
      <span th:case="1">收费</span>
      <span th:case="2">免费</span>
    </td>
    <td th:text="${view.price == null or view.price == '' ? '暂无' : view.price}" ></td>
    <td th:text="${view.manager}"></td>
    <td th:text="${#dates.format(view.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
    <td><div class="button-group"> <a class="button border-main" th:href="${'/view/edit.do?viewId='+view.id}" rel="external nofollow" ><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" rel="external nofollow"  th:onclick="del([[${view.id}]])"><span class="icon-trash-o"></span> 删除</a> </div></td>  
  </tr>
</table>

Js代码：

<script src="/js/jquery.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/layui/layui.all.js"></script>
...
 
//分页
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 (!first) {
                $.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<View> 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、总结

到此这篇关于Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页的文章就介绍到这了,更多相关Javaweb Html分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Java图形化编程之JFrame疫苗接种系统详解
GUI图形界面设计是用户和程序交互的工具，用户通过图形界面控制程序事件的发生。首先介绍Swing的基本体系结构，这是底层
2021-09-09
spring-kafka使消费者动态订阅新增的topic问题
这篇文章主要介绍了spring-kafka使消费者动态订阅新增的topic问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
一起来看看springboot集成redis的使用注解
这篇文章主要为大家详细介绍了springboot集成redis的使用注解，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
Spring Boot统一返回体的踩坑记录
这篇文章主要给大家介绍了关于Spring Boot统一返回体踩坑的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
jdk8 FunctionalInterface注解源码解读
这篇文章主要介绍了jdk8 FunctionalInterface注解源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-11-11
Java守护线程实例详解_动力节点Java学院整理
在Java中有两类线程：User Thread(用户线程)、Daemon Thread(守护线程) 。下面通过本文给大家分享java守护线程实例详解，需要的朋友参考下吧
2017-06-06
Java中类赋值的解释实例详解
这篇文章主要介绍了Java中类赋值的解释实例详解的相关资料,需要的朋友可以参考下
2017-06-06
Java微服务分布式调度Elastic-job环境搭建及配置
Elastic-Job在配置中提供了JobEventConfiguration，支持数据库方式配置，会在数据库中自动创建JOB_EXECUTION_LOG和JOB_STATUS_TRACE_LOG两张表以及若干索引，来记录作业的相关信息
2023-02-02
SpringBoot集成JPA持久层框架,简化数据库操作
JPA(Java Persistence API)意即Java持久化API，是Sun官方在JDK5.0后提出的Java持久化规范。主要是为了简化持久层开发以及整合ORM技术，结束Hibernate、TopLink、JDO等ORM框架各自为营的局面。JPA是在吸收现有ORM框架的基础上发展而来，易于使用，伸缩性强。
2021-06-06
Spring表达式语言SpEL用法详解
这篇文章主要介绍了spring表达式语言SpEL用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01