JQuery DataTables - медленное инициирование, стандартная таблица html, показанная в начале

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

 @Html.Partial("_Scripts")

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

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

Ответы

Ответ 1

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

Оригинальный ответ следует:

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

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

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

Удачи!

Ответ 2

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

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

... и в таблице HTML я помещаю дисплей стиля: none:

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

Удачи!

Ответ 3

У меня была та же проблема. Попробуйте следующее:

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

Ответ 4

Основываясь на предложении @hanzolo - вот мой комментарий в качестве ответа (и как выглядит мой dataTable):

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

Ответ 5

Мое рабочее решение - "грязный" трюк, чтобы скрыть таблицу, не используя "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');

Ответ 6

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

Сказав это, нужно просто скрыть стол, пока он не загрузит или даже не скроет его, и не покажет индикатор прогресса.

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

// .loadTable() is some function that loads your table and returns a bool indicating it 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 имеет "успешный" или "завершенный" обратный вызов, просто спрячьте таблицу при загрузке страницы и покажите ее, когда она загрузится.

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

    // run plugin and .show() on success or finished 
});

Ответ 7

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

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

Ответ 8

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

Ответ 9

Ниже приведен пример руля 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>

Ответ 10

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

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