layui同一个页面使用多个数据表格时的注意点
这个页面属于是layui的tabs模块和datatable的结合，我主要犯的错误是在生成表格的时候，控件名称一样
<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">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">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>
html>