0

我已经成功地在 iframe 中初始化了一个 jQuery DataTable，但是如果我尝试在同一域的 iframe 中运行一个函数，它会重新初始化 DataTable 而不是使用现有的。我怎样才能解决这个问题？

我在 iframe 的 JS 文件中的代码：

$(document).ready(function(){
    listTable.initDataTables();
});

var listTable = {
    initDataTables: function() {
        $.each($('.dataTable'), function(){
            var jqTable = $(this);

            // Define the columns
            var columns = [];
            var columnHeadings = jqTable.find('thead > tr:eq(1) > th');
            $.each(columnHeadings, function(){
                var code = $(this).attr('data-code');
                var column = { data: code, defaultContent: '' };
                columns.push(column);
            });

            // Initiate the table
            var dataTable = jqTable.DataTable({
                'ajax': {
                    'url': '/get-data',
                    'type' : 'GET'
                },
                'columns': columns,
                'responsive': true,
                'scroller': false,
                'select': true,
                'bLengthChange': false,
                'bFilter': true,
                'bInfo': true,
            });
        });
    }
};

当我在没有 iframe 的窗口中运行以下代码时，一切正常：

$('table').DataTable().ajax.url();
// returns '/get-data'

但是，当我从包含 iframe 的父窗口运行以下代码时，会返回 NULL：

$('iframe').contents().find('table').DataTable().ajax.url()
// returns NULL

我还注意到，当我从父窗口运行代码时，会再次添加导航栏。所以看起来 DataTable() 函数正在同一个表上创建一个新实例。

4

1 回答 1

0

我对标题的选择器进行了更改（eq(0) 而不是 eq(1)），以使数据表能够正确加载表。

这是我在本地制作的代码：main.html：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link href="http://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#example').on("click", function() {
                var ajaxurl = document.getElementById("MyIframe").contentWindow.myDataTable.ajax.url();
                alert(ajaxurl);
            });
        });
    </script>
</head>
<body>
    <input type="button" id="example" />
    <iframe id="MyIframe" src="iframe.html"></iframe>
</body>
</html>

iframe.html：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link href="http://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            listTable.initDataTables();
        });
        var myDataTable;
        var listTable = {
            initDataTables: function() {
                $('.dataTable').each(function(){
                    var jqTable = $(this);

                    // Define the columns
                    var columns = [];
                    var columnHeadings = jqTable.find('thead > tr:eq(0) > th');
                    $.each(columnHeadings, function(){
                        var code = $(this).attr('data-code');
                        var column = { data: code, defaultContent: '' };
                        columns.push(column);
                    });

                    // Initiate the table
                    myDataTable = jqTable.DataTable({
                        'ajax': {
                            'url': 'get-data.json',
                            'type' : 'GET'
                        },
                        'columns': columns,
                        'responsive': true,
                        'scroller': false,
                        'select': true,
                        'bLengthChange': false,
                        'bFilter': true,
                        'bInfo': true,
                    });
                });
            }
        };
</script>
</head>
<body>
    <input type="text" id="example" />
    <table id="MyDataTable" class="dataTable">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

使用空文件“get-data.json”。

当您单击该按钮时，它会通过“get-data.json”提醒您。

于 2016-01-27T11:03:29.283 回答