项目中用到了模板引擎thymeleaf和前端框架layUI，算是一路摸索、一个坑一个坑踩过来的。之前边学习边做项目的时候没有记录下学习的过程和遇到问题的解决思路和方法，着实有点可惜。所以从现在开始咯。
laypage分页
下面就以laypage的两种分页展开行文的思路：异步刷新分页和整页刷新式跳转。具体可参看官方文档。
异步刷新分页
首先使用laypage之前，先加载laypage模块。使用 layui.use(‘laypage')加载即可。
1.前端html代码如下：
<div></div> <div></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></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 );
至此，异步分页前后端结合基本结束，因为代码都带有必要的注释，所以也无需过多解释。
整页刷新式跳转