laypage+SpringMVC实现后端分页


Posted in Javascript onJuly 27, 2019

项目中用到了模板引擎thymeleaf和前端框架layUI,算是一路摸索、一个坑一个坑踩过来的。之前边学习边做项目的时候没有记录下学习的过程和遇到问题的解决思路和方法,着实有点可惜。所以从现在开始咯。

laypage分页

下面就以laypage的两种分页展开行文的思路:异步刷新分页和整页刷新式跳转。具体可参看官方文档。

异步刷新分页

首先使用laypage之前,先加载laypage模块。使用 layui.use(‘laypage')加载即可。

1.前端html代码如下:

<div id="log-list"></div>
<div id="page-list"></div>

2.JS代码如下:

这部分使用了laypage分页函数和jQuery的append函数,实现异步刷新。

function paging(curr){
  $.getJSON('/page', {
  page: curr || 1 //向服务端传的参数
  }, function(res){
   //此处输出内容
   var table = $("<table></table>");
   table.attr({class:"layui-table admin-table",id:"page"});

   var thead = $("<thead><tr><th>编号</th><th>姓名</th><th>行为</th><th>时间</th><th>操作</th></tr></thead>");
   table.append(thead);
   var tbody = $("<tbody></tbody>");
   tbody.attr({id:"content"});

   $(function(){
    var datas = res;
     $.each(datas,function(index,value){
     var tr = $("<tr></tr>");
     tr.append("<td>"+ (++index) + "</td>");
      tbody.append(tr);
      tr.append("<td>"+ value.staffName + "</td>");
      tbody.append(tr);
      tr.append("<td>"+ value.operation + "</td>");
      tbody.append(tr);
      tr.append("<td>"+ value.createTime + "</td>");
      tbody.append(tr);
      var td = $("<td></td>");
      var div = $("<div></div>");
      div.attr({class:"layui-btn-group"});
      var button1 = $("<button detailId=" + value.weeklyId +">详情</button>");
      button1.attr({class:"layui-btn detail"});
      var button2 = $("<button recoveryId=" + value.weeklyId +">恢复</button>");
      button2.attr({class:"layui-btn recovery"});
      div.append(button1);div.append(button2);
      td.append(div);
      tr.append(td);
      tbody.append(tr);
     }); 
    });
   table.append(tbody);
   $("#log-list").append(table);
  // $("#log-list").innerHTML = table;

  //显示分页
  laypage({
   cont: 'page-list', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>
   pages: res[0].pageTotal, //通过后台拿到的总页数
   curr: curr || 1, //当前页
   skip: true,
   jump: function(obj, first){ //触发分页后的回调
   if(!first){ //点击跳页触发函数自身,并传递当前页:obj.curr
    $("#log-list").text('');
    paging(obj.curr);
   }
   }
  });
  });
 };
 //运行
 paging();

实现以上代码,基本上的样式已经出来。下面执行实现后端分页和数据查询即可。/p>

3.后端代码?controller部分:

/**
  * 功能描述:返回无查询条件查询分页数据
  * @param page
  * @return
  * @since 
  */
 @RequestMapping(value="/page")
 @ResponseBody
 public List<SubmitLog> getPage(Integer page){
  if(page == null){
   page = 1;
  }
  List<SubmitLog> submitLogList = new ArrayList<>();
  submitLogList = logService.getAllLog(page);
  return submitLogList;
 }

4.后端代码?service部分:

/**
  * 功能描述 :无查询条件分页
  * @param pageCurr
  * @return
  * @since 
  */
 public List<SubmitLog> getAllLog(int pageCurr){
  int pageSize = 10;//每页显示十条数据
  int pageStart = (pageCurr - 1) * pageSize;// limit=(pageCurr -1)*10,10

  List<SubmitLog> submitLogList = new ArrayList<>();
  submitLogList = logMapper.getAllLog(pageSize, pageStart);
  //计算前端页面显示的页数
//  当前数据库记录数
  int count = submitLogList.get(0).getPageTotal();
  int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1;
  log.debug("页数"+page);
  submitLogList.get(0).setPageTotal(page);
  return submitLogList;
 }

5.后端代码?dao部分:

/**
  * 功能描述:查询所有数据--带分页
  * @param pageSize 每页大小
  * @param pageCurr 即将显示当前页
  * @return
  * @since 
  */
 @Select("SELECT s.pageTotal,number_id,staff_name,create_time,weekly_id,operation FROM submit_log,"
   + "(SELECT count(1) AS pageTotal FROM submit_log) s ORDER BY number_id DESC LIMIT #{pageStart},#{pageSize}")
 @Results({
  @Result(column="number_id",property="numberId"),
  @Result(column="staff_name",property="staffName"),
  @Result(column="create_time",property="createTime"),
  @Result(column="weekly_id",property="weeklyId")
 })
 List<SubmitLog> getAllLog(@Param("pageSize") int pageSize,@Param("pageStart") int pageStart );

至此,异步分页前后端结合基本结束,因为代码都带有必要的注释,所以也无需过多解释。

整页刷新式跳转

这种方式的分页,基本上分页逻辑都由laypage去实现了,后端分页逻辑基本上不用过多考虑。还是比较方便的,建议结合官网的文档和代码进行理解。下面是实现代码:

1.前端HTML代码:

//此处是显示数据的具体HTML代码
<div id="page-list"></div> //分页显示的位置

2.Js代码:

这部分的分页实现,后端只需返回总页数即可。

function paging(){
   $.getJSON('/weekly-page-count',{},function(res){
    //整页刷新
    laypage({
     cont: 'page-list',
     pages: res, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18
     curr: function(){ //通过url获取当前页,也可以同上(pages)方式获取
     var page = location.search.match(/page=(\d+)/);
     return page ? page[1] : 1;
     }(), 
     skip: true,
     jump: function(e, first){ //触发分页后的回调
     if(!first){ //一定要加此判断,否则初始时会无限刷新
      location.href = '?page='+e.curr;
     }
     }
    });
   });
  }
  paging();

3.后端代码?controller部分:

/**
  * 功能描述:返回无查询条件查询分页数--用户
  * @param page
  * @return
  * @since 
  */
 @RequestMapping(value="/weekly-page-count")
 @ResponseBody
 public Integer getPage1(Integer userId){
  Integer count = weeklyService.getPageCount(userId);
  return count;
 }

4.后端代码?service部分:

/**
  * 功能描述:总页数
  * @param userId
  * @return
  * @since 
  */
 public Integer getPageCount(Integer userId){
  int count = 0;
  count = weeklyMapper.getPageCount(userId);

  int pageSize = 5; //每页显示条数
  int page = count%pageSize == 0 ? count/pageSize : count/pageSize + 1; //计算页数
  return page;
 }

5.后端代码?dao部分:

/**
  * 功能描述:无条件查询记录条数==分页总数
  * @param userId
  * @return
  * @since 
  */
 @Select("SELECT count(1) AS pageTotal FROM weekly WHERE user_id = #{userId}")
 Integer getPageCount(@Param("userId") Integer userId);

总结:两种分页方式使用起来都是比较方便的。使用的场景还是有些不同:异步式适合JQuery重写页面比较容易的;整页式更简单,各种场景都可以使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
判断访客终端类型集锦
Jun 05 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
js实现下一页页码效果
Mar 07 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript实现简单评论功能
Aug 17 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
vuex 的简单使用
Mar 22 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
laypage.js分页插件使用方法详解
Jul 27 #Javascript
layui2.0使用table+laypage实现真分页
Jul 27 #Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 #Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 #Javascript
基于ssm框架实现layui分页效果
Jul 27 #Javascript
layUI实现前端分页和后端分页
Jul 27 #Javascript
layui实现数据分页功能(ajax异步)
Jul 27 #Javascript
You might like
php遍历目录viewDir函数
2009/12/15 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python实现简单的文字识别
2018/11/27 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
专升本自我鉴定
2013/10/10 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
总经理聘用协议书
2015/09/21 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
python开发人人对战的五子棋小游戏
2022/05/02 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers
JS高级程序设计之class继承重点详解
2022/07/07 Javascript