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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
屏蔽script注入小例子
Nov 12 Javascript
JS字符串截取函数实例
Dec 27 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
javascript实现回到顶部特效
May 06 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
实现一个简单得数据响应系统
Nov 11 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
django创建自定义模板处理器的实例详解
2017/08/14 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
致垒球运动员加油稿
2014/02/16 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
处罚决定书范文
2015/06/24 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript