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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章