Показать модальные, прежде чем DataTables JQuery запускает ASP NET - PullRequest
0 голосов
/ 25 февраля 2019

Я использую DataTables JQuery 1.10.18 в проекте ASP NET.

Мне нужно показать модальное диалоговое окно, ДО того, как в datatable есть какие-либо данные, и спрятать его ПОСЛЕ того, как завершится процесс Datatables.

Эта вторая часть разрешается с помощью

initComplete: function (settings, json) {
           $('#loading').modal('hide');
        }

, где 'loading' - это идентификатор модала.

Однако моя проблема заключается в том, чтобы показать его до того, как все данные будут связаны ввид сетки или, в любом случае, после того, как он был привязан к виду сетки, но стили таблиц данных НЕ были применены.

Я хочу сделать что-то вроде этого:

получить данные - привязать к gridview- ПОКАЗАТЬ МОДАЛЬНЫЕ - применять стили Datatable - закрывать модальные.

Вся логика применения Datatables уже готова и работает.У меня только проблема в том, что для применения требуется много секунд.

Конечно, я пробовал

       $('#loading').modal('show');

перед вызовом функций, которые конфигурируют таблицы данных, но модал показывает ПОСЛЕ всехКонфигурация выполнена.Я также пытался использовать обещания, обратные вызовы, settimeout, но оно всегда было одинаковым.

Уточнение

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

1 Ответ

0 голосов
/ 26 февраля 2019

Попробуй это!поместите вашу таблицу данных в div следующим образом:

<div id="tableDiv" hidden>
// your table
</div>

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

$("#yourtable").prop("hidden",false);

Редактировать: Также используйте этофункция, чтобы знать, когда ваша таблица завершит событие рисования

$('#someTable').on( 'draw.dt', function(){
     if (! example.data().any() ) {
          console.log("empty");
        }else {
          console.log("not empty"); 
         //display your table here ?
        }
    });

Надеюсь, это поможет

...