laypage+SpringMVC实现后端分页

前端  /  管理员 发布于 5年前   365

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

laypage分页

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

异步刷新分页

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

1.前端html代码如下：

2.JS代码如下：

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

function paging(curr){  $.getJSON('/page', {  page: curr || 1 //向服务端传的参数  }, function(res){   //此处输出内容   var table = $("");   table.attr({class:"layui-table admin-table",id:"page"});   var thead = $("编号姓名行为时间操作");   table.append(thead);   var tbody = $("");   tbody.attr({id:"content"});   $(function(){    var datas = res;     $.each(datas,function(index,value){     var tr = $("");     tr.append(""+ (++index) + "");      tbody.append(tr);      tr.append(""+ value.staffName + "");      tbody.append(tr);      tr.append(""+ value.operation + "");      tbody.append(tr);      tr.append(""+ value.createTime + "");      tbody.append(tr);      var td = $("");      var div = $("");      div.attr({class:"layui-btn-group"});      var button1 = $("详情");      button1.attr({class:"layui-btn detail"});      var button2 = $("恢复");      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对象。【如该容器为】：
   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.后端代码Ccontroller部分：

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

4.后端代码Cservice部分：

/**  * 功能描述 :无查询条件分页  * @param pageCurr  * @return  * @since   */ public List getAllLog(int pageCurr){  int pageSize = 10;//每页显示十条数据  int pageStart = (pageCurr - 1) * pageSize;// limit=(pageCurr -1)*10,10  List 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.后端代码Cdao部分：

/**  * 功能描述：查询所有数据--带分页  * @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 getAllLog(@Param("pageSize") int pageSize,@Param("pageStart") int pageStart );

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

整页刷新式跳转

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

1.前端HTML代码：

//此处是显示数据的具体HTML代码
 //分页显示的位置

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.后端代码Ccontroller部分：

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

4.后端代码Cservice部分：

/**  * 功能描述：总页数  * @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.后端代码Cdao部分：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• SpringMVC前端和后端数据交互总结
• java web SpringMVC后端传json数据到前端页面实例代码
• Spring MVC前端与后端5种ajax交互方法【总结】
• Spring MVC前后端的数据传输的实现方法
• 轻松玩转BootstrapTable（后端使用SpringMVC+Hibernate）
• Spring boot + thymeleaf 后端直接给onclick函数赋值的实现代码
• spring boot+vue 的前后端分离与合并方案实例详解
• 利用Kotlin + Spring Boot实现后端开发
• Spring Boot + Vue 前后端分离开发之前端网络请求封装与配置
• spring mvc 实现获取后端传递的值操作示例