前端分页有jquery 的分页插件 jquery.pagination.js，bootstrap也有分页 bootstrap-paginator.js
这里介绍的是layui框架的分页，需要引入 layui.js
官方文档：https://www.layui.com/v1/doc/modules/laypage.html
| 键 | 默认值 | 类型 | 描述 |
| cont | 必填 | String/Object | 容器。值可以传入元素id或原生DOM或jquery对象，如：
cont: 'id'
//cont: document.getElementById('id')
//cont: $('#id')
|
| pages | 必填 | Number | 分页数。一般通过服务端返回得到 |
| curr | 1 | Number | 当前页。 |
| groups | 5 | Number | 连续分页数。 |
| skin | default | String | 控制分页皮肤。一般传16进制色值即可，如:
skin: '#c00'当然，您还可以借助自定义皮肤 |
| first | 1 | Number/String/Boolean | 用于控制首页。值支持三种类型。 如：first: '首页' 如：first: false，则表示不显示首页项 |
| last | 总页数值 | Number/String/Boolean | 用于控制尾页。值支持三种类型 如：last: '尾页' 如：last: false，则表示不显示尾页项 |
| prev | 上一页 | String/Boolean | 用于控制上一页。若不显示，设置false即可 |
| next | 下一页 | String/Boolean | 用于控制下一页。若不显示，设置false即可 |
| skip | false | Boolean | 是否显示跳转 |
| hash | undefined | 任意 | hash名，如果填写，则开启location.hash。触发分页时，会自动对url追加#!hash名={curr} 利用这个，可以在页面载入时就定位到指定页 |
| jump | 核心参数 | Function | 触发分页后的回调，函数返回两个参数。 obj是一个object类型。包括了分页的所有配置信息。 first一个Boolean类，检测页面是否初始加载。非常有用，可避免无限刷新。 jump: function(obj, first){
//得到了当前页，用于向服务端请求对应数据
var curr = obj.curr;
}
|
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head th:include="/common/common :: NavHead('资金变动明细')"> </head> <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a href="">订单详情</a> <a href="">资金明细</a> </span> <a class="layui-btn layui-btn-primary layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"> <i class="layui-icon" style="line-height:38px">ဂ</i></a> </div> <div class="x-body"> <div class="layui-row"> <form class="layui-form layui-col-md12 x-so"> <input class="layui-input" placeholder="开始日" name="start" id="start"> <input class="layui-input" placeholder="截止日" name="end" id="end"> <div class="layui-input-inline"> <select name="contrller"> <option>资金标志</option> <option>支出</option> <option>收入</option> </select> </div> <div class="layui-input-inline"> <select name="contrller"> <option>支付方式</option> <option>支付宝</option> <option>微信</option> <option>货到付款</option> </select> </div> <input type="text" name="orderId" placeholder="请输入订单号" autocomplete="off" class="layui-input"> <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button> </form> </div> <table class="layui-table"> <thead> <tr> <!--<th>用户ID</th>--> <!--<th>订单ID</th>--> <!-- <th>资金ID</th>--> <th>支付方式</th> <th>收入/支出</th> <th>交易金额</th> <th>余额</th> <th>备注</th> <th>创建时间</th> </tr> </thead> <tbody id="log-tbody"> <tr th:each="item,memberStat:${pageUtil.getRecords()}"> <td th:text="${item.paytype == '1' ? '支付宝' :'微信'}">7829.10</td> <td th:text="${item.getMoneytype() == '1' ? '支出' : '收入'}">7854.10</td> <td th:text="${item.getMoney()}">待确认</td> <td th:text="${item.getBalance()}">未支付</td> <td th:text="${item.getRemark()}">未发货</td> <td th:text="${#dates.format(item.getCreatetime(),'yyyy-MM-dd HH:mm:ss')}">其他方式</td> </tr> </tbody> </table> <div id="layuiPage"> </div> </div> </body> <script th:src="@{/js/jquery.min.js}"></script> <script type="text/javascript" th:src="@{/js/xadmin.js}"></script> <!--<div th:include="/common/page :: pageJs"></div>--> <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script> <script th:inline="javascript"> var page=[[${pageUtil.current}]]; //设置首页页码 var limit=[[${pageUtil.size}]]; //设置一页显示的条数 var total=[[${pageUtil.total}]]; //总条数 var first = true; var baseUrl = ''; $(function () { var pathName = window.location.pathname.substring(1);//不包含协议和端口的文件目录 且最开始斜杠没有 ylxtWeb/news/toEditNewsDetails/6 console.log(pathName); var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/')); baseUrl = window.location.protocol + '//' + window.location.host+'/' + webName; getPage();//加载 }) var sFun = (x)=>{x=5;} function getPage(){ layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; //完整功能 laypage.render({ elem: 'layuiPage' //id,不加 # 号 ,count: total //数据总数 ,limit:limit //每页条数设置 ,curr: page //当前页码 ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] ,jump: function(obj){//点击页码出发的事件 //obj包含了当前分页的所有参数 //首次不执行 if(!first){ console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。 console.log(obj.limit); //得到每页显示的条数 page=obj.curr; //改变当前页码 limit=obj.limit; loadData(); //加载数据 // window.location.href= baseUrl+"/userMoneyLog/moneyLog/"+page+"/"+limit; }else{ first = false; } } }); }); } function loadData(){ $.ajax({ type:"post", url:baseUrl+"/"+[[${url}]],//对应controller的URL async:true, dataType: 'json', data:{ "currPage":page, "pageSize":limit, }, success:function(ret){ total=ret.pageUtil.total; //设置总条数 console.log(ret); var list=ret.pageUtil.records; var html=''; for(var i=0;i<list.length;i++){ html+='<tr>'; //html+='<td >'+list[i].id+'</td>'; /*html+='<td >'+list[i].orderid+'</td>';*/ if(list[i].paytype=='1'){ html+='<td >支付宝</td>'; }else { html+='<td >微信</td>'; } if(list[i].moneytype=='1'){ html+='<td >支出</td>'; }else { html+='<td >收入</td>'; } html+='<td >'+list[i].money+'</td>'; html+='<td >'+list[i].balance+'</td>'; if (empty(list[i].remark)) { html+='<td ></td>'; }else{ html+='<td >'+list[i].remark+'</td>'; } html+='<td >'+getTimeStrByDate(list[i].createtime)+'</td>'; html+='</tr>'; } $("#log-tbody").html(''); $("#log-tbody").html(html); } }); } function empty(b) { if (undefined ==b || b.length == 0){ return true; }else { return false; } } //将js日期对象转换为字符串格式 yyyy-MM-dd HH:mm:ss,适用各种浏览器 function getTimeStrByDate(date) { date = new Date(date); var y = date.getFullYear(); var M = date.getMonth() + 1; var d = date.getDate(); var H = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); return y + '-' + (M < 10 ? ('0' + M) : M) + '-' + (d < 10 ? ('0' + d) : d) + " " + (H < 10 ? ('0' + H) : H) + ":" + (m < 10 ? ('0' + m) : m) + ":" + (s < 10 ? ('0' + s) : s); } </script> </html>