在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 相关文章推荐
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
js实现京东轮播图效果
Jun 30 Javascript
分析JS中this引发的bug
Dec 12 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
node.js基础知识汇总
Aug 25 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
重置版宣传动画
2020/04/09 魔兽争霸
PHP4实际应用经验篇(4)
2006/10/09 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python的形参和实参使用方式
2019/12/24 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
珍爱生命演讲稿
2014/05/10 职场文书
初中家长评语和期望
2014/12/26 职场文书
退休教师追悼词
2015/06/23 职场文书
毕业酒会致辞
2015/07/29 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript