在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 Eval 函数使用
Mar 23 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
Yii清理缓存的方法
2016/01/06 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
django站点管理详解
2017/12/12 Python
理解python中生成器用法
2017/12/20 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python字典对象实现原理详解
2019/07/01 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
python logging 日志的级别调整方式
2020/02/21 Python
恶搞卫生巾广告词
2014/03/18 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
初中同学会活动方案
2014/08/22 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书