DataTable.js не загружается должным образом при использовании TABS - PullRequest
Новая
       0

DataTable.js не загружается должным образом при использовании TABS

0 голосов
/ 11 февраля 2019

Я использую DataTables.js для генерации таблиц.Это здорово, отлично работает.Я хотел добавить вкладки к своим "страницам", но кажется, что когда DataTables используется не на основной вкладке, он загружает не все.

  • Первая вкладка enter image description here

  • 2-я вкладка enter image description here

Ниже приведен исходный код одного столбца / карточки с добавленной таблицей данных.

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

Полный исходный код на GitHub.

Я пытался изменить код, отвечающий за вкладки, думая, что это может быть что-то не так с вкладками.использовать, но даже после изменения их поведение остается прежним.

Ответы [ 4 ]

0 голосов
/ 20 февраля 2019

Один из способов сделать это - инициализировать таблицы данных, когда вкладка становится активной, а не при загрузке страницы.

$(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/

0 голосов
/ 15 февраля 2019

Проблема связана с таблицами данных, которые не могут правильно отображаться, когда таблица находится в скрытом контейнере.Вы можете проверить это, просто удалив стиль 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>
0 голосов
/ 16 февраля 2019

Опция 1

Выполните responseive.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

Инициализация DataTable при нажатии кнопки tab.В дополнение к приведенному ниже коду, вам придется удалить другие фрагменты кода, которые инициализируют DataTable для изначально неактивных вкладок (Test1 и Test2).

Я обнаружил, что это обеспечивает более согласованную компоновку, чем Option1. 

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
        });

      }

    })
  })
})
0 голосов
/ 11 февраля 2019

try:

изменить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...