Layui数据表格/搜索重加载/分条件操作/工具条监听

<div class="layui-layout layui-layout-admin" style="padding-left: 20px;">
    <div class="layui-row" style="margin-top: 20px;">
    
        //搜索开始
        <form class="layui-form" action="" onsubmit="return false;" >
            <div class="demoTable">
                <div class="layui-form-item">

                    <div class="layui-input-inline">
                        <input type="number" id="merchant_id" name="merchant_id" placeholder="商铺ID" autocomplete="off" class="layui-input">
                    </div>

                    <div class="layui-input-inline">
                        <select name="status" id="status" lay-verify="">
                            <option value=-1>审核状态</option>
                            <option value=1>已同意</option>
                            <option value=2>已拒绝</option>
                        </select>
                    </div>

                    <div class="layui-col-xs1 search_text">
                        <button class="layui-btn" data-type="reload"><i class="layui-icon">&#xe615;查询</i></button>
                    </div>
                    //搜索结束，点击查询使用reload重加载表格
                    
                </div>
            </div>
        </form>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_filter"></table>
</div>

<script>
    layui.use(['table', 'form', 'element','layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;

        //渲染表格数据
        table.render({
            elem: '#table_list',
            url: '/withdrawal/checklogtable',
            cols: [[
                {field: 'id', title: '编号', sort: true},
                {title: '申请商铺名(ID)',templet:function (d) {
                        return d.merchant_name+'('+d.merchant_id+')';
                    }},
                {field: 'balance', title: '账户余额'},
                {field: 'already_withdraw', title: '账户已提现金额'},
                {field: 'amount', title: '本次申请提现金额'},
                {field: 'name',title: '提现名'},
                {field: 'bank',title: '提现银行'},
                {field: 'bank_card', title: '提现卡号'},
                {field: 'status',title: '审核结果'},
                {title: '审核管理员',templet:function (d) {
                        return d.admin_name+'('+d.admin_id+')'
                    }},
                {field: 'update_time' ,title: '审核时间'},
                {title: '操作',200,templet:function (d) {
                        var button;
                        var earndetail = '<a class="layui-btn layui-btn-xs" lay-event="earndetail">查看收益明细</a>';
                        var transfer= '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="transfer">打款</a>';
                        var reason= '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reason">拒绝理由</a>';
                        if(d.status==="已同意") {
                            button = earndetail+transfer;
                        }else{
                            button = earndetail+reason;
                        }
                        return button;
                    }}
            ]]
            , id: 'listReload'
            , page: true
            , limit: 10
            , height: "full-130"
        });

        //根据搜索条件重加载表格
        var $ = layui.$, active = {
            reload: function () {
                table.reload('listReload', {
                    where: {
                        merchant_id : $('#merchant_id').val(),
                        status : $('#status').val()
                    }
                });
            }
        };

        //监听工具条(操作中的lay-event属性)
        table.on('tool(table_filter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'earndetail') {
                x_admin_show('收益详情', "/withdrawal/earndetaillist?merchant_id=" + data.merchant_id,1500,800)
            }else if (obj.event === 'transfer') {
                layer.prompt({
                    formType: 1,
                    value: '',
                    title: '请手动打款并输入管理员密码确认',
                }, function(value, index, elem){
                    var formData = new FormData();
                    formData.append("id",obj.data.id);
                    formData.append("admin_password",value);
                    $.ajax(
                        {
                            type:'post',
                            url: "/withdrawal/transfer",
                            data: formData,
                            contentType: false,
                            cache:false,
                            processData : false,
                            beforeSend: function () {
                            },
                            success: function(returndata){
                                if(returndata.code==200)
                                    layer.alert(returndata.msg, {icon: 6},function (thiswindow) {
                                        location.reload();
                                        layer.close(thiswindow);
                                    });
                                else
                                    layer.alert(returndata.msg, {icon: 5},function (thiswindow) {
                                        layer.close(thiswindow);
                                    });
                            },
                            error: function () {
                                layer.alert('请求错误.请稍后再试', {icon: 5},function (thiswindow) {
                                    layer.close(thiswindow);
                                });
                            }
                        }
                    )
                });
            }else if (obj.event === 'reason') {
                layer.alert(obj.data.refuse_reason);
            } else{
                layer.msg('操作不存在');
            }
        });

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>

效果图：

 ------------------------------------------------------------------------------------------------------------------------

<form class="layui-form" action="" onsubmit="return false;" >
      <div class="demoTable">
        搜索电话：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
          <div class="layui-input-inline" style="  80px;">
           
                        <select name="sex" id="sex" >
                            <option value="" selected>性别</option>
                            <option value="1">男</option>
                            <option value="0">女</option>
                        </select>
         </div>
          
           <div class="layui-input-inline" style="  140px;">
           
                        <select name="marital_status" id="marital_status" >
                            <option value="" selected>婚姻状况</option>
                            <option value="未婚">未婚</option>
                            <option value="离异">离异</option>
                            <option value="丧偶">丧偶</option>
                        </select>
         </div>
          
           <div class="layui-input-inline" style="  140px;">
           
                        <select name="is_children" id="is_children" >
                            <option value="" selected>有无子女</option>
                            <option value="1">有</option>
                            <option value="0">无</option>
                        </select>
         </div>
          
           <div class="layui-input-inline" style="  140px;">
           
                        <select name="car_type" id="car_type" >
                            <option value="" selected>购车情况</option>
                            <option value="1">有</option>
                            <option value="0">无</option>
                        </select>
         </div>
        
  <button class="layui-btn" data-type="reload">搜索</button>
</div>
          </form>

   var active = {
        reload: function(){
            var demoReload = $('#demoReload');
            var sex = $('#sex');
            var marital_status = $('#marital_status');
            var car_type = $('#car_type');
            var is_children = $('#is_children');
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                        name: demoReload.val(),
                    sex: sex.val(),
                    marital_status: marital_status.val(),
                    car_type: car_type.val(),
                    is_children: is_children.val(),
                }
            }, 'data');
        }
    };

php 后台接收参数

  public function json_list()
    {

        //读取json文件
       $path = EXTEND_PATH."demo1.json";
       $data = json_decode(file_get_contents($path),true);


        $size = $this->request->param( 'size', 3 );
        $name = $this->request->param( 'name' );
        $page =  $this->request->param( 'page', 3 );
//        sex: sex.val(),
//                    marital_status: marital_status.val(),
//                    car_type: car_type.val(),
//                    is_children: is_children.val(),

        $sex = $this->request->param( 'sex');
        $marital_status = $this->request->param( 'marital_status');
        $car_type = $this->request->param( 'car_type');
        $is_children = $this->request->param( 'is_children');
        $where = [];

        if($name != "" ){
            $where['order_osn']= ['like',$name];
        }
        if($sex != "" ){
            $where['sex']= ['like',$sex];
        }
        if($marital_status != "" ){
            $where['marital_status']= ['like',$marital_status];
        }
        if($car_type != "" ){
            $where['car_type']= ['like',$car_type];
        }
        if($is_children != "" ){
            $where['is_children']= ['like',$is_children];
        }

        //dump($where);die;
        $count =Db::name('ht_users')->count();
        $res = Db::name('ht_users')
            ->where(new Where($where))
            ->order('id desc')
            ->paginate($size,false,['page'=> $page,'query'=>request()->param()])->toArray();
//dump(Db::name('ht_users')->getLastSql());die;
       return json(['code'=>0,'msg'=>'成功',"count"=>$count,'data'=>$res]);
//        return $this->fetch('index');
    }