layui表格数据重载根据不同的条件点击事件怎么实现?
就是根据红色标记的条件来重载表格数据,还没有点击上面红色标记的条件默认是本周,这里可以加载出来,但点击其他的时候就没有数据出现了。需要重新加载框架才有数据显示。请问大神这问题如何解决?
默认的时候是显示本周数据,即还没任何点击事件情况:
点击本周或者其他按钮,表格数据不会重载,但确实是有数据从后台回传过来的
本周:
上周:
可是不会在表格上显示,需要重新加载框架才会有数据显示
代码:
<script>layui.use(['table','laydate'], function(){// 加载模块var $ = layui.jquery;var table = layui.table;var laydate = layui.laydate;var form = layui.form;// 选择日期laydate.render({elem: '#datetime',type: 'datetime',range: '~'});// 表格var ins1 = table.render({elem: '#statisticsTable',height: 'full-200',url: '/admin/statisticsajax', //数据接口page: true, //开启分页skin: 'line',even: false,cols: [[ //表头{field: 'order_num', title: '订单号', align: "center"},{field: 'order_time', title: '下单时间',align: "center"},{field: 'username', title: '公司名称', align: "center"},{field: 'total_price', title: '金额小计(元)', align: "center"}]],response: {statusName: 'code' //数据状态的字段名称,默认:code,statusCode: 200 //成功的状态码,默认:0,msgName: 'msg' //状态信息的字段名称,默认:msg,countName: 'total' //数据总数的字段名称,默认:count,dataName: 'data' //数据列表的字段名称,默认:data},});// console.log(data.id);return;// 搜索$(".card-btn-group .layui-btn").click(function(){// console.log(1);return;$(this).addClass("card-btn-active").siblings().removeClass("card-btn-active");table.reload("statisticsTable");})active1 = {reload1: function(){var this_week = 'this_week';//执行重载table.reload('statisticsTable', {page: {curr: 1 //重新从第 1 页开始},where: {type: this_week},});}};active2 = {reload2: function(){var last_week = 'last_week';//执行重载table.reload('statisticsTable', {page: {curr: 1 //重新从第 1 页开始},where: {type: last_week}});}};active3 = {reload3: function(){var this_month = 'this_month';//执行重载table.reload('statisticsTable', {page: {curr: 1 //重新从第 1 页开始},where: {type: this_month}});}};active4 = {reload4: function(){var last_month = 'last_month';//执行重载table.reload('statisticsTable', {page: {curr: 1 //重新从第 1 页开始},where: {type: last_month}});}};$(".card-btn-group .this-week").click(function(){var type = $(this).data('type');active1[type] ? active1[type].call(this) : '';})$(".card-btn-group .last-week").click(function(){var type = $(this).data('type');active2[type] ? active2[type].call(this) : '';})$(".card-btn-group .this-month").click(function(){var type = $(this).data('type');active3[type] ? active3[type].call(this) : '';})$(".card-btn-group .last-month").click(function(){var type = $(this).data('type');active4[type] ? active4[type].call(this) : '';})});</script>
layui表格数据重载根据不同的条件点击事件怎么实现?相关推荐
- layui表格数据重载(根据条件查询,监听按钮事件)
html代码 <div class="wrap-container clearfix"><div class="column-content-detai ...
- Layui表格数据重载(不请求servlet)
在做项目过程中,可能会有这样的需求,从一张表格勾选数据返回到另外一张表格显示,而通常实现这个功能有两种方式,一种是获取勾选数据的Id请求后台来返回数据,另外一种就是直接在页面获取,不需要请求后台.这里 ...
- layui根据条件显示列_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
- layui表格更改一列数据_【WEB前端开辟】layui表格数据变动的一种处理方式
表格数据更改,平常包括几个内容:新增.修正.删除.挪动,开辟中常常会面对的一个题目就是更改以后怎样将数据同步到节点上,一向以来个人的提议照样应用表格重载,不管是url情势的照样data情势的实际都是须 ...
- layui 表格内容写temple函数_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
- Layui表格数据值相加(一)
开发工具与关键技术: Visual Studio done回调 作者:黎凤焕 撰写时间:2019年 7 月 19 日 Layui表格列数据(金额数据列的数据自动相加)相加,将总金额赋值给input框, ...
- layui进行分页处理,后端返回数据没有count字段,需要单独获取再添加到数据中,再进行项渲染,另有layui表格数据增删改查前后端交互
整体效果图如下: (1)分页前端界面处理 (2)分页后端的数据处理 具体代码如下: 前端界面代码:包括分页,增删改查,刷新(搜索功能还没做,后端是java代码) <!DOCTYPE html&g ...
- Layui table数据重载实现
类似局部刷新数据,常用与搜索框的使用,刷新查找的数据 官方文档参考 运行效果参考: 数据表格的重载 HTML <div class="form-box"><div ...
- Layui表格数据的计算
在我们日常学习中以及项目的开发中,不少会用到数据表格将数据进行统计维护信息,而其中用的最多的并且也比较快捷方便的放法便是layui数据表格的渲染,重载等等.... 而部分项目有时会涉及到一个数量的问题 ...
最新文章
- MySQL - 索引下推 Index Condition Pushdown 初探
- 机器学习中的高斯过程简介-好文
- SpringBootController控制层接收参数的几种常用方式
- 库存管理系统软件测试,药房库存管理系统模块测试用例
- 1028 人口普查 (20 分)(c语言)
- 牛客2020年愚人节比赛
- CODEVS 1205 单词反转
- STM32H743+CubeMX-QSPI读写外部FLASH(W25Q128JVSQ)
- centos 安装mysql扩展_centos php安装mysql扩展的方法
- lua 获得系统时间
- 连接access时的REGDB_E_CLASSNOTREG(0x80040154)错误
- 24点游戏java代码 中国开源社区_编程之美 1.16 24点游戏
- 天下武功唯快不破--速度要快
- 一些大任务SQL的优化方案
- 暴躁兔让Web3与Crypto之路不再迷茫
- 武装突袭3多人服务器文件地图,武装突袭3地图文件夹 | 手游网游页游攻略大全...
- 自定义拖动条android,Android自定义滑动带(横条指示器)
- HashMap 如何解决 hash 冲突
- Html5、CSS3新特性
- 一个简单的网路测试bat脚本