JSP中 layui 彈出層中顯示table 表格

1、先引入對應的layui.js  、 layui.css

2、body中 定義 以下DIV  注意 要隱藏，不然查詢后 會將表格再次顯示上層界面中

　　<div class="boxCon" id="displayBox" style="display:none">
       　　<table id="displayBoxTable" lay-filter="displayBoxTable" align="center"></table>

　　</div>

3、注意：先加載table，再去彈出界面，否則 第一次查詢 會不顯示數據

　　 var table2;
        function queryInfo(id){
            layui.use(['table'], function() {
                table2 = layui.table;
                var high = 150; //表頭高度
                table2.render({
                    elem: '#displayBoxTable',
                    id: 'displayPoolBoxTable',//生成layui table 的標識id，必須提供，用於后文刷新操作，
                    method: 'post', //接口http請求類型，默認：get
                    url:'${ctx}/queryInfo', //?page=1&limit=10（該參數可通過 request 自定義）
                    where:{id:id},
                    page: true, //是否分頁
                    limit: 10, //每頁顯示的條數
                    limits: [10, 20, 30], //每頁條數的選擇項，默認：[10,20,30,40,50,60,70,80,90]。
                    smartReloadModel:true,
                    cols: [
                        [{
                            title: 'id',
                            field: 'id',
                            align : 'center',
                            valign : 'middle',
                            width:100
                        },{
                            title: '名稱',
                            field: 'name',
                            align : 'center',
                            valign : 'middle',
                            width:100
                        },{
                            title: '單價',
                            field: 'price',
                            align : 'center',
                            valign : 'middle',
                            width:100,
                            templet:function(row){
                                return '<span>'+(row.price * 1024.0 / row.flow).toFixed(2)+'元每G</span>';
                            }
                        }]
                    ],
                    done: function(count){
                        $("table").css("width", "100%");//寬度
                        high = high + count * 40;//一條數據的高度是40
                        layer.open({
                            type: 1,
                            title: '詳情：',
                            area: ['600px', high+'px'], //寬高
                            content: $('#displayBox')
                        });
                    }
                });
            });
        };