在DataTables中存在数据的情况下，将处理信息放在表格顶部？

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 上上传了一个实时示例。

登录凭据为 [e-mail] 111111， 然后进入 http://demo2.nilov-sergey-demo-apps.tk/admin/box-rooms。

在上传页面，消息会在1-2秒内显示出来。

如果在筛选字段“输入盒子房间号”中输入值“001”，并单击“搜索”，我添加了30秒延迟以进行浏览器调试。您需要向下滚动以查看处理消息...

谢谢！

- mstdmstd

Answer 1

要将处理消息置于数据表格顶部而不是中间，可以使用以下方式：div.dataTables_wrapper div.dataTables_processing和top:0（如果您想在加载表格时查看标题，则为top:-10）：

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

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

^{(DataTables的ajax请求由gyrocode提供，并由他创建。我只是对其进行了修改以获得所需的结果。)}

- Alexandre Elshobokshy

Answer 2

只添加 top: 0 的问题在于会遮挡“显示 [num] 项”的小部件。

在生产应用中，通常认为将以后可能被客户使用的小部件隐藏起来是不良的用户体验。如果您同意这种观点，您需要添加一些其他内容：

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

这将使“显示[num]条目”再次可见：

- Andy Hoffman