Thymeleaf+Ajax实现异步加载表格数据并分页实现

由于thymeleaf获取的数据是从后台页面跳转时得到的,如果想更新域中数据必须再次请求页面,首先异步刷新思路如下:

一:将要刷新的组件给上id,也可以通过在目标组件上标注th:fragment="xxx",
目的在于能够获取到要刷新的这个组件。

二:通过ajax发送请求到后台,在跳转回页面时跳转地址不是页面,而是组件例如:
	return "menu/index :: #roles_card",这里的#后面接的是组件id。

前台分页代码:(新手写的代码又臭又长见谅!)

<ul class="pagination mt-2">
					<li class="page-item" th:classappend="${pageInfo.current}<1?'disabled':''">
                        <a class="page-link"  onclick="to_page(1)">首页</a></li>
					<li class="page-item" th:classappend="${pageInfo.current}<=1?'disabled':''">
                        <a class="page-link"  th:onclick="to_page([[${pageInfo.current}-1]])">前一页</a></li>
					<li class="page-item" th:each="i :${#numbers.sequence(1,pageInfo.pages)}"
						th:classappend="${pageInfo.current == i}? 'page-item active' :'page-item' ">
                        <a class="page-link" th:text="${i}" th:onclick="to_page([[${i}]])"></a></li>
					<li class="page-item"  					                	
                        th:classappend="${pageInfo.current}ge${pageInfo.pages}?'disabled':''">
                        <a class="page-link" th:onclick="to_page([[${pageInfo.current}+1]])">后一页</a></li>
					<li class="page-item"><a class="page-link"  th:onclick="to_page([[${pageInfo.pages}]])">						末页</a></li>
				</ul>

ajax代码:

function to_page(pn){
    $.ajax({
        url:"/role/role-page",
        data:"pn="+pn,
        type:"GET",
        cache: false,
        success:function(result){
            $("#roles_card").html(result);
        }
    });
}

后台代码:

    /**
     * 角色的分页查询
     * @param pn //要查询的页码
     * @return
     */
    @GetMapping("/role-page")
    public String getEmpsWithJson(
            @RequestParam(value = "pn",defaultValue = "1") Integer pn,ModelMap map) {
        System.out.println(pn);
        Page<Role> page = new Page<>(pn,2);
        Page<Role> rolePage = roleService.page(page, null);
        map.addAttribute("pageInfo", rolePage);
        return "menu/sysPermisMgr/rolemanage :: #roles_card";
    }

表格+分页组件代码:

<div id="roles_card" class="card m-b-20">
	<div  class="card-body">
		<table id="roles_table" class="table table-striped table-hover table-bordered" width="100%" >
			<thead>
				<tr class="text-center font-16">
					<th>编号</th>
					<th>角色描述</th>
					<th>创建时间</th>
					<th>可用状态</th>
					<th >分配权限</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="role:${pageInfo.records}">
					<td class="text-center" th:text="${role.getId()}">1</td>
					<td class="text-center" th:text="${role.getRoleDesc()}">学院领导</td>
					<td class="text-center" th:text="${#dates.format(role.getCreateTime(), 'yyyy-MM-dd 									HH:mm')}">2021-1-13</td>
					<td class="text-center">
						<span th:if="${role.getRoleStatus()=='0'}" th:value="0"
                        class="btn btn-sm text-white" style="background-color: #5cca78">可用</span>
						<span th:if="${role.getRoleStatus()=='1'}" th:value="1" 
                        class="btn btn-sm text-white" style="background-color: #be2626">不可用</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="card-footer">
		<div class="row">
            <!--此处pageInfo是mybatisplus自带分页生成的分页信息,包含records:值,total:总数
            	current:当前页,pages:所有页等-->
			<div class="col-6">
				当前第[[${pageInfo.current}]],总共[[${pageInfo.pages}]],[[${pageInfo.total}]]条记录
			</div>
			<div class="col-6">
				<ul class="pagination mt-2">
                    
					<li class="page-item" th:classappend="${pageInfo.current}<1?'disabled':''">
                        <a class="page-link"  onclick="to_page(1)">首页</a></li>
					<li class="page-item" th:classappend="${pageInfo.current}<=1?'disabled':''">
                        <a class="page-link"  th:onclick="to_page([[${pageInfo.current}-1]])">前一页</a></li>
					<li class="page-item" th:each="i :${#numbers.sequence(1,pageInfo.pages)}"
						th:classappend="${pageInfo.current == i}? 'page-item active' :'page-item' ">
                        <a class="page-link" th:text="${i}" th:onclick="to_page([[${i}]])"></a></li>
					<li class="page-item"  					                	
                        th:classappend="${pageInfo.current}ge${pageInfo.pages}?'disabled':''">
                        <a class="page-link" th:onclick="to_page([[${pageInfo.current}+1]])">后一页</a></li>
					<li class="page-item"><a class="page-link"  th:onclick="to_page([[${pageInfo.pages}]])">						末页</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

