layui搜索重载表格

js部分
 layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
方法渲染表格开始///
        table.render({
            elem: '#tableId',
            url: '/product/list',  (此处的url用于自动渲染和重载)
            page: true,
            even: true,
            toolbar: true,
            //注意(重点)
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code":'0', //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count":res.total, //解析数据长度
                    "data": res.data //解析数据列表
                }
            }
            ,id: 'testReload',
            cols: [[
                {type: 'checkbox'},
                {field: 'pro_id', title: 'ID', width: 80, sort: true,align: 'center'},
                {field: 'pro_name', title: '商品名称', width: 350},
                {field: 'pro_num', title: '销售量', width: 100,sort: true,align:'center'},
                {field: 'pro_price', title: '价格', width: 100,sort: true,align:'center'},
                {field: 'cate_id', title: '类型', width: 80,align:'center'},
                {field: 'pro_ctime', title: '添加时间', width: 200},
                // {field: 'pro_status', title: '状态', width: 80, templet: '#statusTpl',align:'center'},
                {field: 'pro_status', title: '状态', width: 130,templet: function(d){  //自定义显示内容(模板)
                        var timeDate = d.pro_utime;
                        var Time = new Date(timeDate);
                        var timestemp = Time.getTime();//数据库中的上架时间
                        var timestamps = Date.parse(new Date());
                        timestamps = timestamps / 1000;
                    if ((timestemp/1000) < timestamps  ){
                        var strCheck = d.pro_status == "1" ? "checked" : "";
                        return '<input type="checkbox" name="status" lay-filter="status" lay-skin="switch" lay-text="上架|下架" ' +strCheck+ ' pro_id='+d.pro_id+'>';
                    }else {
                        var strCheck ="";
                        return '<input type="checkbox" name="status" lay-filter="status" lay-skin="switch" lay-text="上架|下架" ' +strCheck+ ' pro_id='+d.pro_id+'>';
                    }

                    }
                    },
                {title: '操作', width: 250, toolbar: '#barDemo', align: 'center'}
            ]],
            done: function (res, curr, count) {
                $("#countNum").text(count);
            }
        });
/搜索(数据的重载)///
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                            pro_id: demoReload.val()
                    }
                });

            }
        };

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

html部分

<div class="demoTable">
    搜索ID:
    <div class="layui-inline">
        <input class="layui-input" name="pro_id" id="demoReload" autocomplete="off" />
    </div>
    <button  type="button" class="layui-btn" data-type="reload">搜索</button>
</div>

php后台:

/**
 * 获取商品信息
 */
public function list(Request $request){
    //$limit获取每页数量
    $limit=$request->get('limit');//前端Layui 传过来分页标准
   //前端Layui 传过来分页标准
    if ( $pro_id=$request->get('pro_id')){
        //获取查询分类数据
        $pro = Product::where('pro_id',$pro_id)->orderby('pro_id','desc')->paginate($limit);
    }else{
        //获取所有分类数据
        $pro = Product::orderby('pro_id','desc')->paginate($limit);
    }

    return $pro;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值