在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脚本编程解决考试分数统计问题
Oct 18 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 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 mysql事务问题实例分析
2016/01/18 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python封装shell命令实例分析
2015/05/05 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python 为什么说eval要慎用
2019/03/26 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python Http请求json解析库用法解析
2020/11/28 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
后备干部考察材料
2014/02/12 职场文书
2014年电教工作总结
2014/12/19 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
vue封装数字翻牌器
2022/04/20 Vue.js
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS