无法在ajax调用的单独的DataTable脚本上重新初始化Jquery DataTable

Question

我有一个名为main_yladmin.php的主页，我的ajax菜单驻留在这里。这是它的菜单代码：

<!--Start Container-->
<div id="main" class="container-fluid">
    <div class="row">
        <div id="sidebar-left" class="col-xs-2 col-sm-2">
            <ul class="nav main-menu" id="myTab">
                <li>
                    <a href="ajax/dashboard.html" class="active ajax-link">
                        <i class="fa fa-dashboard"></i>
                        <span class="hidden-xs">Dashboard</span>
                    </a>
                </li>                
                <li>
                    <a href="ajax/yl_dailysales.php" class="ajax-link">
                        <i class="fa fa-money"></i>
                        <span class="hidden-xs">YL Daily Sales</span>
                    </a>
                </li>
                <li>
                    <a href="ajax/yl_inventory.php" class="ajax-link">
                        <i class="fa fa-barcode"></i>
                        <span class="hidden-xs">Inventory</span>
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle">
                        <i class="fa fa-clipboard"></i>
                         <span class="hidden-xs">Reports</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Second level menu</a></li>
                        <li><a href="#">Second level menu</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--Start Content-->
        <div id="content" class="col-xs-12 col-sm-10">
            <div class="preloader">
                <img src="img/devoops_getdata.gif" class="devoops-getdata" alt="preloader"/>
            </div>
            <div id="ajax-content"></div>
        </div>
        <!--End Content-->
    </div>
</div>
<!--End Container-->

我有一个DataTable在yl_inventory.php和yl_dailysales.php。它们唯一的区别是从查询中填充在它们上的数据，所有的数据都是相同的(表类、id等等)。

<table class="table table-bordered table-striped table-hover table-heading table-datatable" id="datatable-3">

但是yl_dailysales.php并没有显示在容器上，而是生成了以下错误：

DataTables警告(表id = ' DataTable -3')：无法重新初始化DataTable。 若要检索此表的DataTables对象，请不传递参数或查看bRetrieve和bDestroy的文档。

为什么当DataTables处于单独的脚本中时会发生这种情况？这实际上是在处理另一个主页main_sysadmin.php，其中我还调用了几个具有相同表类的脚本。

我已经试过"bDestroy" : "true"，"bRetrieve":"true"和.fnDestroy();了，但都没有用。

这是我的jquery：

function TestTable3(){
    $('#datatable-3').dataTable( {
        "sScrollX": "auto",
        "aaSorting": [[ 0, "asc" ]],
        "sDom": "T<'box-content'<'col-sm-6'f><'col-sm-6 text-right'l><'clearfix'>>rt<'box-content'<'col-sm-6'i><'col-sm-6 text-right'p><'clearfix'>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sSearch": "",
            "sLengthMenu": '_MENU_'
        },
        "oTableTools": {
            "sSwfPath": "plugins/datatables/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy",
                "print",
                {
                    "sExtends":    "collection",
                    "sButtonText": 'Save <span class="caret" />',
                    "aButtons":    [ "csv", "xls", "pdf" ]
                }
            ]
        }
    });
}

Answer 1

在重新初始化表之前清除它

$("#datatable-3").oTable.api().clear().draw();

或

$('#datatable-3').dataTable().fnDestroy();