Jump to content

How to center Processing message in laravel-datatables with existing data?


mstdmstdd

Recommended Posts

Hi all,
In my laravel 5.7 application I use "yajra/laravel-datatables-oracle": "~8.0" library and reading this 
https://m.datatables.net/forums/discussion/25666/how-to-customize-the-processing-messageI 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;
}

and it works and I retrieve data on page open with empty data area.

But I refresh data I do not see processing message : it is below(looks like middle of the data area).
I tried to raise with adding to style above :

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

But failed.

The html-code of my data area is :

<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) Which is right way with style modifications?

2) If laravel-datatables-oracle has method to clear data area rows before data retrieving ?
I think that could be helpfull...

Here is live  example at http://demo2.nilov-sergey-demo-apps.tk/login
It is under credentials   admin@demo.com 111111
after that http://demo2.nilov-sergey-demo-apps.tk/admin/box-rooms
on uploading page message is visible within 1-2 seconds
If in filter field “Enter Box Room No.” enter value “001” and click “Search” I added 30 seconds delay for debugging in browser.
You need to scroll down to see processing message...

Thanks!
 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.