在SSM框架下用laypage和ajax实现分页和数据交互的方法


Posted in Javascript onSeptember 27, 2019

layui,一款前端框架,提供了丰富的组件和模板,layui提供的简约后台管理模板,对于后端学习者来说是个不错的福音。这里记录在SSM框架下使用layui的分页组件laypage。(官网开发文档)

环境 Spring+SpringMVC+Mybatis , jquery-3.1.0.min.js , mysql-connector-java-5.1.34

参考文档 layui-laypage参数文档

前端代码主要参考的是layui官网给定的代码,加载layui.css和layui.js;除此之外,介于接下来用ajax与后台进行数据交互,因此这里也需要加载jquery的文件,我这里加载的是jquery-3.1.0-min.js。

主要代码如下:

<div id="demo"></div> //定义分页
<script type="text/javascript">
var url = "http://localhost:8080/HRM/";
$(document).ready(function(){
  layui.use(['form','laypage', 'layer'], function(){
  var laypage = layui.laypage,layer = layui.layer;
  laypage({
  cont: 'demo', //跟页面前面div的id一样
  pages: ${endPage} , //总页数
  groups: 5 , //连续显示分页数
  jump: function(obj, first){
  //得到了当前页,用于向服务端请求对应数据
  var curr = obj.curr -1;
  var self = this;
  $.ajax({
   //这里省略了ajax数据交互
  });
 });
});
</script>

后端采用SpirngMVC和Mybatis进行数据处理。

创建Dao接口

List<Jobinfo> selectPageInfoByDel(@Param("start") int start); //获取页面数据
int countNumber(); //记录总的条数

编写Mapper.xml

这里主要用到了mysql的limit,limit从下标0开始,limit0,8表示的是从下标0开始,查询8条数据。

<select id="selectPageInfoByDel" resultMap="BaseResultMap" parameterType="java.lang.Integer">
  select id,c_id,job,number,salary,more_salary,date from jobinfo where is_del = 1 order by id DESC limit #{start,jdbcType=INTEGER},8
</select>
<select id="countNumber" resultType="java.lang.Integer">
  select count(*) from jobinfo where is_del =1
</select>

创建一个Page的pojo类

public class Page<T> implements Serializable {
 private static final long serialVersionUID = 337297181251071639L;
 private Integer page;//当前页
 private Integer rows;//页大小
 private Integer totalRecord;// 总记录数
 private Integer firstPage; //首页
 private Integer endPage; //末页 
 private List<T> list;//页面数据列表
 //这里省略的get和set的方法
}

创建Service接口

//查看分页的信息
public List<Jobinfo> selectPageInfo(int page);
//查看所有信息的总数
int getCount();

创建Service的实现类impl

//这里省略了Dao的实例化,只显示service接口的实现方法
public List<Jobinfo> selectPageInfo(int page) {
 int rows = 8; //一页显示8条数据
 int start = page*rows; //这里表示数据库从第几条数据开始查询(limit从下标0开始)
 return jobDao.selectPageInfoByDel(start);
}
public int getCount() {
 return jobDao.countNumber();
}

编写Controller

@RequestMapping("page")
public @ResponseBody Page<Jobinfo> selectPageInfo(HttpServletRequest request, Model model,@RequestParam("start") int start){
  List<Jobinfo> list= jobinfoService.selectPageInfo(start);
 Page<Jobinfo> pageInfo = new Page<Jobinfo>();
 int count = jobinfoService.getCount(); //获取总数
 int endPage = 0;
 //8条数据为一页
 if(jobinfoService.getCount()%8==0){
  endPage = jobinfoService.getCount()/8;
 }else{
  endPage = jobinfoService.getCount()/8 +1 ;
 } 
 pageInfo.setPage(start+1);
 pageInfo.setTotalRecord(count);
 pageInfo.setList(list);
 pageInfo.setRows(8);
 pageInfo.setFirstPage(1);
 pageInfo.setEndPage(endPage);
 return pageInfo;
}

运行结果

在SSM框架下用laypage和ajax实现分页和数据交互的方法

事实上,整体功能的实现在页面与后台用ajax传递数据那一块花费了一下时间,因为第一次接触到layui,也渐渐感受到了layui与传统ajax数据传递的不同,layui对方法进行了封装,因此用ajax传数据的时候也需依于框架进行。

以上这篇在SSM框架下用laypage和ajax实现分页和数据交互的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js实现div弹出层的方法
Nov 20 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 #Javascript
vue实现在线翻译功能
Sep 27 #Javascript
webpack 处理CSS资源的实现
Sep 27 #Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 #Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 #Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 #Javascript
vue实现全匹配搜索列表内容
Sep 26 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
介绍几个array库的新函数 php
2006/12/29 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
js实现放大镜特效
2017/05/18 Javascript
详解VUE 数组更新
2017/12/16 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
Python面向对象特殊成员
2017/04/24 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
聚美优品励志广告词
2014/03/14 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
本科毕业生自荐信
2014/05/26 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP