Javascript 显示重复分页和搜索控件的数据表

我在另一个页面上使用第二个DataTables对象时遇到问题。我已经成功创建了一个DataTable，它位于我的Web应用程序中的一个页面上。这一切看起来都很好，功能正常。然而，我随后复制了准确的代码并将其粘贴到第二个页面上，尽管我的DataTable填充正确，但我得到了分页和搜索控件的第二个实例（如下所示）。我读过一些关于销毁表的信息，因为可以检测到第二个实例，但我甚至尝试关闭我创建的第一个DataTable，这似乎并不重要

加载我的数据表是通过$（document）.ready调用在两个页面上完成的，尽管我不确定这是否正确，因为我想在同一页面上加载不同的数据表，但在不同的选项卡控件中

我的代码如下所示：

<script type="text/javascript" language="javascript" >
    $(document).ready(function() {      
        var siteTickets = $('#ticketsTable').DataTable( {
            "bProcessing": true,
            "bServerSide": false,
            "bDestroy": true,
            "ajax":{
                url :"framework/get_tickets_by_site.php"
            },
            aoColumns: [
                        { mData: 'id', sClass: "dt-body-center" },
                        { mData: 'summary',
                            "render" : function(data, type, row, meta){
                                   return $('<a>')
                                      .attr('href', data)
                                      .text(data)
                                      .wrap('<div></div>')
                                      .parent()
                                      .html();
                            }
                        },
                        { mData: 'c_location', sClass: "dt-body-center",
                            "render" : function(data, type, row, meta){
                                       return $('<a>')
                                          .attr('href', data)
                                          .text(data)
                                          .wrap('<div></div>')
                                          .parent()
                                          .html();
                                }
                         },
                        { mData: 'priority', sClass: "dt-body-center" },
                        { mData: 'first_name', sClass: "dt-body-center" },
                        { mData: 'created_at' },
                        { mData: 'due_at' },
                        { mData: 'status', sClass: "dt-body-center" },
                        { mData: 'last_updated' }
                ],
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {           
                switch( aData["priority"] ) {
                    case "1":
                        $("td:eq(3)", nRow).text( "High" );
                        break;
                    case "2":
                        $("td:eq(3)", nRow).text( "Medium" );
                        break;
                    case "3":
                        $("td:eq(3)", nRow).text( "Low" );
                        break;
                    default:
                        break;
                }       
                return nRow;
            },
            "order": [[0, 'asc']],
            "lengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]]
        } );

    } );
</script>

$（文档）.ready（函数（）{
var siteTickets=$（'#ticketsTable'）。数据表（{
“bProcessing”：正确，
“bServerSide”：false，
是的，
“ajax”：{
url:“framework/get_tickets_by_site.php”
},
AO列：[
{mData:'id'，sClass:'dt body center}，
{mData:'摘要'，
“呈现”：函数（数据、类型、行、元）{
返回$（''）
.attr（'href'，数据）
.文本（数据）
.wrap（“”）
.parent（）
.html（）；
}
},
{mData:'c_location'，sClass:'dt body center'，
“呈现”：函数（数据、类型、行、元）{
返回$（''）
.attr（'href'，数据）
.文本（数据）
.wrap（“”）
.parent（）
.html（）；
}
},
{mData:'priority'，sClass:'dt body center}，
{mData:'first_name'，sClass:'dt body center'}，
{mData:'在'}创建}，
{mData:'到期日'}，
{mData:'status'，sClass:'dt body center}，
{mData:'上次更新'}
],
“fnRowCallback”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
开关（aData[“优先级”]）{
案例“1”：
$（“td:eq（3）”，nRow）。文本（“高”）；
打破
案例“2”：
$（“td:eq（3）”，nRow）。文本（“中”）；
打破
案例“3”：
$（“td:eq（3）”，nRow）。文本（“低”）；
打破
违约：
打破
}       
返回nRow；
},
“订单”：[[0，'asc']]，
“长度菜单”：[[20,50,100，-1]，[20,50,100，“全部”]]
} );
} );

我也尝试过使用

DataTables.Destroy（）

命令，但似乎没有任何效果

---

任何帮助都将不胜感激。谢谢。

数据表实例化中有一个小错误。实例化DataTables的正确方法是使用小写的

选择器。dataTable

如下所示：

$（'#ticketsTable'）。数据表（…）

语法

selector.DataTable（）

用于DataTable API调用，例如：

---

$（'#ticketsTable'）.DataTable（）.rows（'.modified'）.invalidate（）.draw（）
此解决方案可能会解决您的问题，
在表中将数据链接设置为false

<table id="myTable" data-turbolinks="false">
 /* Insert table content... */
</table> 


/*插入表格内容*/

如果您使用以下代码创建datatable

<script>
 $(document).ready(function(){
     $('#myTable').dataTable({ });
 })
</script>


$（文档）.ready（函数（）{
$（'#myTable'）.dataTable（{}）；
})
与此相关吗@markpsmith它有点相关，但是，那篇文章提到它是由在同一节点上检测到另一个dataTable引起的。不仅我的另一个dataTable位于完全不同的页面上（甚至没有加载），而且我已经注释掉了第一个dataTable的代码，我仍然遇到同样的问题。另外，文章提到他已经离开了dataTables，因此没有真正的“确认”解决方案。你能发布更多有帮助的代码吗？HTML可能吗？请发布HTML表的代码另一个获得两个分页和两个搜索框的场景是，如果我们加载datatable脚本引用两次，它将初始化两次。