Layui的日期筛选

layui的日期筛选

跟基本的like查询其实差不多的
只是查询的数据是时间格式【交由后端处理】

首先是使用layUI的日期组件【负责选择日期】

<div class="demoTable">
     <div class="layui-inline">
        <input type="text" placeholder="日期筛选" class="layui-input" id="test1"                        style="width:250px;">
      </div>
    <div class="layui-btn" data-type="reload">搜索</div>
</div>
<script>
    layui.use('laydate', function(){
      var laydate = layui.laydate;
      //执行一个laydate实例
      laydate.render({
        elem: '#test1' //指定元素id
        ,type: 'datetime'
        ,range: true 
      });
    });
</script>

数据表格容器

<div >
   <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
</div>
<script>
                  layui.use('table', function () {
                    var table = layui.table;
                    //实现表格查询处所有接口中的数据
                    table.render({
                      elem: '#LAY_table_user'//绑定table表格
                      , url: "http://txxxxxxxs"//读取用户的接口
                      , cols: [[
                        // { checkbox: false, fixed: false }
                        , { field: 'id', title: 'ID',sort: true, fixed: true, hide: true }//hide:true 是否显示ID
                        , { field: 'wx', title: '微信号'}
                        , { field: 'shownum', title: '展示次数', sort: true,totalRow:true}
                        , { field: 'copy', title: '复制次数', sort: true ,totalRow:true}
                        , { field: 'created_at', title: '时间', }
                      ]]
                      , id: 'testReload'//给table取了个id  重载与其他验证时使用
                      , page: true//开启分页
                      , limit: 10//决定数据表格每一页加载多少用户展示出来
                      ,toolbar: '#toolbarDemo'
                      ,totalRow:true
                    });

                    // 用户搜索功能验证
                    var $ = layui.$, active = {
                      reload: function () {
                        var demoReload = $('#test1');//将id带进来赋值变量
                        //防止输入null值

                        //搜索后执行重载
                        table.reload('testReload', {
                          url: 'http://xxxxxs'//搜索的接口地址

                          , page: {
                            curr: 1 //重新从第 1 页开始
                          }
                          , where: {
                            //筛选条件 选定的是api中的id也就是按id进行查询
                            'time': demoReload.val()
                          }
                        }, 'data');
                      }
                    };
                    $('.demoTable .layui-btn').on('click', function () {
                      var type = $(this).data('type');
                      active[type] ? active[type].call(this) : '';
                    });
                  });
</script>

搜索后触发表格重载,会去带着日期去请求接口 返回数据也是layui格式

为您推荐