<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">        當前系統排名：<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>，繼續加油！      </blockquote>      <table class="layui-table">        <thead>          <tr>            <th>積分類型</th>            <th>積分原因</th>            <th>積分值</th>            <th>創建時間</th>          </tr>        </thead>                <tbody>  //存放分頁加載數據        </tbody>              </table>      <div class="page"></div>    </div>  </div></div>

function showReocrd(pageNo,pageSize){  $.get("${ctxPath}/score-record/showRecord",    {      pageNo:pageNo,      pageSize:pageSize    },    function (date) {     //加載后臺返回的List集合數據      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"  );}

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