在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获取div的background-image属性
Oct 15 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python中的闭包总结
2014/09/18 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python2随机数列生成器简单实例
2017/09/04 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
python学习笔记之多进程
2020/08/06 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
销售顾问的岗位职责
2013/11/13 职场文书
人力资源总监工作说明
2014/03/03 职场文书
保安辞职信范文
2015/02/28 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015年司机工作总结
2015/04/23 职场文书
初中班主任工作随笔
2015/08/15 职场文书
大学生党课心得体会
2016/01/07 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书