Layui实现删除及修改后停留在当前页

1、功能概述?

我们在使用layui框架的table显示数据的时候,会经常的使用分页技术,这个我们期望能够期望修改数据能停留在当前页,或者删除数据的时候也能够停留在当前页,这样的用户体验会更好一些,但往往事与愿违,实现这个功能非常的困难。

本人经过多次实验,提供一种较为简单的,行之有效的,实现删除和修改停留当前页的方式。

2、具体实现过程如下

2.1、Layui后端的创建方式

我这个案例是使用mybatisplus查询数据,没有什么值得说的。

重点是:layui的table接收的数据格式需要特定的格式:

Map<String, Object> results = new HashMap<>();
    results.put("code", 0);
    results.put("msg", "执行成功");
    results.put("count", DutyList.getTotal());
    results.put("data", DutyList.getRecords());

而且code的值必须是0,count后面是数据的总条数,data是当前的分页数据。

后端不管通过那种方式实现分页都可以,需要注意的是:layui的数据表格table,向后端传递的当前名称为page,每页的记录数是limit,这两个参数的名称是固定的。

//查询值班人员信息
@RequestMapping("/list")
@ResponseBody
public Map<String, Object> list(@RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "10") int limit, @RequestParam(defaultValue = "") String dutyName, @RequestParam(defaultValue = "") String dutyAddress) {Page<DutyInfo> pageParam = new Page<>(page, limit);QueryWrapper<DutyInfo> queryWrapper = new QueryWrapper<>();queryWrapper.like("dutyname", dutyName);queryWrapper.like("dutyaddress", dutyAddress);Page<DutyInfo> DutyList = dutyInfoService.selectPage(pageParam, queryWrapper);Map<String, Object> results = new HashMap<>();results.put("code", 0);results.put("msg", "执行成功");results.put("count", DutyList.getTotal());results.put("data", DutyList.getRecords());return results;
}

2.2、配置layui中table.render的当前页参数

下面的代码重点是需要关注currentPage的设置。

//定义当前默认的页数
var currentPage =  1;
//展示已知数据
table.render({elem: '#dutyinfo',url:'/duty/list',cols: [[ //标题栏{field: 'id', title: '编号', width: '6%', sort: true}……表格其他列,不做过多展示
,{title: '操作', width: '14%',toolbar: '#editduty'}]],skin: 'line' //表格风格,even: true,page:{layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],limits: [5, 10, 15],limit: 5 //每页默认显示的数量,curr:currentPage},done: function(res, curr, count){// 数据渲染完毕的回调函数currentPage = curr;//将当前页码赋值给全局变量currPage}
});

2.3、通过toolbar创建删除按钮

