Используя Rails, я создал веб-приложение. На одной из страниц веб-приложения отображается таблица, которая используетAPI DataTables, этоJSFiddle показывает пример того, как выглядит мое веб-приложение.

Проблема заключается в том, что когда я начинаю добавлять большие объемы данных (текущие тестовые данные - 1500 строк), таблица загружает каждую строку в первую очередь перед запуском javascript, что означает, что вы получите неформатированную таблицу за несколько секунд до того, как Javascript начнет работать. и DataTables активируется.

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

РЕДАКТИРОВАТЬ: Моя основная проблема заключается в том, что я не уверен, как использовать Javascript для отображения счетчика, пока таблица загружается, но затем перейти к таблице, как только страница будет загружена

Мой код выглядит следующим образом:

HTML / ERB

<div class="list">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table id="app-list-table" class="display table" cellspacing="0">
                    <thead>
                        <tr class="table-headers">
                            <th>Header 1</th>
                            <th>Header 2</th>
                            <th>Header 3</th>
                            <th>Header 4</th>
                            <th>Header 5</th>
                            <th>Header 6</th>
                            <th>Header 7</th>
                            <th>Header 8</th>
                            <th>Header 9</th>
                            <th>Header 10</th>
                        </tr>
                    </thead>
                    <tbody>
                        <%= Server.find_each do |server| %>
                        <tr>
                            <td><%= link_to(server.server_name, server_path(server)) %></td>
                            <td><%= server.application %></td>
                            <td><%= server.server_role %></td>
                            <td><%= server.team_contact %></td>
                            <td><%= server.individual_contact %></td>
                            <td><%= server.business_owner %></td>
                            <td><%= server.vendor %></td>
                            <td><%= server.vendor_contact %></td>
                            <td><%= link_to("Click Here", server.main_doc) %></td>
                            <td><%= server.main_win %></td>
                        </tr>
                        <% end %>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Javascript

$(document).ready(function() {
        var table = $('#app-list-table').DataTable({
            "scrollX": true

        });
    });

Пожалуйста, дайте мне знать, если вы хотите, чтобы я добавил что-то еще.