Tab数据表显示两个表

Question

我已经实现了2个tab数据表。但是，当页面第一次加载时，它将显示两个数据表。

我似乎无法找到解决方案。请帮忙。

以下是我的代码片段并附上图片。

    <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();
    });
});

如图中所示，显示2个选项卡，但同时显示数据表。选择选项卡后，只有1个表格显示。这只是在页面首次加载时发生。