Datatables и Golden Layout - .DataTable() не вызывается во всплывающем окне

У меня простой DataTable() в золотом макете контейнера:

<!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>

Таблица отображается правильно с DataTable() Стили при открытии в браузере, однако, когда я открываю вдову, таблица теряет все стили и возвращается к основному HTML.

После прочтения документации по GL я думаю, что мне нужно подписаться на событие open в новом контейнере всплывающих окон GL и вызвать table.DataTable() но я только сейчас изучаю JavaScript, jQuery и т. д. Я не уверен, где бы я это сделал?

Источник

1 ответ

Это связано с тем, что, когда Golden Layout открывает новое окно, он не копирует ваш текущий компонент в новое окно, а создает совершенно новый с тем же состоянием. Это означает, что вложение в DataTables теряется при перестройке компонента. Для получения дополнительной информации см. Следующий список (это не очень помогает, но дает объяснение): Работа с всплывающими окнами

Чтобы получить эту работу, как вы хотите, вам нужно сделать две вещи:

Первое: включите popoutWholeStack в настройках вашей конфигурации

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

Второе: добавьте обработчик stateChanged и присоедините его к DataTables. Поместите это перед вызовом init().

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

myLayout.init();
Источник
Другие вопросы по тегам