layui时间范围功能laydate后端ajax传值

layui表格数据通过时间范围筛选数据

源代码通过ajax动态请求的数据

layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#test'
    ,url:'/get_traffic'/*tpa=https://www.layui.site/test/table/demo1.json*/
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,id: 'testReload'   ****///次ID下面重新渲染时会调用****
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:160, align: "center", unresize: true,  hide:true}
      ,{field:'uuid', title:'uuid', width:160, align: "center", unresize: true, hide:true}
      ,{field:'name', title:'用户', width:120, align: "center"}
      ,{field:'date', title:'时间', width:220, align: "center"}
      ,{field:'downloadtotal', title:'下行Mb', width:220, align: "center", sort: true}
      ,{field:'uploadtotal', title:'上行Mb', width:220, align: "center", sort: true}
      ,{field:'machineid', title:'machineid', width:180, align: "center"}
    ]]
     ,page: true
     ,limit:10
    ,jump: function(obj){
      //模拟渲染
      document.getElementById('test').innerHTML = function(){
        var arr = []
        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
        layui.each(thisData, function(index, item){
          arr.push('<li>'+ item +'</li>');
        });
        return arr.join('');
      }();
    }
  });

如下就是时间范围功能，通过时间范围进行筛选数据

首先添加前端代码

<!-- 时间选择器-->
<form class="layui-form layui-col-space5" style="margin-top: 65px; margin-left: 203px; ">
    <div class="layui-inline layui-show-xs-block">
        <input class="layui-input"  autocomplete="off" placeholder="开始" name="startTime" id="startTime">
    </div>
    <div class="layui-inline layui-show-xs-block">
        <input class="layui-input"  autocomplete="off" placeholder="截止" name="endTime" id="endTime">
    </div>
    <div class="layui-inline layui-show-xs-block">
       <button class="layui-btn" lay-submit="" data-type="reload" lay-filter="demo2">搜索</button>
    </div>
</form>
<!-- 时间选择器 -->

添加时间窗口

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
    ,url:'/getdata'/*tpa=https://www.layui.site/test/table/demo1.json*/
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'senderStaffId', title:'用户ID', width:110, fixed: 'left', unresize: true, sort: true}
      ,{field:'senderNick', title:'用户名', width:120, edit: 'text'}
      ,{field:'content', title:'查询内容', width:240, edit: 'text'}
      ,{field:'status', title:'状态', width:100, edit: 'text'}
      ,{field:'date', title:'时间', width:180, edit: 'text', sort: true}
      ,{field:'msgresp', title:'返回内容', width:600}
    ]]
    ,page: true
    ,limit:10
	,jump: function(obj){
      //模拟渲染
      document.getElementById('test').innerHTML = function(){
        var arr = []
        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
        layui.each(thisData, function(index, item){
          arr.push('<li>'+ item +'</li>');
        });
        return arr.join('');
      }();
    }
  });
//}
  ****####时间窗口代码######****
  ****####时间窗口代码######****
  ****####时间窗口代码######****
  //时间窗口弹窗
  layui.use(['laydate','form'], function() {
   var form = layui.form;
   var laydate = layui.laydate;
   var layer = layui.layer;
   //执行一个laydate实例
   laydate.render({
       elem: '#startTime' //指定元素
   });
   //执行一个laydate实例
   laydate.render({
       elem: '#endTime' //指定元素
   });
   //获取数据并重新渲染
   form.on('submit(demo2)', function(data){
           var formData = data.field;
           var startTime = formData.startTime
           var endTime = formData.endTime
       table.reload('testReload',{    //testReloa
        url: '/traffic_time',
        method: 'get',
        page: {
            curr: 1
        },
        where: {
           start_time: startTime,
            end_time: endTime
        }
       },'data');
           return false
       });

    })
   ****####时间窗口代码######****
   ****####时间窗口代码######****
   ****####时间窗口代码######****

绑定搜索按钮并重新给表赋值