layui 弹窗中 分页展示table
1. 需求：点击查看更多，展示该类别 所有数据，并分页
2. 参考文档：
（1）https://www.jianshu.com/p/40da11ebae66
（2） https://blog.csdn.net/coderbruis/article/details/82424862
（3）https://blog.csdn.net/qq_43303896/article/details/105820439
3. 效果图：
4. 前端代码：
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"><head th:include="layout/head ::com-style"></head><body class="body-iframe"> <!-- 表单模块 -->
<div class="layui-card shadow">
<div class="layui-card-header">
查询表单
</div>
<div class="layui-card-body layui-fluid" id="queryForm">
<form class="layui-form">
<div class="layui-row">
<div class="layui-form-item">
<!-- 类型 S-->
<div class="layui-inline">
<label class="layui-form-label">类型</label>
<div class="layui-input-inline" style="width: 280px">
<select name="type" id="selectKey">
<option value="">请选择</option>
<option value="1">欢迎页</option>
<option value="2">首页浮窗</option>
<option value="3">好物推荐</option>
<option value="4">身体报告页底部</option>
<option value="5">知识页头部</option>
<option value="6">首页弹窗</option>
<option value="7">服务页头部</option>
</select>
</div>
</div>
<div class="layui-inline" style="padding-top: 20px;padding-left: 300px">
<label class="layui-form-label">机构</label>
<div class="layui-input-inline" style="width: 280px">
<input type="text" placeholder="搜索" value="" class="layui-input" name="institutionName">
<i class="layui-edge"></i>
</div>
</div>
<!-- 机构 E-->
</div>
</div>
</form>
<!-- <div class="layui-form-item layui-row" style="padding-left: 450px;padding-bottom: 20px">-->
<div class="layui-row" style="padding-left: 492px;padding-bottom: 20px">
<button class="layui-btn layui-btn-sm" data-type="reload">立即查询</button>
<button class="layui-btn layui-btn-sm layui-btn-primary" type="reset" id="resetTab">
重置
</button>
</div>
<!-- </div>-->
</div>
</div>
<!-- 表格模块 -->
<div class="layui-card shadow">
<div class="layui-card-header">表格</div>
<div class="layui-card-body">
<!-- 按钮栏 -->
<div class="layui-btnbar">
<button class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>添加
</button>
</div>
<!-- 数据表格实例 -->
<table class="layui-table" id="tableId" lay-filter="tableFilter"
lay-data="{method: 'post', page: true, url:'/appbanner/queryListSingle/'}">
<thead>
<tr>
<th lay-data="{field:'id', width:60, sort: true, fixed: true,templet: '#titleTpl'}">ID</th>
<th lay-data="{field:'typeDesc'}">类型</th>
<th lay-data="{field:'institutionName',width:108, fixed: false}">所属机构</th>
<th lay-data="{field:'url'}">跳转地址</th>
<th lay-data="{field:'validDesc'}">是否有效</th>
<th lay-data="{field:'typeDesc'}">标签</th>
<th lay-data="{field:'startTime'}">开始时间</th>
<th lay-data="{field:'endTime'}">结束时间</th>
<th lay-data="{field:'showTime'}">展示时间</th>
<th lay-data="{field:'modifyTime'}">更新时间</th>
<th lay-data="{fixed: 'right', width:200, align:'center', toolbar: '#demoToolbar'}">操作</th>
</tr>
</thead>
</table>
</div>
</div> <!--列表操作按钮-->
<script type="text/html" id="demoToolbar">
<a class="layui-btn layui-btn-xs" lay-event="show_more">查看更多</a>
</script>
<!--页面方法-->
<script>
layui.use('table', function () {
var table = layui.table;
var $ = layui.$, active = {
reload: function () {
from = $("#queryForm");
var data = getFormData(from);
//执行重载
table.reload('tableId', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: data
});
},
}; // 添加查询按钮事件
$('.layui-card-body .layui-btn').on('click', function () {
var type = $(this).data('type');
if (type === 'reload') {
active[type] ? active[type].call(this) : '';
} else {
from = $("#queryForm");
resetFormData(from);
}
});
// 添加新增按钮事件
$('.layui-btnbar .layui-btn').on('click', function () {
layer.open({
type: 2,
title: '新增',
shadeClose: true,
area: ['85%', '85%'],
fixed: false,
maxmin: true,
content: "/abc/detail",
btn: ['保存', '取消'],
yes: function (index) {
// 保存表单
var body = layer.getChildFrame('body', index);
var from = body.find('#detailForm');
saveForm(from, index, '', '/appbanner/save');
},
btn1: function (index) {
layer.close(index);
}
});
}); //监听工具条 -- 弹窗代码 S
table.on('tool(tableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'show_more') {
// 查看更多
var type = data.type;
layer.open({
type: 1,
area: ['95%', '95%'], //宽高
btn: ["确定"],
btn1: function (index) {
layer.close(index);
window.location.reload();
},
maxmin: false,
content: '<div><table id="openProductBox" lay-filter="openProductTable"></table></div>', //先定义一个数据表格的div框
success: function () {
table.render({
elem: '#openProductBox',
type: 'get',
url: "/abc/queryList?type=" + type,
height: 'full-130'
, page: true //使用分页
, limits: [10, 20, 30] //动态设置每页显示数据的条数
, pageSize: 10, //默认每页多少条
cols: [[ //表头
{field: 'id', title: 'ID', width: '6%', align: 'center'},
{field: 'institutionName', title: '所属机构', sort: true, align: 'center'},
{field: 'url', title: '跳转地址', sort: true, align: 'center'},
{field: 'validDesc', title: '是否有效', width: '8%', align: 'center'},
{field: 'typeDesc', title: '标签', width: '11%', align: 'center'},
{field: 'startTime', title: '开始时间', sort: true, align: 'center'},
{field: 'showTime', title: '展示时间', width: '11%', align: 'center'},
{field: 'modifyTime', title: '更新时间', sort: true, align: 'center'},
{
title: '操作',
minWidth: 135,
templet: '#toolbar',
sort: true,
align: "center"
}
]]
})
}
}) }
});
// 弹窗代码 E
//监听弹框内部 table 工具条
table.on('tool(openProductTable)', function (obj) {
var data = obj.data;
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
$.ajax({
url: '/abc/deleteById',
type: 'post',
data: {'id': data.id},
dataType: "json",
success: function (data) {
layer.close(index);
if (data.code == 0) {
$(".layui-laypage-btn")[0].click();
layer.msg("删除成功", {icon: 6});
} else {
layer.msg("删除失败", {icon: 5});
}
}
})
});
} else if (obj.event === 'edit') {
layer.open({
type: 2,
id: 'editDiv',
title: '编辑',
shadeClose: true,
area: ['90%', '90%'],
fixed: false,
maxmin: true,
content: "/abc/detail?id=" + data.id,
btn: ['保存', '取消'],
yes: function (index) {
//保存表单
var body = layer.getChildFrame('body', index);
var from = body.find('#detailForm');
saveForm(from, index, data.id, '/appbanner/save')
},
btn1: function (index) {
layer.close(index);
}
});
}
}); // 重置 select 框
$('#resetTab').on('click', function () {
var form = layui.form;
$("#selectKey").val("");
$("#selectKey1").val("");
form.render();
});
});
5. 后端代码（隐私起见，内部包 已删除，接口前缀已改）：
package com.abc.controller; import org.apache.commons.lang.StringUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody; import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.Comparator;
import java.util.List; @Controller
@RequestMapping("/abc")
public class AppBannerController {
@Resource
private AppBannerService appBannerService; /**
* 根据条件分页查询
*
* @param query
* @return
*/
@RequestMapping(value = "/queryList")
@ResponseBody
public WebResult queryList(AppBannerQuery query) {
WebResult webResult = new WebResult();
PageInfo<AppBannerSo> pageInfo = appBannerService.queryPageInfo(query);
List<AppBannerVo> vos = new ArrayList<>();
for (AppBannerSo so : pageInfo.getList()) {
AppBannerVo vo = new AppBannerVo();
BeanUtils.copyProperties(so, vo);
vo.setStartTime(DateUtils.format(so.getStartTime()));
vo.setEndTime(DateUtils.format(so.getEndTime()));
vo.setModifyTime(DateUtils.format(so.getModifyTime()));
vo.setTypeDesc(BannerTypeEnum.getDescByKey(so.getType()));
vo.setValidDesc(ValidEnum.getDescByKey(so.getValid()));
vo.setPixel(BannerTypeEnum.getPixelByKey(so.getType()));
vo.setShowLogoDesc(ShowLogoEnum.getDescByKey(so.getShowLogo()));
vos.add(vo);
}
// 按 id 正序
vos.sort(Comparator.comparingLong(AppBannerVo::getId)); webResult.setCode(WebResultCodeEnum.SUCCEED.getKey());
webResult.setCount(pageInfo.getTotal());
webResult.setData(vos);
return webResult;
} /**
* 根据条件分页查询 - 单类型展示
*
* @param query
* @return
*/
@RequestMapping(value = "/queryListSingle")
@ResponseBody
public WebResult queryListSingle(AppBannerQuery query) {
WebResult webResult = new WebResult();
PageInfo<AppBannerSo> pageInfo = appBannerService.queryListSingle(query);
List<AppBannerVo> vos = new ArrayList<>();
for (AppBannerSo so : pageInfo.getList()) {
AppBannerVo vo = new AppBannerVo();
BeanUtils.copyProperties(so, vo);
vo.setStartTime(DateUtils.format(so.getStartTime()));
vo.setEndTime(DateUtils.format(so.getEndTime()));
vo.setModifyTime(DateUtils.format(so.getModifyTime()));
vo.setTypeDesc(BannerTypeEnum.getDescByKey(so.getType()));
vo.setValidDesc(ValidEnum.getDescByKey(so.getValid()));
vo.setPixel(BannerTypeEnum.getPixelByKey(so.getType()));
vo.setShowLogoDesc(ShowLogoEnum.getDescByKey(so.getShowLogo()));
vos.add(vo);
}
webResult.setCode(WebResultCodeEnum.SUCCEED.getKey());
webResult.setCount(pageInfo.getTotal());
webResult.setData(vos);
return webResult;
}
}
layui 弹窗中 分页展示table的更多相关文章
- Java Web中将oracle的数据库内容以表格形式展现到页面中（分页展示）
分页SQL语句: ----分页显示 select * from (select rownum as r,t.* from () ; 查询的结果如下: 这个SQL,使用了三层嵌套的查询方式: 1)最内层 ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- html中使用js+table 实现分页
本文在html中利用js+table实现分页.主要思想是先对table中的所有数据隐藏,然后通过当前页面(currPageNum)来计算当前页要显示的行,并显示出来,首页.下一页.上一页.尾页都依此来 ...
- layui 数据表格+分页+搜索+checkbox+缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
- java中分页效果的实现代码
首先是将分页所需的一些个资源 ,抽象出一个javabean对象-PageBean: 先把需要分页的数据或是记录都查询出来 存入一个集合类里如List或是Vector, 然后利用其sublist(int ...
- Android中分页滑动实现总结
手机的屏幕相对较小,因此会出现当有多项内容需要展示而不得不进行分页的情况.例如手机桌面的应用图标的展示.一般一屏可以显示4*4=16个小方块形的应用程序,可以通过左右滑动进行屏幕的选择.而Androi ...
- Saiku设置展示table数据不隐藏空的行数据信息（二十六）
Saiku设置展示table数据不隐藏空的行数据信息 saiku有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...
- Django学习（5）优雅地分页展示网页
在我们平时浏览网页时,经常会遇到网页里条目很多的情形,这时就会用到分页展示的功能.那么,在Django中,是如何实现网页分类的功能的呢?答案是Paginator类. 本次分享讲具体展示如何利用Djan ...
- 弹窗中修改select默认值遇到的问题
弹窗中修改select默认值无效 前提: 项目中遇到一个需求, 在一个弹窗中,有很多个select都是在打开弹窗的同时由js自动生成的(每次打开都自动重新生成一遍). 弹窗打开后,从每个select的 ...
随机推荐
- JavaScript 对象：String & Array 及其常见应用
String对象 split 功能:把字符串分割为字符串数组.官方文档已经描述的够清楚,不多赘述.主要说一下需要注意的情况以及应用 1.省略分割参数 var str="How are you ...
- 力扣 - 剑指 Offer 59 - I. 滑动窗口的最大值
题目 剑指 Offer 59 - I. 滑动窗口的最大值 思路1(单调队列) 使用单调(递减)队列,保持队列中的元素是递减顺序,队列头保存的是当前窗口中最大的元素 首先先模拟建立第一个窗口,同时获取第 ...
- ES6-字符串-模板字符串（复习+学习）
昨天学习了字符串对象和字符串的表示,就是利用utf-8等不同的编码方式,还有许多的对象方法,都是处理字符串的方法,挺方便的,今天我学习了一下字符串模板,这里记录i一下学习的笔记,当然,今天学习了部分内 ...
- vue的逆向传值（子传父）
逆向传值:子组件传值给父组件叫做逆向传值 (是不v欸允许的,必须经过事件触发才能传值) 逆向传值步骤: 1.要传值必须先抛出,在接收 语法: this.$emit("event" ...
- Spring Cache 带你飞(二)
接着上一篇讲了 Spring Cache 如何被 Spring Aop 代理加载对应的代码,以及何如注入相关界面逻辑. Spring Cache 带你飞(一) 本篇我们围绕两个要点展开: 一个数据是如 ...
- CTF入门学习3->Web通信基础
Web安全基础 01 Web通信 这个部分重点介绍浏览器与Web服务器的详细通信过程. 01-00 URL协议 只要上网访问服务器,就离不开URL. URL是什么? URL就是我们在浏览器里输入的站点 ...
- WinForm训练一_改变窗体大小
1 //引用系统命名空间 2 using System; 3 //项目命名空间 4 using System.Collections.Generic; 5 using System.Component ...
- Unity Ioc 类型初始值设定项引发异常，The type name or alias SqlServer could not be resolved. Please check your configuration file and verify this type name.
先看一下unity的配置信息 <unity> <typeAliases> <typeAlias alias="IDatabase" type=&quo ...
- [atARC125F]Tree Degree Subset Sum
令$a_{i}$为$i$的度数-1,那么$(x,s)$合法即等价于存在$S\subseteq [1,n],|S|=x$且$\sum_{k\in S}a_{k}=s$ 引理:$(x,s)$合法的必要条件 ...
- [bzoj3317]First Knight
建立方程后直接高斯消元,再把0的区间找出来计算,就可以过(因为实际上这样的复杂度是5次的,且常数小)(当然这样的复杂度看上去并不太好,考虑优化)可以发现最后一行的概率都可以用上一行来表示,那么代入上一 ...