再前台发送一个请求（利用的Ajax），再后台中找到两个表的数据。分别返回list。
再封装一个实体类，实体类中放两个元素，list<表1对象>，list<表2对象>。
再把查询出来的表list分别放到实体类中。返回，然后在前台分别创建两个tab标签，每个tab标签显示一个表格的数据
上代码：
1.前台显示。用的easy UI的tab
2.访问该链接的函数，把tab标签添加出来，并把每个tab中的table表格渲染出来，在触发Ajax请求
3.触发Ajax的请求
4.添加实体类，其中每一个list<>每个表返回的集合
5.开发controller层的方法。其中查找数据的service、dao层自行创建
6.回去修改Ajax返回的数据
可以看到返回数据的格式。

$('#tableId').datagrid('loadData',数据);
在这个easy UI中的datagrid('loadData',数据)的方法中。“数据”可以是list集合，也可以是{rows：list集合，count：条数}
最后放上成功显示的页面：

补充：这是表格渲染的函数样式；可根据自己需要修改其中的columns

总结：在分两个tab标签，分别显示两个表格数据，也可以用datagrid的url访问。如果这样的话即使发送了两个请求。
在返回数据的时候，返回该实体类的对象应该是可行的。
其中在Ajax中可以添加自己要查询的条件。先获得第一个表的list。根据第一个表中的id值作为条件，查询第二张表的数据。

