jQuery DataTables - медленное инициирование, «нормальная» таблица html, показанная в начале

Question

jQuery DataTables - медленное инициирование, «нормальная» таблица html, показанная в начале

Я использую плагин jQuery DataTable, но меня беспокоит то, что загрузка скриптов занимает некоторое время, поэтому на моей веб-странице всегда отображается сначала обычная таблица html, а после того, как все скрипты будут выполнены, таблица станет DataTable. Я не думаю, что такой вид приемлем, поэтому я надеюсь получить здесь несколько советов. могу ли я сделать сценарии быстрее или не отображать простую таблицу впереди? Кстати, я вызываю свой сценарий из частичного представления _Scripts в моем теге заголовка _Layout.cshtml

 @Html.Partial("_Scripts")

(ОБНОВЛЕНИЕ) {{ 1}} Я попытался скрыть таблицу и показать ее после инициализации таблицы данных, однако я получил таблицу без заголовка таблицы. Есть идеи, почему это происходит?

$('#stocktable').hide();
// Initialize data table
    var myTable = $('#stocktable').dataTable({

        // Try styling
        "sScrollX": "100%",
        "sScrollXInner": "100%",
        "bScrollCollapse": true,

        // To use themeroller theme
        "bJQueryUI": true,
        // To use TableTool plugin
        "sDom": 'T<"clear">lfrtip',
        // Allow single row to be selected
        "oTableTools": {
            "sRowSelect": "single"
        },
        "fnInitComplete": function () {
            $('#stocktable').show();
        }

29

jquery performance datatables

задан Alex.K. 11 December 2014 в 14:34

2 ответа

Ниже приведен пример руля node.js. Однако вы можете визуализировать данные, используя любую веб-интерфейсную среду, которую вы используете.
Если вы используете загрузчик, вы можете сначала скрыть таблицу с помощью скрытого класса или, альтернативно, скрыть элементы вручную.
Затем в обратном вызове initComplete вы можете использовать jQuery, чтобы удалить скрытый класс, чтобы отобразить таблицу только после полной загрузки.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

<table id="stocktable" class="table hidden">
<thead>
  <tr>
    <th>Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Street Address</th>
    <th>State</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>
  {{#each devices}}
    <tr id="{{id}}">
      <td>{{first_name}}</td>
      <td>{{last_name}}</td>
      <td>{{age}}</td>
      <td>{{street_address}}</td>
      <td>{{state}}</td>
      <td>{{country}}</td>
    </tr>
  {{/each}}
</tbody>
</table>

<script>
  $(document).ready(function() {
    $('#stocktable').DataTable({
      columns: [{
          person: 'first_name'
        }, {
          person: 'last_name'
        },
        {
          person: 'age'
        },
        {
          person: 'street_address'
        },
        {
          person: 'state'
        },
        {
          person: 'country'
        }
      ],
      initComplete: function() {
       // Unhide the table when it is fully populated.
       $("#stocktable").removeClass("hidden");
      }
    });
  });
</script>

Например:

0

ответ дан 28 November 2019 в 01:14

Другие вопросы по тегам:

jquery performance datatables

Похожие вопросы:

score 9 · Accepted Answer

[изменить, чтобы добавить: Этот более старый ответ относится к предыдущему API DataTables. Опции jQueryUI устарели, и рекомендации по замене находятся здесь: https://datatables.net/manual/styling/jqueryui Кроме того, fnInitCallback (как и все другие опции) отбросил венгерскую нотацию и теперь является initCallback]

Исходный ответ таков:

Мое предостережение в том, что я не знаком с частичными представлениями _Scripts, поэтому ниже приведен совет, который я хотел бы дать кому-то, просто включив JavaScript в ' нормальные способы:

Стиль простой таблицы HTML, чтобы она имела тот же внешний вид, что и финал. Если у вас включен jQuery UI (bJQueryUI: true), это означает, что классы jQuery UI находятся в «простой» таблице, а не ждут, пока DT их добавит.
Используйте различные методы FOUC (флеш-контент), чтобы скрыть таблицу до тех пор, пока она не будет готова к визуализации. DataTables API имеет полезные обратные вызовы, которые можно использовать для части «покажи сейчас», такой как fnInitCallback. Самая основная (но ухудшающая доступность) техника - это стилизация таблицы с помощью display: none, а в обратном вызове используйте $('#myTable').show() или некоторые другие варианты. Поиск в Интернете должен обеспечить некоторые отличные решения, которые сохранят доступность.

Кроме этого, на самом деле это просто вопрос (как вы говорите!) Терпимости к «приемлемому». Мы используем обработку на стороне сервера (возвращающую гораздо меньшее количество записей), загрузчик сценариев для ускорения загрузки скриптов (мы экспериментируем с head.js, но есть и другие!) И минимизированные версии скриптов. Даже при этом мы иногда видим простую таблицу за мгновение до того, как она становится DT, но, поскольку пользователи Интернета привыкли видеть, что страницы «создаются» на глазах при загрузке элементов, это был приемлемый компромисс. Для тебя это может быть не так.

Удачи!