JSP中 layui 弹出层中显示table 表格


1、先引入对应的layui.js  、 layui.css

2、body中 定义 以下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 ''+(row.price * 1024.0 / row.flow).toFixed(2)+'元每G';
                            }
                        }]
                    ],
                    done: function(count){
                        $("table").css("width", "100%");//宽度
                        high = high + count * 40;//一条数据的高度是40
                        layer.open({
                            type: 1,
                            title: '详情:',
                            area: ['600px', high+'px'], //宽高
                            content: $('#displayBox')
                        });
                    }
                });
            });
        };

JSP