上一篇文章讲解了如何生成excel文件，name这一章我们来谈谈如何将多个excel文件打包成压缩包的形式
首先看一下主函数：
public static void main(String[] args) throws IOException {
		try {
			File file1 = new File("students1.xls");
			File file2 = new File("students2.xls");
			File file3 = new File("students3.xls");
			//创建三个文件，放入list中
			ArrayList list = new ArrayList();
			list.add(file1);
			list.add(file2);
			list.add(file3);
			//创建临时压缩包
			File file = new File("e:/certpics.rar");
			  //创建文件输入输出流
			FileOutputStream fous = new FileOutputStream(file);   
			  /**打包的方法我们会用到ZipOutputStream这样一个输出流*/
	        ZipOutputStream zipOut= new ZipOutputStream(fous);
	         //进入打包方法
	        zipFile(list, zipOut);
	        zipOut.close();
	        fous.close();
		} catch (FileNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}


主函数里面包含一个zipFile()的方法，接下来展示给大家：
	  /**
	     * 把接受的全部文件打成压缩包
	     */
	    @SuppressWarnings("rawtypes")
		public static void zipFile(List files,ZipOutputStream outputStream) {
	        int size = files.size();
	        for(int i = 0; i < size; i++) {
	            File file = (File) files.get(i);
	            zipFile(file, outputStream);
	        }
	    }
上面的函数里面存在一个zipFile（）的函数，注意啊，这个是方法的参数可是不同的啊。
/** 
	     * 根据输入的文件与输出流对文件进行打包
	     * @param File
	     * @param org.apache.tools.zip.ZipOutputStream
	     */
	    public static void zipFile(File inputFile,ZipOutputStream ouputStream) {
	    	System.out.println(inputFile.getName());
	    	try {
				ZipEntry entry1 = new ZipEntry(inputFile.getName());
				ouputStream.putNextEntry(entry1);
			} catch (IOException e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
	        
	    }
运行之后你就可以去你的e盘下面找到这个叫certpics.rar的压缩包了。

https://www.jianshu.com/p/a04eafcc2f69



欢迎使用Markdown编辑器
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键
撤销：Ctrl/Command + Z

重做：Ctrl/Command + Y

加粗：Ctrl/Command + B

斜体：Ctrl/Command + I

标题：Ctrl/Command + Shift + H

无序列表：Ctrl/Command + Shift + U

有序列表：Ctrl/Command + Shift + O

检查列表：Ctrl/Command + Shift + C

插入代码：Ctrl/Command + Shift + K

插入链接：Ctrl/Command + Shift + L

插入图片：Ctrl/Command + Shift + G

查找：Ctrl/Command + F

替换：Ctrl/Command + G
合理的创建标题，有助于目录的生成
直接输入1次#，并按下space后，将生成1级标题。

输入2次#，并按下space后，将生成2级标题。

以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本

引用文本

H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片: 
带尺寸的图片: 
居中的图片: 
居中并且带尺寸的图片: 
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表

项目

项目

项目






项目1
项目2
项目3


 计划任务
 完成任务

创建一个表格
一个简单的表格是这么创建的：




项目
Value




电脑
$1600


手机
$12


导管
$1


设定内容居中、居左、居右
使用:---------:居中

使用:----------居左

使用----------:居右




第一列
第二列
第三列




第一列文本居中
第二列文本居右
第三列文本居左


SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：




TYPE
ASCII
HTML




Single backticks
'Isn't this fun?'
‘Isn’t this fun?’


Quotes
"Isn't this fun?"
“Isn’t this fun?”


Dashes
-- is en-dash, --- is em-dash
– is en-dash, — is em-dash


创建一个自定义列表

Markdown
Text-to-HTML conversion tool
Authors
John
Luke

如何创建一个注脚
一个具有注脚的文本。
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 是通过欧拉积分
$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章


关于 甘特图 语法，参考 这儿,

UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:


关于 Mermaid 语法，参考 这儿,

FLowchart流程图
我们依旧会支持flowchart的流程图：


关于 Flowchart流程图 语法，参考 这儿.

导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，

继续你的创作。



mermaid语法说明 ↩︎

注脚的解释 ↩︎

这个页面属于是layui的tabs模块和datatable的结合，我主要犯的错误是在生成表格的时候，控件名称一样

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>新增</title>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<head th:replace="common/commonHTML :: listCommonCSSJS"></head>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
<script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
<style type="text/css">
    @media(max-width:1240px){
        .layui-form-item .layui-inline{ width:100%; float:none; }
    }
    .layui-form-item .layui-inline{ width:33.333%; float:left; margin-right:0; }
</style>
</head>
<body style="margin-left:10px;background-color:white">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
          <li class="layui-this" id="wx1">微信登录日志</li>
          <li id="scan2">视频点击日志</li>
        </ul>
        <div class="layui-tab-content">
             <div class="layui-tab-item layui-show">
                <blockquote class="layui-elem-quote news_search" style="background-color:white;">
                    <form class="layui-form" action="">
                        <div class="layui-inline">
                            <div class="layui-input-inline" style="margin-right:10px;width:150px;margin-top:5px;">
                                <input placeholder="用户名" class="layui-input search_input" type="text" id="name_w" name="invoiceTitle" />
                            </div>
                            <div class="layui-inline" style="margin-top:5px;width:170px;">
                                <input type="text" class="layui-input" id="startDate_w" placeholder="登录时间区间（前）"/>
                            </div>
                            <div class="layui-inline" style="margin-top:5px;width:170px;">
                                <input type="text" class="layui-input" id="endDate_w" placeholder="登录时间区间（后）"/>
                            </div>
                            <div class="layui-input-inline" style="margin-right:10px;width:150px;margin-top:5px;">
                                <input placeholder="手机号" class="layui-input search_input" type="text" id="loginTel_w" name="loginTel" />
                            </div>
                            <div class="layui-input-inline" style="margin-right:10px;width:150px;margin-top:5px;">
                                <input placeholder="微信名" class="layui-input search_input" type="text" id="wxNum_w" name="wxNum" />
                            </div>
                        </div>
                        <div class="layui-inline" style="margin-top:5px;">
                            <a class="layui-btn search_btn" data-type="reload" id="searchWXData"><i class="layui-icon">&#xe615;</i>查询</a>
                        </div>
                    </form>
                </blockquote>

                <div class="layui-form news_list" style="margin-top:25px;">
                    <table id="wx" lay-filter="wxDataTable" class="layui-table" lay-data="{id:'wxLoginDataReload'}">
                        <thead>
                            <tr>
                                <th lay-data="{field:'name',width:220}">用户名</th>
                                <th lay-data="{field:'loginTel',width:220}">手机号</th>
                                <th lay-data="{field:'wxName',width:220}">微信名</th>
                                <th lay-data="{field:'operateDate',width:250}">登录日期</th>
                                <th lay-data="{field:'loginType',width:220}">登录方式</th>
                            </tr>
                        </thead>
                    </table>
                </div>
             </div>

             <div class="layui-tab-item">
                 <div class="layui-tab-item layui-show">
                 <input type="hidden" id="mo" value="1"/>
                    <blockquote class="layui-elem-quote news_search" style="background-color:white;">
                        <form class="layui-form" action="">
                            <div class="layui-inline">
                                <div class="layui-input-inline" style="margin-right:10px;width:150px;margin-top:5px;">
                                    <input placeholder="用户名" class="layui-input search_input" type="text" id="name_s" name="invoiceTitle" />
                                </div>
                                <div class="layui-inline" style="margin-top:5px;width:170px;">
                                    <input type="text" class="layui-input" id="startDate_s" placeholder="观看视频时间区间（前）"/>
                                </div>
                                <div class="layui-inline" style="margin-top:5px;width:170px;">
                                    <input type="text" class="layui-input" id="endDate_s" placeholder="观看视频时间区间（后）"/>
                                </div>
                                <div class="layui-input-inline" style="margin-right:10px;width:150px;margin-top:5px;">
                                    <input placeholder="手机号" class="layui-input search_input" type="text" id="loginTel_s" name="loginTel" />
                                </div>
                                <div class="layui-input-inline" style="margin-right:10px;width:150px;margin-top:5px;">
                                    <input placeholder="微信名" class="layui-input search_input" type="text" id="wxNum_s" name="wxNum" />
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-top:5px;">
                                <a class="layui-btn search_btn" data-type="reload" id="searchScanData"><i class="layui-icon">&#xe615;</i>查询</a>
                            </div>
                        </form>
                    </blockquote>

                    <div class="layui-form news_list" style="margin-top:25px;">
                        <table id="scan" lay-filter="scanRecordTable" class="layui-table" lay-data="{id:'scanRecordDataReload'}">
                            <thead>
                                <tr>
                                    <th lay-data="{field:'name',width:150}">用户名</th>
                                    <th lay-data="{field:'tel',width:140}">手机号</th>
                                    <th lay-data="{field:'wxNum',width:150}">微信名</th>
                                    <th lay-data="{field:'fillDate',width:170}">视频观看时间</th>
                                    <th lay-data="{field:'process',width:130}">课程分类</th>
                                    <th lay-data="{field:'childType',width:160}">课程子类</th>
                                    <th lay-data="{field:'resourceTitle',width:230}">课程名称</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
             </div>
        </div>
    </div> 

</body>
<script type="text/javascript">
layui.use('laydate', function(){
      var laydate = layui.laydate;
      laydate.render({
        elem: '#startDate_w',//指定元素
        type: 'datetime',
        format:'yyyy-MM-dd HH:mm:ss',
        theme: 'grid'
      });
      laydate.render({
        elem: '#endDate_w',//指定元素
        type: 'datetime',
        format:'yyyy-MM-dd HH:mm:ss',
        theme: 'grid'
      });
      laydate.render({
        elem: '#startDate_s',//指定元素
        type: 'datetime',
        format:'yyyy-MM-dd HH:mm:ss',
        theme: 'grid'
      });
      laydate.render({
        elem: '#endDate_s',//指定元素
        type: 'datetime',
        format:'yyyy-MM-dd HH:mm:ss',
        theme: 'grid'
      });
});
var tableOptions = {
        url : '/loginRecord/getWxLoginLogPageData',
        method : 'POST',
        id : 'wxLoginDataReload',
        page : true
}
var tableOptions_s = {
        url : '/loginRecord/getScanRecordPageData',
        method : 'POST',
        id : 'scanRecordDataReload',
        page : true
}
layui.use('table', function() {//layui 模块引用，根据需要自行修改
    var layer = layui.layer, tablew = layui.table;//注意控件table的名称要改变
    var createTable = function() {
        tablew.init('wxDataTable', tableOptions);
    }
    createTable();
    // 查询
    $('#searchWXData').on('click', function() {
        tablew.reload("wxLoginDataReload", { // 此处是上文提到的 初始化标识id
            where : {
                name : $("#name_w").val().trim(),
                loginTel : $("#loginTel_w").val().trim(),
                wxName : $("#wxNum_w").val().trim(),
                startDate:$("#startDate_w").val().trim(),
                endDate:$("#endDate_w").val().trim()
            },
            page : {
                curr : 1
            }
        });
    });
});

layui.use('element', function(){
      var element = layui.element;
      //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
      var layid = location.hash.replace(/^#docDemoTabBrief=/, '');
      element.tabChange('docDemoTabBrief', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

      //监听Tab切换，以改变地址hash值
      element.on('tab(docDemoTabBrief)', function(){
        location.hash = 'docDemoTabBrief='+ this.getAttribute('lay-id');
        layui.use('table', function() {//layui 模块引用，根据需要自行修改
            var layer = layui.layer, tables = layui.table;
            var createTable = function() {
                tables.init('scanRecordTable', tableOptions_s);
            }
            createTable();
            // 查询
            $('#searchScanData').on('click', function() {
                tables.reload("scanRecordDataReload", { // 此处是上文提到的 初始化标识id
                    where : {
                        name : $("#name_s").val().trim(),
                        tel : $("#loginTel_s").val().trim(),
                        wxNum : $("#wxNum_s").val().trim(),
                        startDate:$("#startDate_s").val().trim(),
                        endDate:$("#endDate_s").val().trim()
                    },
                    page : {
                        curr : 1
                    }
                });
            });
        });
      });

});

</script>
<!-- <script type="text/javascript" th:src="@{/js/loginRecord/loginRecord.js}"></script> -->
</html>