Issue with Jquery DataTable toggling - duplicate search bars

Question

I have two jquery DataTables that I toggle between depending on if a checkbox is checked. The problem is that While the tables display (somewhat) properly the pagination and search bars show up twice.

Notice The two search bars one on top right and one on bottom right:

Here is the code:

<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>

    }

Answer 1

You need to use wrapper class of datatable. Do in this way

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