1 引用js和css

2在slayui.use(['laydate', 'form', 'table', 'laypage'], //需要使用哪個模組就宣告哪 function () {

var laydate = layui.laydate;   // 時間
            var table = layui.table;    //表格
            var form = layui.form;  //表單
            var laypage = layui.laypage; //分頁
            //執行一個laydate例項
            laydate.render({
                elem: 
 
'#start' //指定元素
            });

            //執行一個laydate例項
            laydate.render({
                elem: '#end' //指定元素
            });var url ="xxxxxx.xxxx.xxx";
            var tableName = table.render({
                elem: '#demo',   //table的id
                url: url,
                page: true
 
,  //開啟分頁
                request: {
                    pageName: 'pageIndex' //頁碼的引數名稱，預設：page，更改之後為pageIndex，在請求時會自動帶過去
                    , limitName: 'pageSize' //每頁資料量的引數名，預設：limit，更改之後為pageSize

                },
                parseData: function (res) {  //與後端資料互動，需要傳固定格式，轉換為下面所示
                    
 
return {
                        "code": 0, //資料狀態
                        "msg": "",  //狀態資訊
                        "count": res.Data.Count, //資料總數
                        "data": res.Data.Dtos, //後端的詳細資料
                    }
                },
                cols: [//表頭 
                    [{ field: 'column1', title: '列1', align: 'center', width: 240 },
                    { field: 'column2', title: '列2', align: 'center' },
                    { field: 'column3', title: '列3', align: 'center' },
                    ]],
                loading: true, //資料載入中。。。
                id: 'idTest',
            });

            //搜尋   按鈕在form表單中 樣式class="layui-btn"  lay-submit lay-filter="search" 
            //form內的按鈕總會自動提交，將其設定為button，不會自動提交
            // button 按鈕的type有三個屬性：button，submit，reset，button預設是submit，所以沒有指定type型別情況下，點選button會觸發form表單
           //按鈕需要加上lay-submit屬性，layut的form.on的表單提交監聽不到這個按鈕，那麼return false對提交的制止也就失效了

            form.on('submit(search)',
                function (data) {
                    var param1= $("#start").val();
                    var param2= $("#end").val();var url =  "xxxxxxx?param1=" + param + "&param2=" + param2 ; //第一種方法
                    tableName.reload({
                        url: url
                        ,request: {
                            pageName: 'pageIndex' //頁碼的引數名稱，預設：page
                            , limitName: 'pageSize' //每頁資料量的引數名，預設：limit

                        }
                        ,where: { //設定非同步資料介面的額外引數，任意設 第二種方法傳參
                            parameter1: param1,
                            parameter2: param2,
                        }
                        , page: {
                            curr: 1 //重新從第 1 頁開始
                        }
                    });
                    return false;   //表單按鈕的js回撥函式新增retrun false制止
                });

             //<button  id="reloadbtn" > jquery 寫法
            //$('#reloadbtn').click(function () {
                //裡面寫法和上面一樣
            //});

        });