效果展示
先看下分页效果:(界面基于layui实现)
代码详解
首先,将下方工具类复制到项目中
public class Tool {
/**
* sql数据通用分页
* @param currPage 当前第几页
* @param pageSize 本页有几条数据
* @param data 数据源
* @return 返回当前页面的数据
* */
public static List<?> paging(int currPage, int pageSize, List<?> data){
int firstIndex = (currPage - 1) * pageSize;
int lastIndex = currPage * pageSize;
if (lastIndex > data.toArray().length) lastIndex = data.toArray().length;
return data.subList(firstIndex,lastIndex);
}
}
调用方法:
//从前端获取当前页码
int currPage = Integer.parseInt(req.getParameter("pageNumber"));
//从前端获取本页行数
int pageSize = Integer.parseInt(req.getParameter("pageSize"));
//从数据库获取要分页的数据,链表格式
List<YourDataBean> yourData = ;
//获取后调用工具类处理数据返回或进行下一步处理
return Tool.paging(currPage,pageSize,yourData);
以上,已完整展示本工具类创建和调用方式,下方为补充
完整代码补充
完整接口代码:
@RequestMapping("/queryAllLogData")
public LayResBean queryAllLogData(HttpServletRequest req){
//获取分页
int currPage = Integer.parseInt(req.getParameter("pageNumber"));
int pageSize = Integer.parseInt(req.getParameter("pageSize"));
List<TSLogBean> logData = tsLogDao.queryAllLog();
int sum = logData.toArray().length;
return new LayResBean(Tool.paging(currPage,pageSize,logData),sum);
}
完整返回值bean类:
@Data
public class LayResBean {
Object data;
int count;
public LayResBean(Object data, int count) {
this.data = data;
this.count = count;
}
}
前端是基于layui传值和显示的,完整代码如下:
<table class="" id="demo" lay-filter="test"></table>
js初始化layUI表格代码:
layui.use(['layer', 'jquery', 'form'], function(){
let table = layui.table; let laypage = layui.laypage;
//绘制表格
table.render({
elem: '#demo'
,width : 'full'
,height: '750'
,url: '/queryAllLogData' //数据接口
,page:true //开启分页
,request: {
pageName: 'pageNumber', //页码的参数名称,默认:page
limitName: 'pageSize' //每页数据量的参数名,默认:limit
}
,limits: [5,10,15,25] //自定义分页数据选项
,limit:15
//默认根据创建时间从新倒旧排序
,initSort:{
field:'registerTime',
type:'desc',
},defaultToolbar: ['filter', 'exports', 'print'/*, { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips}*/
] ,parseData:function (res){
// console.log("res",res);
return{
"code":0,
"msg":"",
"count":res.count,
"data":res.data
}} ,title: '用户表'
,toolbar: '#toolbarLeftBtn' //左侧工具栏
// ,totalRow: true //开启合计行
//表头
,cols: [
[
// {type: 'checkbox', fixed: 'left'}//多选框
{ type: 'numbers', title: '序号', width: 100, fixed: 'left' }//序号列
,{field: 'logId', title: 'logId', width: 100, sort: true }
,{field: 'userId', title: 'userId', width: 90, sort: true }
,{field: 'userName', title: '用户名', width:120, sort: true}
,{field: 'logEvent', title: '日志内容', width:380, sort: true}
,{field: 'logTime', title: '提交日志时间', width:180, sort: true}
,{filed:'operation', toolbar: '#barDemo', title:'操作', width:90,fixed: 'right'}
]]
});
});
layUI的使用请参考 :Layui - 经典开源模块化前端 UI 组件库(官方开发文档)
好了,就是这些了,如果有如何不理解或报错或无法使用的情况,请在评论区@我