我的效果图是这样的。
<!DOCTYPE html>
<html>
<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">
<link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
<style>
.layui-table-tool-self{display:none}/*//工具栏右侧的导出不显示*/。这里我们不想要右边工具栏的导出打印。所以我就写了样式不让他显示了
</style>
</head>
<body class="childrenBody">
<!--工具栏-->
<div id="toolbar">
<div class="layui-input-inline">
<input class="layui-input" name="username" id="username" autocomplete="off" placeholder="姓名">
</div>
<div class="layui-input-inline">
<input class="layui-input" name="mobile" id="mobile" autocomplete="off" placeholder="手机号">
</div>
<button type="button" class="layui-btn search" lay-event="search" ><i class="layui-icon"></i>查询</button>
<button type="button" class="layui-btn layui-btn-normal add" lay-event="add"><i class="layui-icon"></i>新增</button>
</div>
<!--表格-->
<table class="layui-hide" id="test" lay-filter="test" lay-data="{id: 'test'}"></table>
<div id="pagesize"></div>
<!--批量删除-->
<script type="text/html" id="toolbarDemo">
<button class="layui-btn layui-btn-danger" lay-event="delete"><i class="layui-icon"></i>批量删除</button>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/static/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/lib/layui/layui.j