Datatables and Golden Layout - .DataTable() not being called on popout

Question

I have a simple DataTable() in a golden layout container:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

<script type="text/javascript" src="../../static/js/jq.min.js"></script>
<script type="text/javascript" src="../../static/js/gl.min.js"></script>
<script type="text/javascript" src="../../static/js/dt.js"></script>

<link type="text/css" rel="stylesheet" href="../../static/css/gl-base.css" />
<link type="text/css" rel="stylesheet" href="../../static/css/gl-dark-theme.css" />
<link rel="stylesheet" type="text/css" href="../../static/css/dt.css"/>
<link rel="stylesheet" type="text/css" href="../../static/css/dt-custom.css"/>

</head>
<body>
    <script>
     function getTable() {
         return "<table id=\"testTable\" class=\"testTable\" cellspacing=\"0\">\n" +
        "        <thead>\n" +
        "            <tr>\n" +
        "                <th>Name</th>\n" +
        "                <th>Position</th>\n" +
        "                <th>Office</th>\n" +
        "                <th>Age</th>\n" +
        "                <th>Start date</th>\n" +
        "                <th>Salary</th>\n" +
        "            </tr>\n" +
        "        </thead>\n" +
        "        <tbody>\n" +
        "            <tr>\n" +
        "                <td>Tiger Nixon</td>\n" +
        "                <td>System Architect</td>\n" +
        "                <td>Edinburgh</td>\n" +
        "                <td>61</td>\n" +
        "                <td>2011/04/25</td>\n" +
        "                <td>$320,800</td>\n" +
        "            </tr>\n" +
        "            <tr>\n" +
        "                <td>Garrett Winters</td>\n" +
        "                <td>Accountant</td>\n" +
        "                <td>Tokyo</td>\n" +
        "                <td>63</td>\n" +
        "                <td>2011/07/25</td>\n" +
        "                <td>$170,750</td>\n" +
        "            </tr>\n" +
        "            <tr>\n" +
        "                <td>Ashton Cox</td>\n" +
        "                <td>Junior Technical Author</td>\n" +
        "                <td>San Francisco</td>\n" +
        "                <td>66</td>\n" +
        "                <td>2009/01/12</td>\n" +
        "                <td>$86,000</td>\n" +
        "            </tr>\n" +
        "        </tbody>\n" +
        "    </table>"
}

var config = {
   content: [{
        type: 'row',
        content: [
           {
            type:'component',
            componentName: 'testComponent'
           }]
        }]
   };

var myLayout = new GoldenLayout( config );

myLayout.registerComponent( 'testComponent', function(container, state){
        container.getElement().append(getTable());
});

myLayout.init();</script>



<script type="text/javascript">

$(document).ready(function() {
    $('#testTable').DataTable();
} );

</script>

</body>
</html>

The table displays correctly with the DataTable() styling when opened in a browser, however when I pop out the widow the table loses all styling and reverts to the basic HTML.

From reading the GL docs I think I need to subscribe to the open event on the new GL pop out container and call table.DataTable() there but as I am just now learning JavaScript and jQuery etc. I am unsure where I would do this?

When I click the Golden Layout 'Open in new window' icon to pop out the window, as in the demo [here](http://golden-layout.com) — jacktar, Oct 11 '17 at 08:50

score 1 · Answer 1 · answered Mar 19 '18 at 18:18

This is because when Golden Layout pops a new window, it doesn't copy your current component to the new window, but rather creates an entirely new one with the same state. This means that the attachment to DataTables is being lost when the component is rebuilt. For a tad more info see the following list (it doesn't help much, but does give a explanation): Working with Popouts

To get this work like you want, you need to do two things:

First: Enable popoutWholeStack in your config settings

var config = {
"settings": {
    "popoutWholeStack": true,
},
content: [{
    type: 'row',
    content: [
       {
        type:'component',
        componentName: 'testComponent'
       }]
    }]
};

Second: Add the stateChanged handler and reattach to DataTables. Put this before your init() call.

myLayout.on('stateChanged', () => {
    $('#testTable').DataTable();
});

myLayout.init();

Datatables and Golden Layout - .DataTable() not being called on popout

1 Answers1