How to call a jQuery DataTable object in an iframe? -
i have initialized jquery datatable in iframe, if try run function in iframe on same domain reinitializes datatable instead of using existing one. how can fix this?
my code in js file of iframe:
$(document).ready(function(){ listtable.initdatatables(); }); var listtable = { initdatatables: function() { $.each($('.datatable'), function(){ var jqtable = $(this); // define 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 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 run following code in window without iframe, works well:
$('table').datatable().ajax.url(); // returns '/get-data' but when run following code parent window contains iframe, null gets returned:
$('iframe').contents().find('table').datatable().ajax.url() // returns null i notice when run code parent window, navigation bars added second time. looks datatable() function creating new instance on same table.
i made change in selector of headings (eq(0) instead of eq(1)) in order make datatables load table.
here code 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 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 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 empty file "get-data.json".
when click on button, alerts "get-data.json".
Comments
Post a Comment