Javascript Jquery数据表切换问题-重复搜索栏

我有两个jquery数据表，根据复选框是否被选中，在它们之间切换。问题是，虽然表格显示得有些正确，但分页和搜索栏显示了两次

请注意两个搜索栏，一个在右上角，另一个在右下角：

代码如下：

<table id="LockerTable" class="table table-bordered table-hover">
    <thead>
        <tr>      
            <th>Locker Number</th>
            <th>Student Id</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
        <table id="AvailableLockerTable" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th> Locker Number</th>
                    <th> StudentId  </th>        
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    </div>

    @section scripts
{
        @Scripts.Render("~/bundles/jqueryval")
        <script>
            $(document).ready(function () {
                $("#AvailableLockerTable").hide();
                   var table = $("#AvailableLockerTable").DataTable({
                    ajax: {
                        url: "/api/lockers/availableLocker",
                        dataSrc: ""
                    },
                    columns: [
                        {
                            data: "LockerNumber"
                        }
                    ]
                });
                var table = $("#LockerTable").DataTable({
                    ajax: {
                        url: "/api/lockers",
                        dataSrc: ""
                           },
                    columns: [
                        {
                            data: "LockerNumber"
                        },
                        {
                            data: "StudentId"
                        }
                    ]
                });
            });
            $('#availableLocker').click(function () {
                if (!this.checked)
                    $("#AvailableLockerTable").hide(),
                $('#LockerTable').show();        
               else    
              $("#AvailableLockerTable").show(),           
                $('#LockerTable').hide();                 
            });
        </script>

    }

---

您需要使用datatable的包装类。这样做

$('#availableLocker').click(function () {
    if (!this.checked){
        $("#AvailableLockerTable_wrapper").hide();
        $('#LockerTable_wrapper').show(); 
    }
    else{
        $("#AvailableLockerTable_wrapper").show();           
        $('#LockerTable_wrapper').hide();
    }
});