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

Question

我在不同页面上使用第二个 DataTables 对象时遇到问题。我已经成功地创建了一个位于我的 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>

我也尝试过使用 DataTables.Destroy() 命令，但似乎无济于事。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

DataTable 实例化中存在一个小错误。实例化 DataTables 的正确方法是使用小写的 selector.dataTable ，如下所示:

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


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

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