javascript - 使用 TABS 时 DataTable.js 无法正确加载

Question

我使用 DataTables.js 生成表格。很好，工作正常。我想将选项卡添加到我的“页面”，但似乎当 DataTables 用于主选项卡以外的其他选项卡时，它不会加载所有内容。

• 第一个选项卡

• 第二个标签

以下是添加了 DataTable 的一列/卡片的源代码。

    <div class="three defaultColumn defaultCard">
                            <script>
                                $(document).ready(function() {
                                    $("#DT-iuyx2s7b").DataTable({
                                        dom: "Bfrtip",
                                        buttons: [
                                            "copyHtml5",
                                            "excelHtml5",
                                            "csvHtml5",
                                            "pdfHtml5"
                                        ],
                                        colReorder: true,
                                        paging: true,
                                        pagingType: ["full_numbers"],
                                        lengthMenu: [
                                            [15, 25, 50, 100],
                                            -1,
                                            [15, 25, 50, 100],
                                            "All"
                                        ],
                                        ordering: true,
                                        info: true,
                                        procesing: true,
                                        responsive: {
                                            details: true
                                        },
                                        select: true,
                                        searching: true,
                                        stateSave: true
                                    });
                                });
                            </script>
                            <table id="DT-iuyx2s7b" class="display compact">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Id</th>
                                        <th>PriorityClass</th>
                                        <th>FileVersion</th>
                                        <th>HandleCount</th>
                                        <th>WorkingSet</th>
                                        <th>PagedMemorySize</th>
                                        <th>PrivateMemorySize</th>
                                        <th>VirtualMemorySize</th>
                                        <th>TotalProcessorTime</th>
                                        <th>SI</th>
                                        <th>Handles</th>
                                        <th>VM</th>
                                        <th>WS</th>
                                        <th>PM</th>
                                        <th>NPM</th>
                                        <th>Path</th>
                                        <th>Company</th>
                                        <th>CPU</th>
                                        <th>ProductVersion</th>
                                        <th>Description</th>
                                        <th>Product</th>
                                        <th>__NounName</th>
                                        <th>BasePriority</th>
                                        <th>ExitCode</th>
                                        <th>HasExited</th>
                                        <th>ExitTime</th>
                                        <th>Handle</th>
                                        <th>SafeHandle</th>
                                        <th>MachineName</th>
                                        <th>MainWindowHandle</th>
                                        <th>MainWindowTitle</th>
                                        <th>MainModule</th>
                                        <th>MaxWorkingSet</th>
                                        <th>MinWorkingSet</th>
                                        <th>Modules</th>
                                        <th>NonpagedSystemMemorySize</th>
                                        <th>NonpagedSystemMemorySize64</th>
                                        <th>PagedMemorySize64</th>
                                        <th>PagedSystemMemorySize</th>
                                        <th>PagedSystemMemorySize64</th>
                                        <th>PeakPagedMemorySize</th>
                                        <th>PeakPagedMemorySize64</th>
                                        <th>PeakWorkingSet</th>
                                        <th>PeakWorkingSet64</th>
                                        <th>PeakVirtualMemorySize</th>
                                        <th>PeakVirtualMemorySize64</th>
                                        <th>PriorityBoostEnabled</th>
                                        <th>PrivateMemorySize64</th>
                                        <th>PrivilegedProcessorTime</th>
                                        <th>ProcessName</th>
                                        <th>ProcessorAffinity</th>
                                        <th>Responding</th>
                                        <th>SessionId</th>
                                        <th>StartInfo</th>
                                        <th>StartTime</th>
                                        <th>SynchronizingObject</th>
                                        <th>Threads</th>
                                        <th>UserProcessorTime</th>
                                        <th>VirtualMemorySize64</th>
                                        <th>EnableRaisingEvents</th>
                                        <th>StandardInput</th>
                                        <th>StandardOutput</th>
                                        <th>StandardError</th>
                                        <th>WorkingSet64</th>
                                        <th>Site</th>
                                        <th>Container</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1Password</td>
                                        <td>16216</td>
                                        <td>Normal</td>
                                        <td>7.3.661</td>
                                        <td>901</td>
                                        <td>70991872</td>
                                        <td>157519872</td>
                                        <td>157519872</td>
                                        <td>747872256</td>
                                        <td>00:01:03.4531250</td>
                                        <td>1</td>
                                        <td>901</td>
                                        <td>747872256</td>
                                        <td>70991872</td>
                                        <td>157519872</td>
                                        <td>60464</td>
                                        <td>
                                            C:\Users\pklys\AppData\Local\1Password\app\7\1Password.exe
                                        </td>
                                        <td>AgileBits Inc.</td>
                                        <td>63,453125</td>
                                        <td>7.3.661</td>
                                        <td>1Password for Windows desktop</td>
                                        <td>1Password</td>
                                        <td>Process</td>
                                        <td>8</td>
                                        <td></td>
                                        <td>False</td>
                                        <td></td>
                                        <td>6076</td>
                                        <td>
                                            Microsoft.Win32.SafeHandles.SafeProcessHandle
                                        </td>
                                        <td>.</td>
                                        <td>0</td>
                                        <td></td>
                                        <td>
                                            System.Diagnostics.ProcessModule
                                            (1Password.exe)
                                        </td>
                                        <td>1413120</td>
                                        <td>204800</td>
                                        <td>
                                            System.Diagnostics.ProcessModuleCollection
                                        </td>
                                        <td>60464</td>
                                        <td>60464</td>
                                        <td>157519872</td>
                                        <td>683568</td>
                                        <td>683568</td>
                                        <td>174804992</td>
                                        <td>174804992</td>
                                        <td>191524864</td>
                                        <td>191524864</td>
                                        <td>799748096</td>
                                        <td>799748096</td>
                                        <td>True</td>
                                        <td>157519872</td>
                                        <td>00:00:08.7343750</td>
                                        <td>1Password</td>
                                        <td>255</td>
                                        <td>True</td>
                                        <td>1</td>
                                        <td>
                                            System.Diagnostics.ProcessStartInfo
                                        </td>
                                        <td>11.02.2019 19:10:11</td>
                                        <td></td>
                                        <td>
                                            System.Diagnostics.ProcessThreadCollection
                                        </td>
                                        <td>00:00:54.7187500</td>
                                        <td>747872256</td>
                                        <td>False</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>70991872</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

完整 source code在 GitHub 上。

我曾尝试更改负责选项卡的代码，认为我使用的选项卡可能有问题，但即使在更改它们之后，行为也是一样的。

Answer 1

这样做的一种方法是在选项卡激活时初始化数据表，而不是在页面加载时。

$(document).ready(function() {
  $('a').on('click', function() {
    if ($(this).attr('href')) == "#Test1" && !$.fn.dataTable.isDataTable("#DT-iuyx2s7b") && !$.fn.dataTable.isDataTable("#DT-2u8iw0gr")) {
        $("#DT-iuyx2s7b").DataTable(...);
        $("#DT-2u8iw0gr").DataTable(...);
    } else if ($(this).attr('href')) == "#Test2" && !$.fn.dataTable.isDataTable("#DT-vdk1ir62")) {
        $("#DT-vdk1ir62").DataTable(...);
    }
  });
});

我没有考虑第一个选项卡，因为它是页面加载时唯一可见的选项卡。

JSfiddle:https://jsfiddle.net/dqec4xyw/