layui中的table —— 加合计功能后高度那些事

（一）表格需高度固定且合计行紧跟上一数据行

表格设置了固定高度且开启了合计功能后，如果表格的数据只有两条，那么合计行与上一数据行之间可能会有很大的间距，这时表格如果有自定义样式可能会很丑，如下图：

下面是我采用的解决办法：

1、首先要有一个有高度的容器

<style>
	.container{
		height:90%;
	}
</style>
<div class="container"> 
	<table class="layui-hide" id="test" lay-filter="test"</table>
	<div id="test_page" lay-filter="test_page"></div>
</div>

2、初次渲染表格时不要开启合计功能，高度也不要设置，数据请求回来表格重载后再开启合计功能，然后再判断是否需要给表格设置高度

<script>
    layui.use(['table', 'laypage', 'layer'], function () {
        var layer = layui.layer,
        table = layui.table,
        laypage = layui.laypage;
        //初始化表格（不设置高度）
	    table.render({
	        elem: $("#test"),
	        id: "test",
	        data: [],
	        cols: [[
		        { type: 'numbers', title: '序号', width: 80, align: "center", fixed:"left", totalRowText: '合计'},  
		        { field: 'spmc', width: 100, title: '商品名称', align: "center" },
		        { field: 'dj', width: 100, title: '单价', align: "center" }
		    ]],
	        done:function(){
	            getData(1, 10);
	        }
    	});
    	//向后台请求数据
    	function getData(pnum, pcount) {
    		$.ajax({
		        type: "GET",
		        url: "url?pnum=" + pnum + "&pcount=" + pcount,
		        cache: false,
		        success: function (res) {
		            if (res.success) {
                		table.reload("test", {
		                    data: res.datalist,
		                    limit: res.datalist.length,
		                    totalRow: true,
		                    done:function(res,curr,count){}
		                })
	                	//如果表格的高度大于你想设的固定高度值（容器的高度减去分页组件的高度）时重新渲染表格，只需设置高度
	                	if($("div[layid=test]").height()>$(".container").height()-60){
		                    table.reload("test", {
		                        height:$(".container").height()-60
		                    })
		                }
		                //分页  
		                laypage.render({
		                    elem: $("#test_page"),
		                    count: res.total,
		                    layout: ['prev', 'page', 'next', 'count', 'limit'],
		                    curr: pnum,
		                    limit: pcount,
		                    jump: function (obj, first) {
		                        //首次不执行
		                        if (!first) {
		                            getData(obj.curr, obj.limit);
		                        }
		                    }
		                });
               		}
               	}
		    });
    	}          	  
	});
</script>

最后结果：