layui中,同一个页面动态加载table数据表格
效果图:
前端代码:
<div class="layui-fluid" id="record-user" hidden="hidden">
<div class="layui-card">
<div class="layui-form" lay-filter="datafile">
<div class="layui-form-item">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table id="qqdata" lay-filter="qqdata" class="layui-table" lay-data="{id:'qqdata'}"></table>
</div> <div class="layui-tab-item">
<table id="wechatdata" lay-filter="wechatdata" class="layui-table" lay-data="{id:'wechatdata'}"></table>
</div> <div class="layui-tab-item">
<table id="telephonedata" lay-filter="telephonedata" class="layui-table" lay-data="{id:'telephonedata'}"></table>
</div> <div class="layui-tab-item">
<table id="computerdata" lay-filter="computerdata" class="layui-table" lay-data="{id:'computerdata'}"></table>
</div> <div class="layui-tab-item">
<table id="rechargecarddata" lay-filter="rechargecarddata" class="layui-table" lay-data="{id:'rechargecarddata'}"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
js 代码:
ayer.open({
type:1,
title: 'xxx--xx:'+ xxx,
content: $('#record-user'),
btn:['确定','取消'],
area: ['80%', '90%'],
resize: false,
move: false,
success : function(res){
layui.table.render({
elem: "#qqdata",
url: "{:url('xxx')}",
method: 'POST',
page: true,
cellMinWidth: 80,
done: function(res) { },
page: true,
cols: [[
// {type: 'checkbox', fixed: 'left'},
{field: 'xx', title: 'xxx', sort: true, align: 'center'},
{field: 'xx', title: 'xxx', sort: true, align: 'center'},
{field: 'x', title: 'xxx', sort: true, align: 'center'},
{field: 'xxx', title: 'xxx', sort: true, style:'color:red',align: 'center'},
{field: 'xx', title: 'xx', sort: true, align: 'center'},
]] ,
where: {xxxx:xxx},
layui.table.render({
elem: "#wechatdata",
url: "{:url('xxx')}",
method: 'POST',
page: true,
cellMinWidth: 80,
done: function(res) { },
page: true,
cols: [[
// {type: 'checkbox', fixed: 'left'},
{field: 'xxxx', title: 'xxx', sort: true, align: 'center'},
{field: 'xxxx', title: 'xxxx', sort: true, align: 'center'},
{field: 'xxxx', title: 'xxxx', sort: true, align: 'center'},
{field: 'xxx', title: 'xxx', sort: true, style:'color:red',align: 'center'},
{field: 'xxxx', title: 'xxxx', sort: true, align: 'center'},
]] ,
where: {xxxxx:xx},
})
layui中,同一个页面动态加载table数据表格的更多相关文章
- easyui中datagrid用法,加载table数据与标题
加载标题写法: 多行标题:columns: [[ columns: [[ { field: 'itemid', title: 'Item ID', rows ...
- layui中radio的动态加载(进入修改页面时,设置radio)
动态设置 radio 的值让它处于选中状态 效果图 : 前端代码: <div class="layui-form-item"> <label class=& ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- geotrellis使用(二十三)动态加载时间序列数据
目录 前言 实现方法 总结 一.前言 今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...
- Echarts使用及动态加载图表数据
Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...
- web页面动态加载UserControl,并调用用户控件中的方法来初始化控件
1,HTML页 头部注册: <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/CeShiBu.ascx" TagPre ...
- 在Unity3D的网络游戏中实现资源动态加载
用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的开始让用户长时间等待全部资源的加载完毕.应该优先加载用户附近的场景资源,在游 ...
- (转)在Unity3D的网络游戏中实现资源动态加载
原文:http://zijan.iteye.com/blog/911102 用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态加载.比如想加载一个大场景的资源,不应该在游戏的 ...
- html中的图像动态加载问题
首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...
随机推荐
- python模块之xml
xml模块 xml结构 xml是种实现不同语言或程序之间进行数据交换的协议,跟json差不多,但没json使用简单.但是因为历史遗留问题,至今很多行业依然使用xml这种数据格式. xml的格式如下,是 ...
- centos rancher 通过本机 docker images 新增container
示例目标: 将centos 本地的docker image ,通过rancher 进行 add container 相关步骤: step 1 : rancher 所在 centos 主机,有相应的 d ...
- Session的原理,大型网站中Session方面应注意什么?
一.Session和Cookie的区别Session是在服务器端保持会话数据的一种方法(通常用于pc端网站保持登录状态,手机端通常会使用token方式实现),存储在服务端. Cookie是在客户端保持 ...
- angular post 带参数 导出excel
原文地址:http://www.cnblogs.com/xujanus/p/5985644.html html <button class="btn btn-info" ng ...
- elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- CSS样式—— 字体、元素的垂直水平居中
1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...
- 2 >&1 的准确含义
1. 2代表标准错误,2 > 表示重定向,就是把标准错误重定向到 1中,这个1如果想表示标准输出的话,就必须在前面加 & 2. 正常情况下,下面这个会有很多错误信息,但是加上2>& ...
- RPC理论以及Dubbo的使用介绍
RPC 的主要功能目标是让构建分布式应用更容易,在提供强大的远程调用能力时不损失本地调用的语义简洁性. 为实现该目标,RPC 框架需提供一种透明调用机制让使用者不必显式的区分本地调用和远程调用. RP ...
- Android为TV端助力 双缓存机制
废话不多说,直接贴代码! 所谓的双缓存,第一就是缓存在内存里面,第二就是缓存在SD卡里面,当你需要加载数据时,先去内存缓存中查找,如果没有再去SD卡中查找,并且用户可以自选使用哪种缓存! 缓存内存和缓 ...
- Retrieve OpenGL Context from Qt 5.5 on OSX
In the latest Qt 5.5, the QOpenGLWidget is much better and has less bugs than the QGLWidget, but it ...