DataTables 显示重复的分页和搜索控件。

Question

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

我的DataTable是通过$(document).ready调用加载的，尽管我不确定这是否正确，因为我想在同一页上加载不同的DataTable，但在不同的选项卡控件中。

我的代码如下：

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

我也尝试使用DataTables.Destroy()命令，但似乎没有起作用。

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

- Nige

---

与此相关？ stackoverflow.com/questions/13984698/datatables-showing-two-search-boxes-and-pagination-data - markpsmith

@markpsmith 这有点相关，但是那篇文章提到是因为在同一节点上检测到另一个dataTable引起的。我的另一个dataTable不仅在完全不同的页面上（而且甚至没有加载），而且我已经注释掉了第一个dataTable的代码，但仍然遇到了同样的问题。此外，文章提到他已经远离dataTables，因此没有真正的“确认”解决方案。 - Nige

你能贴出更多有用的代码吗？比如HTML代码？ - markpsmith

请发布您 HTML 表格的代码。 - Rohit Hazra

Answer 1

DataTable实例化时存在一个轻微的错误。正确的实例化方式是使用小写的selector.dataTable，就像这样：

$('#ticketsTable').dataTable(...)

selector.DataTable()语法用于DataTable API调用，例如：

$('#ticketsTable').DataTable().rows('.modified').invalidate().draw();

- Eric Kigathi

---

另一种获取两个分页和两个搜索框的情况是，如果我们两次加载数据表脚本引用，它将被初始化两次。 - Vikash

Answer 2

可能这个解决方案可以修复您的问题， 在表格中将data-turbolinks设置为false

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

如果您正在使用以下代码创建数据表，

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

- Shinto Joseph