DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Open Table in a new window on button click?

Open Table in a new window on button click?

JeremiahEdwardJeremiahEdward Posts: 25Questions: 4Answers: 0
in Free community support

Hello..

So I am using Leaflet JavaScript. I have my table set up, but it's very big. I would like to be able to open it in a new window on button click and keep the formatting exactly the same. I have tried:

```window.open()

...but that looks crappy. The nice styling is not preserved. IDEALLY, I would want to be able to open it with Leaflet Sidebar. THAT's the ultimate goal.

You can tie html and table content there, but I haven't figured out how to do it yet. Opening in a new window will have to suffice for now (unless someone here knows...)

Answers

  • kthorngrenkthorngren Posts: 21,311Questions: 26Answers: 4,948
    edited July 2017

    Many times if the table is displayed but the Datatables formatting and functions don't work you have run into a Javascript error. Check your browser's console.

    Also if the Datatable is built then a window is open to display it the columns might be misaligned. This can typically be fixed with columns.adjust() after opening the window.

    Kevin

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    Also worth checking that you've loaded the stylesheets into your Javascript controlled window.

    Allan

  • JeremiahEdwardJeremiahEdward Posts: 25Questions: 4Answers: 0

    I have added the style sheets and it looks perfect now. Although, the sort functionality does not work in the new window. Do I have to attach the JS somehow as well??

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    Yes - its a new document, it doesn't just automatically inherit all the interactions and bindings of the opening document. You'd need to load the Javascript libraries and also execute the Javascript for them.

    Allan

  • JeremiahEdwardJeremiahEdward Posts: 25Questions: 4Answers: 0
    edited July 2017

    Thanks for the help allan. I have added the javascript link as well, but that still doesn't work. Here is my code:

                function GenerateTable(){
                var featureTable = document.getElementById("tableContainer");
                var tablePopup = window.open("", "", "width=1080,height=480,resizeable,scrollbars");
                    tablePopup.document.write('<!DOCTYPE html>');
                tablePopup.document.write('<html><head><link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/><script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"><\/script></head><body></body></html>');
                    tablePopup.document.write(featureTable.outerHTML);
                    tablePopup.document.close();   
                    map.addControl(sidebar);
                    sidebar.setContent(featureTable);
                    sidebar.toggle();
                }

    This open the table in a new window, the search box is there, the navigation buttons are there (to move through all the rows), but none of it is function. Nor is the sort function. I have never done anything like this before so you'll have to excuse my ignorance if it is something simple.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.