<link rel="stylesheet" href="${ctxPath}/vendor/layui-v2.4.5/layui/css/layui.css" rel="external nofollow" ><script src="${ctxPath}/vendor/layui-v2.4.5/layui/layui.js"></script><script src="${ctxPath}/vendor/jquery.min.js"></script>//引入jquery包

<div class="layui-main g-main">  <div class="layui-row">    <div class="layui-col-xs12">      <blockquote class="layui-elem-quote">        當(dāng)前系統(tǒng)排名：<span class="layui-badge-rim badge-number">第${scoreRecordUtil.rank}名</span>，        總積分：<span class="layui-badge-rim badge-number">${scoreRecordUtil.totalScore}分</span>，        和上一名相差：<span class="layui-badge-rim badge-number">${scoreRecordUtil.differenceTotal}分</span>，繼續(xù)加油！      </blockquote>      <table class="layui-table">        <thead>          <tr>            <th>積分類型</th>            <th>積分原因</th>            <th>積分值</th>            <th>創(chuàng)建時(shí)間</th>          </tr>        </thead>                <tbody>  //存放分頁加載數(shù)據(jù)        </tbody>              </table>      <div class="page"></div>    </div>  </div></div>

function showReocrd(pageNo,pageSize){  $.get("${ctxPath}/score-record/showRecord",    {      pageNo:pageNo,      pageSize:pageSize    },    function (date) {     //加載后臺(tái)返回的List集合數(shù)據(jù)      for (var i = 0; i < date.length; i++) {        var td = $("<td></td>").text(date[i].typeName);        var td2 = $("<td></td>").text(date[i].operate);        var td3 = $("<td></td>").text(date[i].score);        var td4 = $("<td></td>").text(date[i].createTime);        var tr = $("<tr></tr>").append(td, td2, td3, td4);        $('tbody').append(tr);      }    },    "json"  );}

//加載總頁數(shù)var total = "${scoreRecordUtil.totalRecord}";//先初始化加載首頁，十條數(shù)據(jù)showReocrd(1,10);layui.use(['laypage','jquery'], function() {  var laypage = layui.laypage,$ = layui.$;  $(".page").each(function(i,the){    laypage.render({      elem: the //注意，這里的 test1 是 ID，不用加 # 號(hào)      ,count: total //數(shù)據(jù)總數(shù)，從服務(wù)端得到      , limit: 10           //每頁顯示條數(shù)      , limits: [10, 20, 30]      , curr: 1            //起始頁      , groups: 5           //連續(xù)頁碼個(gè)數(shù)      , prev: '上一頁'         //上一頁文本      , netx: '下一頁'         //下一頁文本      , first: 1           //首頁文本      , last: 100           //尾頁文本      , layout: ['prev', 'page', 'next','limit','refresh','skip']      //跳轉(zhuǎn)頁碼時(shí)調(diào)用      , jump: function (obj, first) { //obj為當(dāng)前頁的屬性和方法，第一次加載first為true        //非首次加載 do something        if (!first) {          //清空以前加載的數(shù)據(jù)          $('tbody').empty();          //調(diào)用加載函數(shù)加載數(shù)據(jù)          showReocrd(obj.curr,obj.limit);        }      }    });  })})