实现效果:
在这里插入图片描述

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

百度云盘分享 简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除,从账户中取出amt,如果amt>账户余额抛出异常,一个实体Bean可以表示不同的数据实例,我们应该通过主键来判断删除哪个数据实例&hellip;&hellip; ejbCreate函数用于初始化一个EJB实例 5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口函数得到远程接口的引用,用远程接口的引用访问EJB。 EJB中JNDI的使用源码例子 1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context&hellip;&hellip; ftp文件传输 2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上直接地使用它,但是它的主要作用是供程序使用的。本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除&hellip;&hellip; Java Socket 聊天通信演示代码 2个目标文件,一个服务器,一个客户端。 Java Telnet客户端实例源码 一个目标文件,演示Socket的使用。 Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密   Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。   设定字符串为“张三,你好,我是李四”   产生张三的密钥对(keyPairZhang)   张三生成公钥(publicKeyZhang)发送给李四,这里发送的是公钥的数组字节   通过网络或磁盘等方式,把公钥编码传送给李四,李四接收到张三编码后的公钥,将其解码,李四用张三的公钥加密信息,发送给李四,张三用自己的私钥解密从李四处收到的信息&hellip;&hellip; Java利用DES私钥对称加密代码实例 同上 java聊天室 2个目标文件,简单。 java模拟掷骰子2个 1个目标文件,输出演示。 java凭图游戏 一个目标文件,简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥   Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥,通常应对私钥加密后再保存、如何从文件中得到公钥编码的字节数组、如何从字节数组解码公钥。 Java数据压缩与传输实例 1个目标文件 摘要:Java源码,文件操作,数据压缩,文件传输   Jav
简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除,从账户中取出amt,如果amt>账户余额抛出异常,一个实体Bean可以表示不同的数据实例,我们应该通过主键来判断删除哪个数据实例&hellip;&hellip; ejbCreate函数用于初始化一个EJB实例 5个目标文件,演示Address EJB的实现 ,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口函数得到远程接口的引用,用远程接口的引用访问EJB。 EJB中JNDI的使用源码例子 1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context&hellip;&hellip; ftp文件传输 2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上直接地使用它,但是它的主要作用是供程序使用的。本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除&hellip;&hellip; Java Socket 聊天通信演示代码 2个目标文件,一个服务器,一个客户端。 Java Telnet客户端实例源码 一个目标文件,演示Socket的使用。 Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密   Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。   设定字符串为“张三,你好,我是李四”   产生张三的密钥对(keyPairZhang)   张三生成公钥(publicKeyZhang)发送给李四,这里发送的是公钥的数组字节   通过网络或磁盘等方式,把公钥编码传送给李四,李四接收到张三编码后的公钥,将其解码,李四用张三的公钥加密信息,发送给李四,张三用自己的私钥解密从李四处收到的信息&hellip;&hellip; Java利用DES私钥对称加密代码实例 同上 java聊天室 2个目标文件,简单。 java模拟掷骰子2个 1个目标文件,输出演示。 java凭图游戏 一个目标文件,简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥   Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥,通常应对私钥加密后再保存、如何从文件中得到公钥编码的字节数组、如何从字节数组解码公钥。 Java数据压缩与传输实例 1个目标文件 摘要:Java源码,文件操作,数据压缩,文件传输   Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲
©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值