java局部刷新表格数据,局部刷新如何实现?看我简单实现局部刷新、分页
在这里小小推荐下我的个人博客
前言
1.感谢大家的关注和阅读,坚持干货不断~~~
2.今天我们来说一下如何通过ajax实现局部刷新。
应用场景
在Java中,如果我们一个页面中有很多的信息都是从后台传递过来的,但是我们有的地方需有有变动。比如我们在做菜品管理,上下翻页时,我们的分类以及其他的信息一般是不需要刷新,只需要更新我们的菜品信息即可,如果跳转后台会浪费很长时间,如果我们使用ajax实现异步刷新。就可以在html中通过js对页面进行简单的控制实现局部刷新的效果。我们今天就以分页查询为例进行讲解!!!
代码实现
1.后台的Java代码我就不再贴出来了,大家可以查看我的上一篇文章,Mybatis-Plus来学习一下!代码生成、分页插件?,可以通过mybatis-plus进行分页或者是使用mybatis的分页插件也可以,无论如何使用什么技术,相信实现分页对大家来说不是什么难事!!!
2.那我们直接来说一下视图层html的代码,我们简单的以饭店的商品管理为例:
菜品列表
编号分类名称菜品单价(分)折后价(分)操作
首页
上一页
下一页
尾页
可见当我们点击上下页、首尾页时,只需要对id=“main”的tbody标签中的tr进行更新即可。
3.接下来我们说一下javascript代码,我们需要实现的功能主要就是依靠他来实现。
// 首先定义当前页page为1,总页数allPage为1
var page = 1;
var allPage = 1;
//商品表格显示
function goodstable(p) {
// 判断传入页数大于等于1且小于等于总页数
if (p >= 1 && p <= allPage) {
// 将传入页赋值给当前页
page = p;
$.ajax({
type: "post", // 以post方式提交
url: "/goods/toList?page=" + p, // 请求链接并传递参数page
dataType: "json", // 返回json数据
error() {
},
success(data) {
$("#main tr").remove(); // 删除ID=“main”标签的字标签tr下所有内容
allPage = Math.ceil(data.total / data.size); // 给总页数赋值向上取整=总条目/每页大小
document.getElementById("span").innerHTML = page + "/" + allPage;
// 以下代码为循环布局
for (var i = 0; i < data.rows.length; i++) {
var trtd = "
" // 添加复选框
+ data.rows[i].goodsId + "
" // 添加标号
+ data.rows[i].typeName + "
" // 类型名
+ data.rows[i].goodsName + "
" // 商品名
+ data.rows[i].goodsPrice + "
" // 商品价格
+ data.rows[i].goodsDiscount + "
"; // 商品折后价
// 将以上标签动态添加到tbody中进行展示
$("#table1 tbody").append("
" + trtd + "");
}
}
});
}
}
相信大家已经看懂了,我的基本实现思路就是先将之前的数据从页面中删除,然后通过ajax向后台请求数据,然后将数据再动态的展示到页面上,就可以实现简单的动态刷新,然后以此可以实现很多功能。如上面的分页查询吗、信息更新等。
结束语
1.我的方式可能并不是最好的方式,但是倒也不失为一种方法。经过我的实验,还是蛮好用的。
2.感谢的大家的关注和阅读,希望大家可以给我提出更多的问题以及想法,为我提供素材和题目。
3.我会努力,保持更新。
4.干货不断,感谢!!!!
java局部刷新表格数据,局部刷新如何实现?看我简单实现局部刷新、分页相关推荐
- Vue删除数据成功后如何刷新表格数据
文章目录 刷新表格数据的方法: 1.this.$router.go(0) 2.location.reload() 3.跳转空白页再跳回原页面 4.控制的显示隐藏(最实用的方法) 刷新表格数据的方法: ...
- Java实现Excel表格数据的导入(兼容xls与xlsx)
Java实现Excel表格数据的导入(兼容xls与xlsx) 目录 依赖 代码 注意点 目录 依赖 <!-- 添加POI的依赖用于Excel的操作 --><dependency> ...
- java读写excel表格数据
java读写excel表格数据 java读写excel表格数据 excel类 package excel;import java.io.File; import jxl.Cell; import jx ...
- html 刷新表格数据,当我刷新页面时在html表格上重复数据
我从数据库中选择一些数据,并试图在html表格上显示它们. 问题是,当我刷新页面时,我得到了所有在我的html表上重复的数据.我一直试图谷歌/解决这个问题,但三天没有结果.当我刷新页面时在html表格 ...
- ajax实现动态及时刷新表格数据_如何爬取网页数据
网页数据爬取是指从网站上提取特定内容,而不需要请求网站的API接口获取内容."网页数据" 作为网站用户体验的一部分,比如网页上的文字,图像,声音,视频和动画等,都算是网页数据. 对 ...
- Java中Excel表格数据的导入与导出
该指南的发布为当前svn主干提供了功能.那些在以前版本中查找信息的人应该查看发布的文档. HSSF允许从XLS文件中写入或读取数字.字符串.日期或公式单元格值.在这个版本中,还包括行和列的大小.单元样 ...
- Ajax实现动态及时刷新表格数据
大家好,我是雄雄,今天分享的技术很简单,即ajax结合jdbc动态实现及时刷新表单数据. 前言:相信大家在网上冲浪的时候,肯定会发现这样的场景,在实现某个查询功能时,下方表格中会显示需要展示的结果,当 ...
- layui数据表格,操作当前行,数据重载(刷新表格数据)
最近项目中使用到layui前段框架,在修改完当前行的数据,并同步到数据库后,页面展示的还是旧数据 虽然刷新页面可以解决问题,但这小问题还是让人不爽,人类总是懒惰的,绝不自己点刷新(狗头) 清空学生信息 ...
- layui如何实现添加数据时关闭页面层,并实时刷新表格数据?
可能看到标题的你没有明白我到底想表达啥?(我起名字时删改多遍,这是最终定下来的),不过,为了让大家看的明白,我专门去做了个演示视频: 演示案例使用的技术:ssh框架+layui表格,即简单的对单表数据 ...
最新文章
- mysql-cluster集群原理介绍和搭建步骤(四个data/sql节点) (转)
- set的用法及短语_人教版九全Unit 14重点短语、重点句型、课文讲解
- numpy二维数组改变某些数_【每天15分钟,5天学会NumPy】第1天:基本概念
- php如何删除数据mysql数据库_php如何删除数据库
- java 自定义异常的回顾
- JavaBeginnersTutorial 中文系列教程·翻译完成
- 初识openwrt(上)
- 江苏大学考研885程序设计 - 填空选择知识点
- python 判断字符串是否为数字_Python核心知识系列:数字与字符串类型
- 苹果Mac 2D/3D数字雕刻软件:Pixologic Zbrush
- android js模板下载地址,template.js
- Java开发工程师面试笔试试题,真题;
- coreldrawx4缩略图显示不出来_CDR缩略图不显示怎么办?CorelDRAW缩略图不显示解决办法 - 优优下载站...
- 2018华为网络技术大赛课程-服务器操作系统基础原理自测题答案
- Pytorch 多线程 运行卡死
- Vue实现3D全景图,photo-sphere-viewer
- 光谱数据计算CIE值(三刺激值、CIE1931、CIE1976、CCT)软件人品大家自己看
- HTML实现动态圣诞树和雪花效果
- 【原创】畅言实现单点登录的设计流程和技术细节(1/2)
- DirectPlay的基本概念