layui框架,我想制作一个表格,请问有什么方式可以添加底部表格

Question

layui框架,我想制作一个表格,请问有什么方式可以添加底部表格的
js 心手,请码神们指点

这是需要制作的尾部

这是我目前做出来的表格

尾部做不出来求解!!

这是代码

<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">门诊挂号收费汇总表</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>门诊挂号收费汇总表</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            搜索：
            <select id="income-search-key">
                <option value="all">全部</option>
            </select>&emsp;
            <input class="layui-input search-input" id="income-edit-value" placeholder="输入关键字" type="text"/>&emsp;
            <button class="layui-btn icon-btn" id="income-btn-search"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>
    </div>
</div>

<!--表格-->
<table class="layui-hide" id="layui_table_id" lay-filter="dataTable"></table>

<script>

    layui.use('table', function () {
        var table = layui.table;

        table.render({
            id: "dataTable"
            , elem: '#layui_table_id'
            , skin: 'row' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
            , even: true //开启隔行背景
            , page: true
            , size: 'lg' //表格尺寸 lg(大) sm(小)
            // , url: '/'//路径
            , toolbar: true
            , title: '门诊挂号收费汇总表'
            , totalRow: true
            , cols: [[ //方法渲染表头，二维数组
                {field: 'title', colspan: 10}
            ],[
                {field: "sfr", title: "<p>/</p>", rowspan: 2, align: "center", totalRowText: '合计：'},
                {field: "gh", title: "挂号", colspan: 2, align: "center"},
                {field: "sf", title: "收费", colspan: 2, align: "center"},
                {
                    field: "hj", title: "合计", rowspan: 2, align: "center", totalRow: true, templet: function (d) {
                        return d.je1 + d.je2
                    }
                },
                {field: "qz", title: "其中", colspan: 10, align: "center"},
            ], [
                {field: "rc", title: "人次", rowspan: 1, align: "center", totalRow: true},
                {field: "je1", title: "金额", rowspan: 2, align: "center", totalRow: true},
                {field: "cs", title: "次数", rowspan: 1, align: "center", totalRow: true},
                {field: "je2", title: "金额", rowspan: 2, align: "center", totalRow: true},
                {field: "yl", title: "银联POS机", rowspan: 2, align: "center", totalRow: true},
                {field: "ybzf", title: "医保支付", rowspan: 2, align: "center", totalRow: true},
                {field: "ybzh", title: "医保账户", rowspan: 2, align: "center", totalRow: true},
                {field: "qtys", title: "其他应收", rowspan: 2, align: "center", totalRow: true},
            ]]

            , data: [{
                "sfr": "收费员1"
                , "rc": 2
                , "je1": 20
                , "cs": 2
                , "je2": 10
                , "yl": 30
                , "ybzf": 30
                , "ybzh": 30
                , "qtys": 30
            }, {
                "sfr": "收费员2"
                , "rc": 2
                , "je1": 20
                , "cs": 2
                , "je2": 10
                , "yl": 30
                , "ybzf": 30
                , "ybzh": 30
                , "qtys": 30
            }, {
                "sfr": "收费员3"
                , "rc": 2
                , "je1": 20
                , "cs": 2
                , "je2": 10
                , "yl": 30
                , "ybzf": 30
                , "ybzh": 30
                , "qtys": 30
            }, {
                "sfr": "收费员4"
                , "rc": 2
                , "je1": 20
                , "cs": 2
                , "je2": 10
                , "yl": 30
                , "ybzf": 30
                , "ybzh": 30
                , "qtys": 30
            }]

            // 表格背景
            , done: function (res) {
                //总体布局
                $('.layui-table td, .layui-table th').css({'font-size': '15px'});
                //标题
                $("th[data-field='title']").html("<div align='center' style='color:#666;font-weight:bold;letter-spacing:10px;font-size:20px'><span>门诊挂号收费汇总表</span></div>");
               
            }

            , response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.rows.item //解析数据列表
                };
            }
        });
    });
</script>

Answer 1

底部额外写