laypage+SpringMVC实现后端分页

项目中用到了模板引擎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>