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

2024-11-02 08:20:49

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分页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaWeb入门教程之分页查询功能的简单实现

一.MySql实现分页查询的SQL语句 1.分页需求: 客户端通过传递pageNo(页码),counter(每页显示的条数)两个参数去分页查询数据库表中的数据,那我们知道MySql数据库提供了分页的函数limit m,n,但是该函数的用法和我们的需求不一样,所以就需要我们根据实际情况去改写适合我们自己的分页语句,具体的分析如下: 比如: 查询第1条到第10条的数据的sql是:select * from table limit 0,10; ->对应我们的需求就是查询第一页的数据:select
javaweb分页原理详解

本文实例为大家分享了javaweb分页原理的具体实现代码,供大家参考,具体内容如下 public class Page { private int currentPage; private int totalPage; private int count; private int PageSize; private List<Product> list; private String category; } servlet: package com.learning.web.servlet;
JavaWeb分页的实现代码实例

这篇文章主要介绍了JavaWeb分页的实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下分页的分类分页的实现分为真分页和假分页两种. 1.真分页(物理分页): 实现原理: SELECT * FROM xxx [WHERE...] LIMIT ?, 10; 第一个参数是开始数据的索引位置 10是要查询多少条数据,即每页显示的条数优点: 不会造成内存溢出缺点: 翻页的速度比较慢 2.假分页(逻辑分页): 实现原理: 一次性将所有的数
JavaWeb中的简单分页完整代码(推荐)

这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action="pageServlet"> 用户名:<input type="text" name="username"><br> 密码:<input type="text" name="passwo
JavaWeb 简单分页实现代码

JavaWeb 简单分页的实现: 这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action="pageServlet"> 用户名:<input type="text" name="username"><br> 密码:<input type="text"
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页面代码: <html lang="zh-cn" xmlns:th=&qu
layui的checbox在Ajax局部刷新下的设置方法

此情况只适用于手动拼接表格.. 页面加载时,checkbox会被渲染,so初始页面的checkbox是正常的当我们自动添加checkbox,并且局部刷新的时候,新的复选框不会被渲染,所以显示是空白解决办法: 1.需要添加一行代码(渲染后的checkbox代码) <input type="checkbox" lay-skin="primary"> <div class="layui-unselect layui-form-checkbo
SpringBoot+thymeleaf+ajax实现局部刷新详情

目录前言什么是局部刷新? 优势和弊端? 实现流程案列前言什么是局部刷新? 简而言之,就是当我发送一个请求到后端后拿到数据后返回当前页面不会对整个页面进行重载而只对当前请求的模块进行刷新. 优势和弊端? 优势: 用户体验好,不需要对页面进行重载利于开发人员开发,提高开发效率前后端完全分离弊端: 不利于优化!第一次从服务器端获取的内容不包含需要动态绑定的数据,所以页面的源代码中没有这些内容,不利于收录,后期通过js添加到页面中的内容,并不会写在页面的源代码中~ 时间上的些许浪费,没
ASP.NET使用ajax实现分页局部刷新页面功能

listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) <asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled"> <
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 在没给大家介绍正文之前,先给大家展示下效果图,如果感觉还不错,请继续往下阅读: 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢?
springMVC+velocity实现仿Datatables局部刷新分页方法

因为项目中之前的模块用的分页插件是Datatables,很方便,但是新做的模块表格中的布局有变化,Datatables插件满足不了了.为了风格的统一,同时也不希望查询参数再传递回显在页面上,所以就采用局部刷新分页的实现方案. 实现方案是这样的,将表格部分提取出来,用来作为页面局部刷新的部分,文件名为list-data.vm <table class="table text-center table_acolor"> <thead> <tr> <
Ajax+php数据交互并且局部刷新页面的实现详解

什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

理由:jquery简单,兼容性好且容易封装.废话不多说,马上开始我们的Jquery插件编写吧.应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式. 需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现). 使用到技术:asp.net2.0, jquery,css 首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷. 复制代码代码如下: $.ajax({ type
UpdatePanel和jQuery不兼容局部刷新jquery失效

在做项目中发现,在使用了UpdatePanel的地方,局部刷新后,jquery失效了. 后来网上一查,才发现,jquery中的ready事件会在DOM完全加载后运行一次,而当我们实用了UpdatePanel,它只局部更新,并未重新加载页面所有Dom,所以jquery中ready事件将不会再次执行.所以,我们可以将ready事件中执行的代码提取出来,然后通过捕获ScriptManager的EndRequest事件,在每次 UpdatePanel局部刷新之后执行一次jQuery初始化代码: 复制代码
基于BootStrap实现局部刷新分页实例代码

在之前的工作中我用的分页有很多,一直不牢固,所以自己用起来也不是很顺手,这是一个局部刷新的分页,我试了很多,本想用mvcPager来做局部刷新,但是考虑到成本太高,放弃了,先来总结一下基于bootstrap的分页吧,便于自己以后使用开源地址 https://github.com/lyonlai/bootstrap-paginator 首先引用 Jquery bootstrap.min.js bootstrap-paginator.min.js 控制器代码 [AuthorizationCodeA