Показывать счетчик, в то время как datataables строит / init dataTable

Question

, поэтому я использую таблицы данных для форматирования таблицы, созданной Coldfusion. Таким образом, таблицы генерируются сначала до html (скажем, это было бы сделано с использованием PHP, чтобы сделать это проще)

<table id="table" class="table table-bordered" style="width:100%">
    <thead>
        <tr>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            ...
        </tr>
    </tbody>
</table>
<script>
    $(document).ready(()=>{
        $("#table").dataTable({scrollY: 500})
    })
</script>

, но эта таблица похожа на 10000 - 15000 записей и таблиц данных занимает немного время, прежде чем он в конечном итоге форматирует его. У меня есть оверлейный загрузчик / спиннер на странице. Теперь, как мне показать счетчик и спрятать его, когда таблица данных готова к созданию / форматированию таблицы? Я попробовал несколько обратных вызовов для таблиц данных, таких как initComplete callback, таких как

$(".load-overlay").show()
$('#table').dataTable({scrollY: 500,
    "initComplete": function(settings, json) {
        $(".load-overlay").hide();
      }
});

, но это не сработало, поскольку счетчик показывал кратко и был скрыт до того, как dataTables построил DataTable.

Answer 1

Комментарии выше о загрузке таблицы через ajax точны. DT требует много времени для инициализации большой таблицы, и заставить браузер загружать все это в DOM, прежде чем инициализировать DT поверх него, это очень медленно и не очень удобно.

Вы можете преобразовать таблицу использовать источник данных ajax, который быстрее, чем непосредственно загружает его, как вы. Это загрузит весь набор данных в виде BLOB-объекта JSON в фоновом режиме и отобразит только количество строк, выбранных пользователем. Это прекрасно работает, пока вы не доберетесь до действительно больших наборов данных, и загрузка массивного BLOB-объекта JSON станет его собственным ударом по производительности. В этот момент вы хотите посмотреть на обработку на сервере . Это сложнее реализовать, потому что вы должны обрабатывать весь поиск (а также сортировку) как часть вашего запроса данных, но это позволяет вам загружать только 10/25/50 записей одновременно, что делает его намного быстрее. При использовании любого из этих параметров DataTables будет отображать свое собственное сообщение о загрузке.

Теперь предположим, что вы работаете с достаточно маленьким набором данных, или по какой-то причине вам действительно нужно загрузить всю таблицу сразу. Вот что я сделал, чтобы он скрывал таблицу до тех пор, пока она не будет готова:

Сначала скрываем таблицу данных по умолчанию и показываем на ее месте счетчик:

<table id="datatable" style="display:none">...</table>
<div id="dt_loader" class="spinner"></div>

Затем, в вашем JS после вызова DataTable () скройте счетчик и покажите таблицу:

var dataTable = $('#dataTable').DataTable(options);
$('div#dt_loader').hide();
dataTable.show();