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

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

28 голосов
/ 03 октября 2011

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

 @Html.Partial("_Scripts")

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

$('#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();
        }

Ответы [ 10 ]

34 голосов
/ 11 декабря 2014

Я сделал очень простое решение, которое отлично работает. В инициализации DataTable я использовал метод show (): 

$(document).ready(function() {
    $('#example').dataTable({
        "order": [[ 0, 'asc' ]]
    });
    $('#example').show();
} );

... и в таблицу HTML я поместил отображение стиля: нет: 

<table id="example" class="display" cellspacing="0" width="100%" style="display:none">

Удачи!

10 голосов
/ 12 октября 2011

У меня была такая же проблема. Попробуйте это: 

var dTable=$("#detailtable").dataTable({
        "bProcessing":true,
        "bPaginate":false,
        "sScrollY":"400px",
        "bRetrieve":true,
        "bFilter":true,
        "bJQueryUI":true,
        "bAutoWidth":false,
        "bInfo":true,
        "fnPreDrawCallback":function(){
            $("#details").hide();
            $("#loading").show();
            //alert("Pre Draw");
        },
        "fnDrawCallback":function(){
            $("#details").show();
            $("#loading").hide();
            //alert("Draw");
        },
        "fnInitComplete":function(){
            //alert("Complete");
        }
9 голосов
/ 03 октября 2011

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

Исходный ответ следует:

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

  1. Стиль простой таблицы HTML, чтобы она имела тот же внешний вид, что и финал.Если у вас включен jQuery UI (bJQueryUI: true), это означает, что классы jQuery UI находятся в «простой» таблице, а не ожидают, пока DT их добавит.

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

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

Удачи!

6 голосов
/ 17 декабря 2013

На основе предложения @hanzolo - вот мой комментарий в качестве ответа (и как выглядит моя таблица данных): 

var stockableTable = $('#stockable').dataTable({
      "bLengthChange": false,
      "iDisplayLength": -1,
      "bSort": false,
      "bFilter": false,
      "bServerSide": false,
      "bProcessing": false,
      "sScrollY": "500px",
      "sScrollX": "95%",
      "bScrollCollapse": true,
      // The following reduces the page load time by reducing the reflows the browser is invoking
      "fnPreDrawCallback":function(){
          $("#loading").show();
      },
      "fnDrawCallback":function(){
      },
      "fnInitComplete":function(){
          $("#details").show();
          this.fnAdjustColumnSizing();
          $("#loading").hide();
      }
  });
2 голосов
/ 03 сентября 2016

Мое рабочее решение - «грязный» трюк, чтобы скрыть таблицу, не используя «display: none». Обычный стиль «display: none» вызывает проблему инициализации для таблиц данных jQuery.

Прежде всего, поместите вашу таблицу данных в div обертки: 

<div id="dataTableWrapper" style="width:100%" class="dataTableParentHidden">
...data table html as described in jQuery Data Table documentation...
</div>

В CSS: 

.dataTableParentHidden {overflow:hidden;height:0px;width:100%;}

Это решение скрывает таблицу данных без использования «display: none».

После инициализации таблицы данных вы должны удалить класс из оболочки, чтобы открыть таблицу: 

$('#yourDataTable').DataTable(...);
$('#dataTableWrapper').removeClass('dataTableParentHidden');
1 голос
/ 03 октября 2011

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

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

Вы можете сделать что-то вроде: 

// .loadTable() is some function that loads your table and returns a bool indicating it's finished
//  just remember to check this bool within the function itself as it will be called over and over until it returns true

while (!loadTable()) {

    // maybe show a progress bar

    if ($('#myTable').css('display') != 'none')) {
        $('#myTable').hide();    // if it isn't already hidden, hide it
    }  
}

// hide progress bar
$('#myTable').show();

UDPATE:

Если плагин таблицы jQuery имеет обратный вызов «success» или «done», просто скройте таблицу при загрузке страницы и покажите ее, когда загрузка будет завершена. 

$(document).ready(function () {
    $('#myTable').hide();

    // run plugin and .show() on success or finished 
});
0 голосов
/ 27 июля 2018
  • Ниже приведен пример руля 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 голосов
/ 12 марта 2016

Моя таблица данных прыгала между сообщениями из-за фильтра сверху.

Простое решение: Скройте таблицу с display: none, затем используйте jquery .fadeIn () перед вызовом DataTable ().

0 голосов
/ 11 января 2015

Это связано с плагином ColVis.удалите букву "W" из sDOM, и ваш рендеринг таблицы вылетит (без выпадающих списков)

0 голосов
/ 27 марта 2013

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

      <html>
                <head>
                    <style>
                    .dn {
                         display: none;
                    }
                </style>
                </head>
                <body>
                        <div id="loadDiv" class="firstDivClass secondDivClass">Loading...<div>
                        <table id="myTable" class="dn firstTableClass secondTableClass">
                             <tr><td>Something Here</td></tr>
                        </table>
                </body>


            <script>
         $(document).ready(function(){
    showMeTheTabel();
    });        
    function shoMeTheTable() {
            var dTable = $('#myTable').dataTable({
                "aoColumnDefs": [
                   {bla, bla}
                ],
                "oLanguage": {
                    "bla" : "bla"
                },
                "fnPreDrawCallback":function(){
                },
                "fnDrawCallback":function(){
                    $("#loading").addClass('dn'); 
                    $('#tabel').removeClass('dn');
                },
                "fnInitComplete":function(){
                    console.log("Complete")           // optional and Done !!!
                }
            });
    }
    </script>
     </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...