Jquery DataTable切换问题 - 重复搜索栏

Question

我有两个jquery DataTables，我根据是否选中了复选框进行切换。问题是，当表格显示（有些）时，分页和搜索栏会显示两次。

注意两个搜索栏位于右上角，一个位于右下角：

以下是代码：

<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

您需要使用数据表的包装类。这样做

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