таблица с асинхронной загрузкой

Question

Время загрузки в базу данных занимает 3-5 секунд. так что сейчас я просто хочу загрузить изображение или что-то еще в мою таблицу, пока мои данные извлекаются. Можно ли сделать это в JavaScript?

Здесь моя кнопка для запуска загрузки и таблицы для чтения:

<button style="float:right" type="button" onclick="LoadDB()" class="btn btn-primary">Load DB</button>

 <table class="sortable" id="DB">
    <thead>
        <tr>
            <th>Names</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td></td>
            <td></td>
        </tr>

    </tbody>
</table>

скрипт для заполнения данных таблицей:

function LoadDB() {        

        $.ajax({
            url: '/Home/ReadDB',
            type: 'GET',

            dataType: 'json',
            success: function (data) {
                var row = '';
                $.each(data, function (i, item) {
                    row += '<tr><td style="display:none;"  >' + item.Name + '</td><td>' + item.Age
                        + '</td><td width="50%">' + '<button style ="width:80px" type="button" class="btn btn-primary"> Add </button >' + '</td></tr>';

                });
                console.log(row)
                $('.sortable#DB2 tbody').html(row); // override previous results              
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

    }

Answer 1

Измените ваш запрос ajax следующим образом, чтобы показать загрузочное изображение до загрузки данных из базы данных, вызвав функцию image_loader. После получения ответа ajax изображение будет заменено данными.

function image_loader()
{
$(".sortable#DB2 tbody").html("<img src='loading.gif' alt='Loading...' >");
}

function LoadDB() {        
    $.ajax({
        url: '/Home/ReadDB',
        type: 'GET',
        start: image_loader(),
        dataType: 'json',
        success: function (data) {
            var row = '';
            $.each(data, function (i, item) {
                row += '<tr><td style="display:none;"  >' + item.Name + '</td><td>' + item.Age
                    + '</td><td width="50%">' + '<button style ="width:80px" type="button" class="btn btn-primary"> Add </button >' + '</td></tr>';

            });
            console.log(row)
            $('.sortable#DB2 tbody').html(row); // override previous results              
        },
        error: function (jqXhr, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });

}

Для получения дополнительной информации о методе запуска в Jquery AJAX вы можете посмотреть здесь