layui表格数据重载根据不同的条件点击事件怎么实现？

最新推荐文章于 2022-11-16 15:33:56 发布

原创最新推荐文章于 2022-11-16 15:33:56 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文探讨了在使用layui框架时遇到的表格数据重载问题。当用户选择不同的时间范围如本周、上周等，虽然后台返回了数据，但表格未能正确更新显示。文章详细展示了代码实现，并寻求解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

就是根据红色标记的条件来重载表格数据，还没有点击上面红色标记的条件默认是本周，这里可以加载出来，但点击其他的时候就没有数据出现了。需要重新加载框架才有数据显示。请问大神这问题如何解决？

默认的时候是显示本周数据，即还没任何点击事件情况：

点击本周或者其他按钮，表格数据不会重载，但确实是有数据从后台回传过来的

本周：

上周：

可是不会在表格上显示，需要重新加载框架才会有数据显示

代码：

<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>