在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 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 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
浅析PHP水印技术
2007/02/14 PHP
关于尾递归的使用详解
2013/05/02 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
十八大演讲稿
2014/05/22 职场文书
森林病虫害防治方案
2014/06/02 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL
利用Python实现模拟登录知乎
2022/05/25 Python