如何在 iframe 中调用 jQuery DataTable 对象

我已经成功地在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（）函数正在同一个表上创建一个新实例。

我更改

了标题的选择器（eq（0）而不是 eq（1）），以使数据表正确加载表。

这是我在本地制作的代码：主.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"提醒您。

相关内容

最新更新

热门标签：