How to call a jQuery DataTable object in an iframe?

Question

How to call a jQuery DataTable object in an iframe?

3.1k Views Asked by Hans At 16 May 2025 at 22:55

I have successfully initialized a jQuery DataTable in an iframe, however if I try to run a function in the iframe on the same domain it reinitializes the DataTable instead of using the existing one. How can I fix this?

My code in the JS file of the Iframe:

$(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,
            });
        });
    }
};

When I run the following code in a window without an iframe, all works well:

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

But when I run the following code from a parent window that contains an iframe, NULL gets returned:

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

I also notice that when I run the code from a parent window, navigation bars get added a second time. So it looks like the DataTable() function is creating a new instance on the same table.

Original Q&A

There are 1 best solutions below

**ADreNaLiNe-DJ** · Accepted Answer

I made a change in the selector of your headings (eq(0) instead of eq(1)) in order to make datatables to load properly the table.

Here is the code i made locally: 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>

With an empty file "get-data.json".

When you click on the button, it alerts you with "get-data.json".

How to call a jQuery DataTable object in an iframe?

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in DATATABLES

Related Questions in JQUERY-1.10

Trending Questions

Popular # Hahtags

Popular Questions