Поместить сообщение Обработка вверху таблицы в таблицы данных с существующими данными?

Question

В моем приложении laravel 5.7 я использую библиотеку "yajra / laravel-datatables-oracle": "~ 8.0" и читаю эту https://m.datatables.net/forums/discussion/25666/how-to-customize-the-processing-message

I modified processing message with style :
.dataTables_processing {
  margin-top: -80px !important;
  padding: 70px !important;
  background: #F5F8FA !important;
  color:    blue !important;
  border: 2px dotted darkgrey;
  border-radius: 3px !important;
  font-size: xx-large !important;
  opacity : 1 !important;
  text-decoration: none;
}

, и она работает, и я получаю данные при открытии страницыс пустой областью данных.

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

  vertical-align: top;
  vert-align: top;

Но не удалось.

HTML-код моей области данных:

<div class="table-responsive">
   <div id="get-vote-dt-listing-table_wrapper"
        class="dataTables_wrapper no-footer">
      <div id="get-vote-dt-listing-table_filter" class="dataTables_filter"
           style="display: none;"><label>Search:<input type="search" class=""
                                                       placeholder=""
                                                       aria-controls="get-vote-dt-listing-table"></label>
      </div>
      <div id="get-vote-dt-listing-table_processing"
           class="dataTables_processing" style="display: block;">Loading
         votes...
      </div>
      <table class="table table-bordered table-striped text-primary dataTable no-footer"
             id="get-vote-dt-listing-table" role="grid"
             aria-describedby="get-vote-dt-listing-table_info">
         <thead>
         <tr role="row">
            <th class="details-control sorting_disabled" rowspan="1"
                colspan="1" style="width: 47px;">+
            </th>
            <th class="sorting" tabindex="0"
                aria-controls="get-vote-dt-listing-table" rowspan="1"
                colspan="1" style="width: 59px;">Id
            </th>
            <th class="sorting" tabindex="0"
                aria-controls="get-vote-dt-listing-table" rowspan="1"
                colspan="1" style="width: 106px;">Name
            </th>
            <th class="sorting" tabindex="0"
                aria-controls="get-vote-dt-listing-table" rowspan="1"
                colspan="1" style="width: 113px;">Status
            </th>
            <th class="sorting" tabindex="0"
                aria-controls="get-vote-dt-listing-table" rowspan="1"
                colspan="1" style="width: 125px;">Is Quiz
            </th>
            <th class="sorting" tabindex="0"
                aria-controls="get-vote-dt-listing-table" rowspan="1"
                colspan="1" style="width: 219px;">Vote Category
            </th>
            <th class="sorting" tabindex="0"
                aria-controls="get-vote-dt-listing-table" rowspan="1"
                colspan="1" style="width: 178px;">Created At
            </th>
            <th class="sorting_disabled" rowspan="1" colspan="1"
                style="width: 28px;"></th>
            <th class="sorting_disabled" rowspan="1" colspan="1"
                style="width: 29px;"></th>
         </tr>
         </thead>
         <tbody></tbody>
      </table>
      <div class="dataTables_info" id="get-vote-dt-listing-table_info"
           role="status" aria-live="polite" style="display: none;"></div>
      <div class="dataTables_paginate paging_simple_numbers"
           id="get-vote-dt-listing-table_paginate"></div>
   </div>
</div>

Что вернокак с изменениями стиля?

Загруженный блок # 1

Я загрузил живой пример на http://demo2.nilov -sergey-demo-apps.tk / login

Это под учетными данными admin@demo.com 111111 после этого http://demo2.nilov -sergey-demo-apps.tk / admin / box-rooms

при загрузкесообщение страницы отображается в течение 1-2 секунд

Если в поле фильтра «Введите номер ячейки» введите значение «001» и нажмите «Поиск», я добавил 30-секундную задержку для отладки в браузере.Вам нужно прокрутить вниз, чтобы увидеть сообщение об обработке ...

Спасибо!

Answer 1

Проблема только с добавлением top: 0 состоит в том, что вы скрываете свой виджет «Показать [количество] записей»:

в производственном приложенииобычно считается плохим UX, чтобы скрыть виджеты, которые могут позже использоваться клиентами.Если вы согласны, вы захотите добавить еще несколько вещей:

#get-storage-space-dt-listing-table_processing {
  top: -10px;
  width: auto;
  margin: 0;
  transform: translateX(-50%);
}

Это позволит 'Show [num] entry' снова быть видимым:

Answer 2

Чтобы поместить сообщение обработки в верхнюю часть таблиц данных, а не в середину, вы можете сделать это таким образом, используя div.dataTables_wrapper div.dataTables_processing и top:0 (или top:-10, если вы хотите см. Заголовки во время загрузки таблицы):

div.dataTables_wrapper div.dataTables_processing {
  top: 0;
}

JSFiddle: https://jsfiddle.net/0usjep4r/

^{(запрос ajax DataTables является извлечением гироскопа и былсозданный им. Я просто изменил его, чтобы получить желаемый результат.)}