layui 切换卡和table渲染

<div class="layui-tab layui-tab-brief" lay-filter="test1">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>订单结算</legend>
                        </fieldset>
                        <ul class="layui-tab-title">
                            <li class="layui-this">结算信息</li>
                            <li>未结算订单</li>
                            <li>已结算订单</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table class="layui-table" id="jsxx" lay-filter="jsxx"></table>
                            </div>
                            <div class="layui-tab-item">
                                <table class="layui-table" id="lists" lay-filter="lists"></table>
                            </div>
                            <div class="layui-tab-item">
                                <table class="layui-table" id="yjsd" lay-filter="yjsd"></table>
                            </div>
                        </div>
                    </div>
                </div>

<script>
    layui.use(['table', 'form', 'jquery', 'element'], function () {
        var table = layui.table, form = layui.form, $ = layui.jquery, element = layui.element;
        var tableIn = table.render({
            id: 'user0',
            elem: '#jsxx',
            url: '{:url("settlements")}',
            method: 'post',
            page: true,
            cols: [[
                { field: 'settlementNo', title: '结算单号', width: 150 },
                { field: 'settlementType', title: '类型', width: 100 },
                { field: 'settlementMoney', title: '结算金额', width: 160 },
                { field: 'backMoney', title: '返还金额', width: 120 },
                { field: 'createTime', title: '创建时间', width: 120 },
                { field: 'settlementStatus', title: '结算状态', width: 120 },
                { field: 'settlementTime', title: '结算时间', width: 120 },
                { field: 'remarks', title: '备注', width: 200 },
            ]],
            limit: 10 //每页默认显示的数量
        });
        var tableIn = table.render({
            id: 'user1',
            elem: '#lists',
            url: '{:url("")}',
            method: 'post',
            // toolbar: '#topBtn',
            page: true,
            cols: [[
                { field: 'order_sn', title: '订单单号', width: 150 },
                { field: 'add_time', title: '下单时间', width: 200 },
                { field: 'pay_type', title: '支付方式', width: 160 },
                { field: 'freight', title: '运费', width: 120 },
                { field: 'money', title: '实付金额', width: 120 },
                , { width: 160, align: 'center', toolbar: '#action', title: '操作' }
            ]],
            limit: 10 //每页默认显示的数量
        });
        var tableIn= table.render({
            id: 'user2',
            elem: '#yjsd',
            url: '{:url("jsOrder")}',
            method: 'post',
            // toolbar: '#topBtn',
            page: true,
            cols: [[
                { field: 'order_sn', title: '订单单号', width: 150 },
                { field: 'add_time', title: '下单时间', width: 200 },
                { field: 'pay_type', title: '支付方式', width: 160 },
                { field: 'freight', title: '运费', width: 120 },
                { field: 'money', title: '实付金额', width: 120 },
                { field: 'settlementNo', title: '结算单号', width: 120 },
                { field: 'settlementTime', title: '结算时间', width: 120 },
            ]],
            limit: 10 //每页默认显示的数量
        });
        //搜索
        $('#search').on('click', function () {
            var key = $('#key').val();
            if ($.trim(key) === '') {
                layer.msg('{:lang("pleaseEnter")}关键字！', { icon: 0 });
                return;
            }
            tableIn.reload({ page: { page: 1 }, where: { key: key } });
        });
        table.on('tool(lists)', function (obj) {
            var data = obj.data;
            if (obj.event === 'sendOrder') {
                $.post("{:url('setOrderjs')}", { id: data.id }, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, { time: 1000, icon: 1 }, function () {
                            obj.del();
                        });
                    } else {
                        layer.msg(res.msg, { time: 1000, icon: 2 });
                    }

                });

            }
        });
        //触发事件
        element.on('tab(test1)', function (data) {           
            table.reload("user"+data.index);
        });

    });
</script>