Javascript 选项卡datatable显示两个表

我已经实现了2个选项卡datatable。但是，当页面首次加载时，它将显示两个数据表

我似乎找不到解决办法。请帮忙

下面是我的代码片段，并附上一张图片

    <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#example1-tab1"
        aria-controls="example1-tab1" role="tab" data-toggle="tab">Pending
            Approval</a></li>
    <li role="presentation"><a href="#example1-tab2"
        aria-controls="example1-tab2" role="tab" data-toggle="tab">Approved</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active"
        id="example1-tab1">

        <div class="row">
            <div class="col-md-6">
                <h3>Pending Approval</h3>

            </div>
        </div>

        <div class="table-responsive">
            <table id="pendingOffTable"
                class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Leave Type</th>
                        <th>Remarks</th>
                        <th>Status</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-th-each="off : ${pendingOffList}">
                        <td data-th-text="${off.user.name}">...</td>
                        <td data-th-text="${off.startDate}">...</td>
                        <td data-th-text="${off.endDate}">...</td>
                        <td data-th-text="${off.leaveType}">...</td>
                        <td data-th-text="${off.remarks}">...</td>
                        <td data-th-text="${off.status}">...</td>
                        <td><input hidden="hidden" name="offId" th:value="${off.id}" />
                            <button th:id="${off.id}"
                                class="btn btn-success btn-xs approve-off" type="submit"
                                value="approve">
                                <span class="fa fa-check-square-o"></span> Approve
                            </button>
                            <button th:id="${off.id}"
                                class="btn btn-danger btn-xs reject-off" type="submit"
                                value="reject">
                                <span class="fa fa-times"></span> Reject
                            </button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div role="tabpanel" class="tab-pane fade in active"
        id="example1-tab2">

        <div class="row">
            <div class="col-md-6">
                <h3>Approved</h3>

            </div>
        </div>

        <div class="table-responsive">
            <table id="approvedOffTable"
                class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Leave Type</th>
                        <th>Remarks</th>
                        <th>Status</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-th-each="off : ${approvedOffList}">
                        <td data-th-text="${off.user.name}">...</td>
                        <td data-th-text="${off.startDate}">...</td>
                        <td data-th-text="${off.endDate}">...</td>
                        <td data-th-text="${off.leaveType}">...</td>
                        <td data-th-text="${off.remarks}">...</td>
                        <td data-th-text="${off.status}">...</td>
                        <td><input hidden="hidden" name="offId" th:value="${off.id}" />
                            <button th:id="${off.id}"
                                class="btn btn-danger btn-xs delete-ocoff" type="submit"
                                value="delete">
                                <span class="fa fa-times"></span> Delete
                            </button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

待批准
名称
开始日期
结束日期
休假类型
评论
地位
活动
...
...
...
...
...
...
批准
拒绝
经核准的
名称
开始日期
结束日期
休假类型
评论
地位
活动
...
...
...
...
...
...
删除

Javascript

<script type="text/javascript">
$(document).ready(function() {
    $('table.table').DataTable();
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
    });
});

$（文档）.ready（函数（）{
$（'table.table'）.DataTable（）；
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
$（$.fn.dataTable.tables（true））.dataTable（）.columns.adjust（）；
});
});

如图所示，显示两个选项卡，但同时显示datatable。选择选项卡后，仅显示1个表。这仅在页面首次加载时发生。

---

我看到两个表都使用了html，请删除已批准表的活动类OMG非常感谢。谢谢。这里也一样，lol我看到在这两个表格html中都使用了，删除你批准的表格的活动类OMG非常感谢。谢谢。我也是，哈哈