<script type="text/html" id="editduty">{{#  if(d.dutystate==1){  }}<a class="layui-btn layui-btn layui-btn-xs" lay-event="deleteduty">删除</a>{{# } }}
</script>

2.4、删除按钮事件

下面的步骤相对较多,建议一步步测试,获取到想要的数据。

// 单元格工具事件
table.on('tool(dutyinfo)', function(obj){ //注:tool 是工具条事件名,dutyinfo 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data //获得当前行数据,layEvent = obj.event //获得 lay-event 对应的值if(layEvent === 'deleteduty'){//获取当前页数var currentPage = $(".layui-laypage-skip .layui-input").val();
//通过异步请求实现删除数据功能$.get("/duty/deleteDutyInfo",{"id":data.id},function(msg){//获取table中数据总条数--删除前的总条数var tablecount = $(".layui-laypage-count").text();//截取条数,获取的原始数据 数据如:总 12 条
//从数据中截取中当前页12tablecount=tablecount.substring(2,tablecount.length-1);//得到当前table的limit,这limit就是每页的记录数var limit = $(".layui-laypage-limits option:selected").val();
//根据公式计算出最新的总页数有多少页var totalPage=(tablecount-1)/limit+1;//如果当前页是最后一页,则重置当前页为当前页
//因为删除数据的时候,总页数会变化
if(currentPage == totalPage){currentPage = currentPage - 1;}//刷新表格,将当前页传入表格,表格会通过done:function重置表格。table.reload('dutyinfo',{page:{curr:currentPage}});});}});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/762909.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

硬核分享|如何将文字转成语音对视频进行配音或旁白解说

硬核分享|如何将文字转成语音对视频进行配音或旁白解说_哔哩哔哩_bilibili 文字转语音工具成为了一种便利而实用的技术应用&#xff0c;它能够将文字内容转化为声音&#xff0c;为我们提供全新的听觉体验。 不论是在阅读、学习、娱乐还是无障碍辅助等方面&#xff0c;文字转语…

【QT入门】 Qt槽函数五种常用写法介绍

声明&#xff1a;该专栏为本人学习Qt知识点时候的笔记汇总&#xff0c;希望能给初学的朋友们一点帮助(加油&#xff01;) 往期回顾&#xff1a; 【QT入门】实现一个简单的图片查看软件-CSDN博客 【QT入门】图片查看软件(优化)-CSDN博客 【QT入门】 lambda表达式(函数)详解-CSDN…

苹果手机更换国内IP地址的方法

在网络世界中&#xff0c;IP地址扮演着极为重要的角色&#xff0c;是互联网通信的基础。很多人在使用苹果手机时&#xff0c;有时候需要更换国内IP地址以获取更多网络资源或保护隐私。那么&#xff0c;是否可以更换国内ip地址&#xff1f;苹果手机更换国内ip地址的方法是怎样的…

Redis学习二--常见问题及处理

基本概念 Redis基本概念数据结构 机制 持久化机制&#xff1a; RDB(内存快照)&#xff1a;某一时刻的内存快照以二进制的方式写入磁盘&#xff0c;可以手动触发和自动触发。 优点&#xff1a;生成文件小&#xff0c;恢复速度快&#xff0c;适用于灾难恢复。 缺点&#xff1a…

Linux docker4--本地jar包生成镜像和docker部署运行

一、通过springboot创建一个java项目&#xff0c;打成出jar包。 二、将jar包生成docker镜像 &#xff08;1&#xff09;、创建Dockerfile文件 创建Dockerfile文件&#xff0c;将如下的代码内容粘贴进去即可。 注意&#xff1a;本例中我打出的jar包是boot.jar。如果你打出的jar…

百度小程序入口在哪里找到怎么打开百度词令关键词口令直达小程序?

百度小程序入口在哪里找到怎么打开百度词令关键词口令直达小程序&#xff1f; 一、百度搜索找到百度词令小程序 打开手机百度搜索「词令」即可找到百度词令关键词口令直达小程序&#xff1b; 二、百度小程序中心找到百度小程序 2.1、打开手机百度&#xff0c;点击底部我的&a…

SQLiteC/C++接口详细介绍sqlite3_stmt类(十三)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;十二&#xff09; 下一篇&#xff1a; 待续 51、sqlite3_stmt_scanstatus_reset sqlite3_stmt_scanstatus_reset 函数用于重置指定语句对象最近一次执行的 WHER…

kotlin中使用ViewBinding绑定控件

kotlin中使用ViewBinding绑定控件 什么是ViewBinding&#xff1f; View Binding是Android Studio 3.6推出的新特性&#xff0c;主要用于减少findViewById的冗余代码&#xff0c;但内部实现还是通过使用findViewById。通过ViewBinding&#xff0c;可以更轻松地编写可与视图交互…

String类适合做HashMap的key的原因是什么

在《Java 编程思想》中有这么一句话&#xff1a;设计 hashCode() 时最重要的因素就是对同一个对象调用 hashCode() 都应该产生相同的值。 String 类型的对象对这个条件有着很好的支持&#xff0c;因为 String 对象的 hashCode() 值是根据 String 对象的 内容计算的&#xff…

unity学习(66)——控制器Joystick Pack优化

Joystick Pack这种重力带惯性不利于正常开发。决定进行优化。有一种万事俱备只欠东风的感觉。 源代码如下&#xff1a; 1.在脚本中找到轮盘所输出的方向值 2.把方向的改变值加到鸣人模型身上。 2.1控制器脚本中添加model变量 2.2在unity中赋值 2.3代码中修改位置 using Syst…

Python:使用 jionlp和cpca 实现国内地址文本解析

目录 使用 jionlp解析国内地址文本使用 cpca 实现解析国内地址文本总结 使用 jionlp解析国内地址文本 jionlp: 中文 NLP 预处理、解析工具包&#xff0c;准确、高效、易用 github: https://github.com/dongrixinyu/JioNLP文档&#xff1a;http://www.jionlp.com/ 使用示例 …

vue2源码学习01配置rollup打包环境

1.下载rollup相关依赖 npm i rollup rollup-plugin-babel babel/core babel/preset-env --save-dev 2.新建rollup.config.js配置打包选项 //rollup可以导出一个对象&#xff0c;作为打包的配置文件 import babel from rollup-plugin-babel export default {input: ./src/ind…

搭建Hadoop集群(完全分布式运行模式)

目录 一、准备模板机(最小化安装)二、配置一台纯净的模板机修改主机名固定IP地址通过yum安装方式安装必要的软件关闭防火墙且禁止自启修改hosts映射文件创建普通用户 并让他能用sudo命令在/opt下创建software和module完成 三、搭建完全分布式运行模式3.1克隆第一台机器hadoop10…

新能源汽车充电桩站点烟火AI识别检测算法应用方案

新能源汽车作为现代科技与环保理念的完美结合&#xff0c;其普及和应用本应带给人们更加便捷和绿色的出行体验。然而&#xff0c;近年来新能源汽车充电火灾事故的频发&#xff0c;无疑给这一领域投下了巨大的阴影。这不禁让人深思&#xff0c;为何这一先进的交通工具在充电过程…

【算法】acwing基础课笔记01-快排,归并

第一章&#xff08;基础算法&#xff09;&#xff08;一&#xff09; 以前排序都没怎么自己手写过&#xff0c;这学期终于决定抛弃各种番和游戏好好学一下…记点笔记激励一下自己。 视频知识 00&#xff1a;0000&#xff1a;30快速排序&#xff0c;00&#xff1a;3000&#…

Vue+SpringBoot在线教育考试及管理平台开发(纯原创)后续还在开发,会持续更新

登录页面设计 登录页面设计思路-分为三个角色进行登录&#xff0c;分别为学生&#xff0c;教师&#xff0c;管理员。 前端将登录设计为表单形式&#xff0c;通过选项组件绑定角色参数&#xff0c;向后端传递角色信息&#xff0c;通过表单绑定向后端传递登录者所有信息 <div …

必示科技携手云杉网络发布“智能可观测性联合解决方案”

近日&#xff0c;必示科技与云杉网络携手发布“智能可观测性联合解决方案”&#xff0c;整体方案融合云杉网络DeepFlow产品在可观测性领域、必示科技AIOps产品在运维数据分析领域的深厚技术积淀&#xff0c;完整实现IT系统高质量、高性能、全栈的可观测数据采集、智能监控和智能…

网络: 数据链路层

数据链路层: 数据帧的封装与传输 以太网数据帧 源地址和目的地址是指网卡的硬件地址(也叫MAC地址), 长度是48位,是在网卡出厂时固化的;帧协议类型字段有三种值,分别对应IP、ARP、RARP;帧末尾是CRC校验码 以太网 "以太网" 不是一种具体的网络, 而是一种技术标准; 既…

String 作为方法参数是值传递还是引用传递

当将一个String作为方法参数传递时&#xff0c;实际上传递的是String对象的引用的副本&#xff0c;而不是String对象本身。即&#xff0c;在方法内部对String对象进行操作时&#xff0c;操作的是引用的副本&#xff0c;而不会影响原始的String对象。这也意味着&#xff0c;如果…

Cubemx串口配置

1.时钟 2.引脚配置 3.重写printf代码 /* USER CODE BEGIN 1 */ int __io_putchar(int ch){HAL_UART_Transmit(&huart1,(uint8_t *) ch, 1,1000);return ch; } /* USER CODE END 1 */