在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的ready()方法单独使用示例
Mar 25 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
React实现全选功能
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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
微信小程序倒计时功能实例代码
2018/07/17 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Python中qutip用法示例详解
2020/10/02 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
八项规定对照检查材料
2014/08/31 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
golang内置函数len的小技巧
2021/07/25 Golang