layui同一个页面使用多个数据表格时的注意点

最新推荐文章于 2022-07-19 17:48:21 发布
最新推荐文章于 2022-07-19 17:48:21 发布
阅读量2w 收藏 2
点赞数 2
分类专栏： layui 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Richard_reallife/article/details/80859688
版权

这个页面属于是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>
Richard_reallife
关注
专栏目录
layui一个页面中动态加载多个表格table 并且可以穿梭选择 编辑 并保存
勤劳的搬运工
04-15 1万+
楼主的水平不咋的 就不写过多的描述性文字了 代码只是实现了功能 没有进行优化过 有很大的优化空间 仅给有需要的同学一个参考 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/page/public/tag.jsp"%> <!D...
Layui同页面多个数据表格
ajax_yang的博客
01-09 1万+
前言： 1、个人转码小说网站：友书-绿色、纯净、无广告，欢迎广大小说阅读爱好者同行来本网站看小说 2、书友交流群：580462139（群主及管理均为资深90后程序猿，也欢迎诸位刚毕业的小白入群咨询编程、面试、就业等各方面问题哦） 3、对外承接app API开发、网站建设、系统开发，联系方式于文章最下方 正文： 1、截图（因为我是t...
Layui之 页面多个表格,使每个表格之间的样式效果互不影响，限定是某个表格
qq_39835505的博客
12-06 1548
var disabled_click_now = new Array(); // 不可点击的行 当前表格中 var table_data = new Array(); table.render({ elem: "#followTable_now", page: true, cols: [[ {field: "id", title: "ID", width: 100}, {field: "name", title: "文
layui多个数据表格共存一个页面处理
热门推荐
凌云鹤YK
04-11 1万+
layui数据表格多个共存一个页面处理1、html代码2、jq代码3、数据表格重载方式 今天在做后台时，遇到一个棘手的问题，就是layui的数据表格如果两个表格在一个页面，每个表格有一个搜索查询的筛选条件，那么每个搜索结果对应的只能刷新一个数据表格。如下图，当搜索药品的时候只刷新左表，当搜索器材的时候只刷新右表。 通过上网查询资料和看layui的开发文档，最终实现效果，实现过程如下： 我的表格渲...
layui中一个页面显示多个表格
可可爱爱的你吖的博客
06-28 7052
遇到一个页面，有近百个table表格，然后用的是layui模板引擎，整了好久，来记个笔记。 下面是写的表格模板 <script type="text/html" id="ListTable"> <!--start 数据表格 --> <div class="table_title"> <p class="code"> <span>流水号：{{d.run_id}}</span
layui一个页面使用多个文件upload上传按钮
09-02
本篇文章将详细讲解如何在layui中实现一个页面上使用多个独立的文件上传按钮，以及相关的配置和注意事项。 首先，layui的upload组件是基于HTML5的File API构建的，支持多文件选择、预览、上传进度显示等功能。在...
layui实现数据表格自定义数据项
10-16
在修改完毕后，便可以在页面上按照Layui的规范使用数据表格组件。尽管需要修改源码，但这样的操作只是局部的调整，不会影响其他功能。在实际应用中，这使得开发者能够灵活地应对不同的数据返回格式，从而让Layui更好...
layui一个表格中怎么接两个接口的值_layui多个数据表格共存一个页面处理
weixin_39945915的博客
12-21 890
layui多个数据表格共存一个页面处理1、html代码2、jq代码3、数据表格重载方式今天在做后台时，遇到一个棘手的问题，就是layui的数据表格如果两个表格在一个页面，每个表格有一个搜索查询的筛选条件，那么每个搜索结果对应的只能刷新一个数据表格。如下图，当搜索药品的时候只刷新左表，当搜索器材的时候只刷新右表。 通过上网查询资料和看layui的开发文档，最终实现效果，实现过程如下：我的表格渲染方式...
解决Layui数据表格显示无数据提示的问题
10-16
在使用Layui框架开发Web项目时，数据表格是非常常见的组件之一，它能够以表格形式展示数据列表。但在某些情况下，当后端返回的数据为空时，数据表格可能无法正确显示无数据的提示，这会影响用户的交互体验。为此，...
LAYUI TABLE表格调用多个数据表内容，多数据库表格组合拼接输出
fat_fat的博客
01-20 1774
layui 表格一般是针对一张数据表的数据进行查询绑定输出。但是实际运用中出现需要对多张数据库表的内容进行拼接输出。经过多方资料查询，最终总结出我们需要在php前端对返回数据进行拼接，让返回数据包含我们需要的字段。 最终成品如下图 说明：两张数据库表格都有相同的字段【商品名称】 在table前端的写法都一样。关键是php后端对于返回数据的拼接 这里是常规后台返回数据 我们看到data的内容就是直接对数据库查询返回的结果，其字段都是固定的，而我们需要的字段这个数据表中并没有，这就需要我们对$
Layui实现数据表格默认全部显示(不要分页)
10-16
今天小编就为大家分享一篇Layui实现数据表格默认全部显示(不要分页)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui分成两列相同的表格_LayUI--表格 + 分页
weixin_39829166的博客
01-13 470
记录每一个小坑、大坑一般项目中表格加分页是必要的，看官方文档整理一个简单的例子0. 其它1. LayUILayUI 是比较常用的框架，效果还是挺好的效果表格分页2. 实例在需要的地方添加表格容器同时添加分页容器两个容器节点的ID具有唯一性记得引入 jQuery 与 layUI相关 js 、 css使用GetList()function GetList(STIME='2019-06-01 00:00...
Springboot整合layui之一个页面显示两张表格
HANHUABAO1122的博客
03-24 3304
springboot结合layui框架项目，实现同一页面两个表格关联
layui 日期控件 同一页面绑定多个 出现二次渲染 一闪而过情形 解决
zalan01408980的博客
06-20 1272
在做调用laydate日期控件的时候，因为要在同一页面绑定多个，虽然写了两次调用，id也改了。不过还是第一个input框能获取到日期控件，当点击第二个的时候就会“嗖”的一下，一闪而过了。在尝试多次无果后，只好js写一个方法动态绑定elem元素，具体代码如下： 代码 先引入日期控件，没有的去官网下载：http://www.layui.com/laydate/。 <script type="...
Layui table 多个表格获取某个表格的全部数据
wangcuiling_123的博客
01-02 1万+
layui table，获取table的全部数据，只需要一行代码即可： layui.table.cache.table // table为id 当页面有两个或多个table实例时，获取其全部数据只需指定id即可： layui.table.cache.table // id为table layui.table.cache.table1 // id为table1 ...
[Layui]layui多个tab加载数据并在标题显示每个tab的数据条数
德仔
03-20 897
功能描述：在页面中有多个tab需要切换，页面加载或点击搜索按钮时异步获取全部tab的数据，并在tab的表头中显示每个tab的数据条数。 效果如图所示： 关键的html代码： <div class="layui-card-body"> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title" style="padding-right: 30px;height: auto!important;
layui中为什么表格渲染后选中样式有问题怎么处理？
weixin_43957646的博客
07-01 324
layui中为什么表格渲染后选中样式有问题怎么处理？
layui 多个table 事件无效问题
qq_43560515的博客
07-19 1430
layui table事件注册
layui多个tab加载数据并在标题显示每个tab的数据条数
ITSM/ITIL/网络安全/IT运维
04-28 957
能描述 在页面中有多个tab需要切换，页面加载或点击搜索按钮时异步获取全部tab的数据，并在tab的表头中显示每个tab的数据条数。 效果如图所示： 关键的html代码： <div class="layui-card-body"> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title" style="padding-right: 30px;height: ...
实现一个tornado通过mysql向跳转html页面传送layui表格数据的的例子
最新发布
03-21
可以参考以下代码： ```python import tornado.ioloop import tornado.web import pymysql class MainHandler(tornado.web....注意，这只是一个简单的例子，实际应用中需要进行更多的错误处理和安全性检查。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值