前言
相信看到这个文章的人都是那些不知道如何将layui的分页如何实现的人，layui官方有一个组件 叫做laypage 但是我作为一个java开发人员，实在不是很懂原生js的使用，就连这个layui我熟练起来也花了一部分时间。
下面我来 讲解一下我的layui的表格进行分页的。
先看效果
这里的效果就是可以点击页码进行页面内容的跳转，和layui的表格完美适配
实现
java代码实现：
实体类
package com.zzq.common;
/**
* @ClassName: PageInfo
* @Description: 自定义的page对象 为了适应 layui
* @date: 2019年11月29日 上午10:10:01
*/
public class PageInfo {
/**
* 数据 对应 pagerheper的数据
*/
private Object data;
/**
* 总数据条数 对应layui的count
*/
private Long count;
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public Long getCount() {
return count;
}
public void setCount(Long count) {
this.count = count;
}
}
下面是实现类
//控制器 调用 获取 图书的 列表
@RequestMapping(value = "getuserbookleadlist")
@ResponseBody
//这里的 BookLendQuery 是用来做 页面上面的 搜索的 不做 条件查询可以不用这个参数
public Object getuserbooklist(BookLendQuery query, HttpSession session) {
//获取登录信系 得到 表中主键
userinfo userinfo=(userinfo)session.getAttribute("user");
if(userinfo==null) {return new BaseResult(0, "登录状态已过期，请重新登录");}
//此处使用的是自己创建的Pageinfo
PageInfo pageInfo= (PageInfo) bookservice.getUserLeadBookByUser(query, userinfo.getUserid());
return new BaseResult(0, "", pageInfo);
}
BookLendQuery 代码
package com.zzq.common;
public class BaseQuery {
/**
* 页码 默认 1
*/
private Integer page = 1;
/**
* 每页的数据长度 默认 10
*/
private Integer limit = 10;
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public Integer getLimit() {
return limit;
}
public void setLimit(Integer limit) {
this.limit = limit;
}
}
package com.zzq.common;
public class BookLendQuery extends BaseQuery{
//前端传来 的图书名称 与 班级
public String bookname;
public Integer bookclass;
public String getBookname() {
return bookname;
}
public void setBookname(String bookname) {
this.bookname = bookname;
}
public Integer getBookclass() {
return bookclass;
}
public void setBookclass(Integer bookclass) {
this.bookclass = bookclass;
}
}
server层
/**
* 用户获取到所有的用户图书
* @param query
* @param userid
* @return
*/
public Object getUserLeadBookByUser( BookLendQuery query,Integer userid) {
//使用的pageHelper分页插件 获取分页的页数与页面条数
Page<Object> page=PageHelper.startPage(query.getPage(),query.getLimit());
//调用 DAO实现查询
bookleadinfoDAO.userselectleadinfoByuserid(query.getBookname(),query.getBookclass(),userid);
//创建自定义 Pageinfo对象
PageInfo pageinfo =new PageInfo();
//将pageHepler中得到的数据信息set进 自定义对象中
pageinfo.setCount(page.getTotal());
pageinfo.setData(page.getResult());
return pageinfo;
}
```
DAO层 接口
List<booklendinfo> userselectleadinfoByuserid(@Param("bookname")String bookname,@Param("bookclass")Integer bookclass,@Param("userid")Integer actionid);
DAO层 Mapper 查询方法
<select id="userselectleadinfoByuserid" parameterType="java.lang.Integer" resultMap="fullResultMap">
SELECT
actionid,userid,lendtime,isover,isdel,bookname,isgrounding,price,subdate,classify,e.bookid
FROM
(
SELECT
*
FROM
booklendinfo
<where>
<if test="userid!=null">
userid = #{userid}
</if>
</where>
) e
INNER JOIN (
SELECT
*
FROM
bookinfo
<where>
<if test="bookclass!=null">
and classify =#{bookclass}
</if>
<if test="bookname!=null and bookname!=''">
and bookname like'%${bookname}%'
</if>
</where>
) d ON e.bookid = d.bookid
</select>
前端代码 我根据页面元素直接贴全部的 主要 看我的 写了注释部分
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/view/common/base.jsp"%>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="${ctxsta}/img/img-01.png" type="image/x-icon" />
<link rel="stylesheet" href="${ctxsta}/layui/layui/css/layui.css">
<title>Insert title here</title>
</head>
<body>
<div style="margin-top: 20px;margin-left: 20px">
<hr class="layui-bg-green">
<form class="layui-form layui-form-pane">
<!-- 一排3个 -->
<div class="layui-form-item">
<div class="layui-inline"style="width: 150px;">
用户 ：<h1>${user.username}</h1>
</div>
<div class="layui-inline">
<div class="layui-input-inline" style="width: 190px;">
账户余额:<h1>${count}<h1>
</div>
<div class="layui-input-inline" style="left: 620px;">
</div>
</div>
</div>
</form>
<hr class="layui-bg-green">
<form class="layui-form layui-form-pane">
<!-- 一排3个 -->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">书籍名称</label>
<div class="layui-input-inline">
<input name="bookname" id="bookname" class="layui-input" placeholder="书籍名称" />
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">书籍类型</label>
<div class="layui-input-inline">
<select name="bookclass" lay-verify="required" id="bookclass">
<option value=""></option>
<option value="1">计算机</option>
<option value="2">人文</option>
<option value="3">金融</option>
<option value="4">社科</option>
</select>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline" style="width: 90px;">
<button type="button" class="layui-btn" id="searchBtn"><i class="layui-icon layui-icon-search"></i>搜索</button>
</div>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-primary" type="reset"><i class="layui-icon layui-icon-refresh-1"></i>重置</button>
</div>
</div>
</div>
</form>
<table id="dataTable" lay-filter="dataTableFilter"></table>
</div>
<table id="demo" lay-filter="dataTableFilter1"></table>
<form class="layui-form" id="leadform" style="display:none">
<div class="layui-form-item">
<label class="layui-form-label" style="width:170px">确认借阅书籍名称</label>
<div class="layui-input-block" style="width:270px">
<input type="text" name="title" style="width:270px"
lay-verify="required" class="layui-input" id="leadbookname" value="" readonly="true">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" style="width:150px" >请确认借阅用户</label>
<div class="layui-input-block" style="width:270px">
<input type="text" name="title" style="width:270px"
lay-verify="required" class="layui-input" id="leadbookuser" value="${user.username}" readonly="true">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" style="width:120px" >书籍押金</label>
<div class="layui-input-block" style="width:270px">
<input style="width:270px"
class="layui-input" id="leadbookprice" readonly="true" >
</div>
</div>
</form>
</body>
<!-- 行工具栏 -->
<script type="text/html" id="rowBtns">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add"></i>申请归还</button>
</script>
<script language="JavaScript" src="${ctxsta}/jquery-3.2.0.min.js"></script>
<script src="${ctxsta}/layui/layui/layui.js"></script>
<script>
function Format(datetime,fmt) {
if (parseInt(datetime)==datetime) {
if (datetime.length==10) {
datetime=parseInt(datetime)*1000;
} else if(datetime.length==13) {
datetime=parseInt(datetime);
}
}
datetime=new Date(datetime);
var o = {
"M+" : datetime.getMonth()+1, //月份
"d+" : datetime.getDate(), //日
"h+" : datetime.getHours(), //小时
"m+" : datetime.getMinutes(), //分
"s+" : datetime.getSeconds() //秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}
</script>
<script type="text/javascript">
layui.use(['form','layer','laydate','table'],function(){
var layer = layui.layer;
var table = layui.table;
var form = layui.form;
//渲染table数据表格
var t = table.render({
id:"dataTableId",
elem:"#dataTable",
url:"${pageContext.request.contextPath}/book/getuserbookleadlist",//数据地址
page:true,//开启分页
toolbar:"#headerBtns",//
height:450,
parseData:function(rs){//数据解析
if(rs.code == 0){
return {
"code":rs.code,
"msg":rs.message,
"count":rs.data.count,
"data":rs.data.data
}
}
},
cols:[[//数据表头
{field:'actionid',title:'交易编号'},
{field:'bookid',title:'书籍编号'},
{field:'bookname',title:'书籍名称'},
{field:'subdate',title:'上架时间',
templet:'<div>{{ Format(d.subdate,"yyyy-MM-dd")}}</div>'},
{field:'lendtime',title:'借阅时间',
templet:'<div>{{ Format(d.lendtime,"yyyy-MM-dd hh:mm:ss")}}</div>'},
{field:'price',title:'借阅押金' ,style:'color:green'},
{field:'classify',title:'书籍分类 ',style:'color:blue' ,templet:function(d){
if(d.classify == 1){
return "计算机";
}else if(d.classify == 2){
return "人文";
}else if(d.classify == 3){
return "金融";
}else if(d.classify == 4){
return "社科";
}
}},
{field:'isover',title:'借阅状态' ,style:'color:red',templet:function(d){
if(d.isover == 1){
return "借阅中";
}else if(d.isover == 3){
return "归还中";
}else{
return "已归还";
}
}},
{field:'isgrounding',title:'是否上架' ,style:'color:green',templet:function(d){
if(d.isgrounding == 1){
return "上架中";
}else{
return "";
}
}},
{title:'操作',toolbar:'#rowBtns',fixed:'right',width:'150'}
]]
});
//搜索按钮事件
$("#searchBtn").click(function(){
var bookclass = $("#bookclass").val();
var bookname = $("#bookname").val();
//进行表格数据重载 j进行 条件查询
t.reload({
where:{
'bookname':bookname,
'bookclass':bookclass
},
page:1
});
});
//==行监听事件=============================================
table.on("tool(dataTableFilter)",function(d){
var event = d.event;
var data = d.data;
if(event == "add"){
//归还书籍
add(data,d);
}
});
function add(data,d){
//使用二次确认
layer.confirm("确定要归还吗?",function(index){
//将需要重置的用户ID 传给后台
$.post("${pageContext.request.contextPath}/book/returnbook",{actionid:data.actionid},function(rs){
//校验业务码
if(rs.code != 200){
//显示异常信息
layer.msg(rs.message);
return false;
}
layer.msg("删除成功");
//关闭弹出层
layer.close(index);
//重载数据列表
$("#searchBtn").click();
});
});
}
});
</script>
<script type="text/javascript">
function suaxin()
{
//页面刷新
window.location.href = '${pageContext.request.contextPath}/common/tomyleadbook';
}
</script>
</html>
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
