【问题标题】:DataTable.js doesn't load properly when using TABS使用 TABS 时 DataTable.js 无法正确加载
【发布时间】:2019-07-05 10:27:00
【问题描述】:

我使用 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 上。

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

【问题讨论】:

    标签: javascript html css datatables


    【解决方案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/

    【讨论】:

      【解决方案2】:

      问题在于数据表,当表在其中时无法正确呈现 一个隐藏的容器。您可以通过删除 display: none 样式来验证它 从.tab-pane 开始,所有选项卡都会显示并且所有表格都正确呈现。但你必须隐藏 那么标签对吗?

      在数据表开发人员解决此问题之前,您只有一条路可以走。保留所有 页面加载时可见的选项卡窗格,让数据表呈现所有表,然后隐藏 选项卡窗格。所以你必须调整你的标签。

      即使容器的可见性设置为隐藏,数据表似乎也可以呈现表 如果显示设置为阻止。您可以使用此技巧隐藏所有选项卡窗格的闪烁 当页面仍在加载时。只是给你一个想法,在 带有body标签的页面底部。

      <style id="datatables_crazyfix">
      .tab-content .tab-pane {
          visibility: hidden;
          display: block;
      }
      </style>
      <script>
          jQuery(function($){
              $("#datatables_crazyfix").remove();
          });
      </script>
      

      【讨论】:

      • 这似乎有效......有什么可以阻止我按原样使用它吗?
      • 是的,除非有任何改变,例如类名。您可以使用它,因为这是一个临时修复,直到数据表开发人员修复它。如果出现任何其他复杂性,请通知我。
      • 太棒了。我对当前选项卡还有一个问题,因此我将把它移植到用于选项卡切换的不同解决方案(如在不同的 JS 代码中)。希望相同的代码适用于新的解决方案。
      • 你能看看这个吗:stackoverflow.com/questions/55148669/…我改变了标签的完成方式,事情不再起作用了。我试过用你的,但它似乎不再起作用了。
      【解决方案3】:

      试试:

      更改标签中的 html 代码:

        <div>
                      <ul class="tab-nav">
                          <li><a class="button tabbtn active" href="#Test">Test </a></li>
                          <li><a class="button tabbtn" href="#Test1">Test1 </a></li>
                          <li><a class="button tabbtn" href="#Test2">Test2 </a></li>
                      </ul>
                  </div>
      

      <script>
          $( ".tabbtn" ).on( "click", function() {
                setTimeout(function(){
                   $("#DT-iuyx2s7b").DataTable({
                                                      dom: "Bfrtip",
                                                      destroy: true,
                                                      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
                                                  });
              },200)
              });
          </script>
      

                   <script>
          var table=null;
                                      $(document).ready(function() {
                                      table=    $("#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
                                          });
                                      });
          $( ".tabbtn" ).on( "click", function() {
                setTimeout(function(){
      table.ajax.reload();
      },300);
      });
                                  </script>
      

      【讨论】:

      • 我不确定您的标签更改按钮中的内容。说到这个,我有点菜鸟。
      • 我添加了一个新答案
      • 它工作,排序.. 再次按 Tab 时,我收到 DataTables 警告:table id=DT-vdk1ir62 - 无法重新初始化 DataTable。有关此错误的更多信息,请参阅datatables.net/tn/3
      • $("#DT-iuyx2s7b").dataTable().fnDestroy();在 $("#DT-iuyx2s7b").DataTable({.... 之前添加代码
      • if ($.fn.DataTable.isDataTable("#DT-vdk1ir62")) { $("#DT-vdk1ir62") .DataTable() .clear() .destroy(); }
      【解决方案4】:

      选项 1

      在 tabButton 点击​​时执行responsive.recalc()。这可能需要最少的工作量。

      tabButtons.map(function (button) {
        button.addEventListener("click", function () {
          document
            .querySelector("li a.active.button")
            .classList.remove("active");
          button.classList.add("active");
      
          document
            .querySelector(".tab-pane.active")
            .classList.remove("active");
          document
            .querySelector(button.getAttribute("href"))
            .classList.add("active");
      
      
          /****  ADDED RESPONSIVE.RECALC  ****/
          $(button.getAttribute("href"))
            .find("table.display.compact")
            .DataTable().responsive.recalc();
        })
      })
      

      选项 2

      在 tabButton 单击时初始化 DataTable。除了下面显示的代码之外,您还必须删除为最初不活动的选项卡(Test1 和 Test2)初始化 DataTable 的其他代码。

      我发现这会产生比选项 1 更一致的布局。

      tabButtons.map(function (button) {
        button.addEventListener("click", function () {
          document
            .querySelector("li a.active.button")
            .classList.remove("active");
          button.classList.add("active");
      
          document
            .querySelector(".tab-pane.active")
            .classList.remove("active");
          document
            .querySelector(button.getAttribute("href"))
            .classList.add("active");
      
      
          /**  ADDED DATATABLE INITIALIZATION HERE  **/
          var tabPaneToActivate = document
            .querySelector(button.getAttribute("href"))
          tabPaneToActivate.classList.add("active");
          tabPaneToActivate.querySelectorAll("table.display.compact").forEach(function (el) {
            if (!$.fn.dataTable.isDataTable(el)) {
              /** ^^^ Only initialize once ^^^ **/
              $(el).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
              });
      
            }
      
          })
        })
      })
      

      【讨论】:

      • 我先添加了,但没有真正的变化(因为什么也没发生)。我在底部添加了它作为 JS 脚本。有什么特别的地方我必须把它放进去吗?
      • @MadBoy 请参阅this fiddle 中的第 477 行以获取响应式重新计算。让我知道这是否是您期望的结果。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-13
      • 2020-09-21
      • 2018-12-15
      相关资源
      最近更新 更多