項(xiàng)目中用到了模板引擎thymeleaf和前端框架layUI，算是一路摸索、一個(gè)坑一個(gè)坑踩過(guò)來(lái)的。之前邊學(xué)習(xí)邊做項(xiàng)目的時(shí)候沒(méi)有記錄下學(xué)習(xí)的過(guò)程和遇到問(wèn)題的解決思路和方法，著實(shí)有點(diǎn)可惜。所以從現(xiàn)在開(kāi)始咯。

laypage分頁(yè)

下面就以laypage的兩種分頁(yè)展開(kāi)行文的思路：異步刷新分頁(yè)和整頁(yè)刷新式跳轉(zhuǎn)。具體可參看官方文檔。

異步刷新分頁(yè)

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

1.前端html代碼如下：

<div id="log-list"></div><div id="page-list"></div>

2.JS代碼如下：

這部分使用了laypage分頁(yè)函數(shù)和jQuery的append函數(shù)，實(shí)現(xiàn)異步刷新。

function paging(curr){  $.getJSON('/page', {  page: curr || 1 //向服務(wù)端傳的參數(shù)  }, function(res){   //此處輸出內(nèi)容   var table = $("<table></table>");   table.attr({class:"layui-table admin-table",id:"page"});   var thead = $("<thead><tr><th>編號(hào)</th><th>姓名</th><th>行為</th><th>時(shí)間</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 +">恢復(fù)</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;  //顯示分頁(yè)  laypage({   cont: 'page-list', //容器。值支持id名、原生dom對(duì)象，jquery對(duì)象。【如該容器為】：<div id="page1"></div>   pages: res[0].pageTotal, //通過(guò)后臺(tái)拿到的總頁(yè)數(shù)   curr: curr || 1, //當(dāng)前頁(yè)   skip: true,   jump: function(obj, first){ //觸發(fā)分頁(yè)后的回調(diào)   if(!first){ //點(diǎn)擊跳頁(yè)觸發(fā)函數(shù)自身，并傳遞當(dāng)前頁(yè)：obj.curr    $("#log-list").text('');    paging(obj.curr);   }   }  });  }); }; //運(yùn)行 paging();

實(shí)現(xiàn)以上代碼，基本上的樣式已經(jīng)出來(lái)。下面執(zhí)行實(shí)現(xiàn)后端分頁(yè)和數(shù)據(jù)查詢即可。/p>