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清空textarea等输入框实现代码
Apr 22 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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的安全策略
2006/10/09 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php中error与exception的区别及应用
2014/07/28 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python实现进程间通信简单实例
2014/07/23 Python
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
opencv实现图像几何变换
2021/03/24 Python
追悼会上的答谢词
2014/01/10 职场文书
班级出游活动计划书
2014/08/15 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
撤诉申请怎么写
2015/05/19 职场文书
小学生运动会广播
2015/08/19 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python
python中filter,map,reduce的作用
2022/06/10 Python