CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4bootstrap-table
Rofellos
Rofellos

Reputation: 318

Loading, please wait message doesn't hide after the data has been loaded

I have this bootstrap-table data table, and after all the data are loaded, the message continues to display. Anyone has any idea why this is happenning? Thank you in advance.

<table class='table table-striped table-hover' id='main_table' data-url={{ db_json }} data-click-to-select='true' data-filter-control="true" clickToSelect='true'>
    <thead>
        <tr>
          <th data-checkbox="true" data-checkbox-enabled="true"></th>
          <th data-field="ID" data-visible="false">Id</th>
          <th data-field="data1" data-filter-control="input">data1</th>
          <th data-field="data2" data-filter-control="select">data2</th>
          <th data-field="data3" data-filter-control="select">data3</th>

        </tr>
    </thead>
</table>

enter image description here

Upvotes: 4

Views: 5197

Answers (3)

ronrun
ronrun

Reputation: 1234

I had the same problem, just solved. My problem is that I added media

At first I used this, which was ok.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

Then I save the file to my local

<link  href="{{ asset('ocadmin-asset/stylesheet/bootstrap-table-1.21.2.min.css') }}" rel="stylesheet" media="screen">

Nothing wrong on screen, but when printing, the loading message appears. This is because media="screen" should not exist.

Upvotes: 0

PiBer2
PiBer2

Reputation: 179

What worked for me was overriding Bootstrap´s CSS with my own. In a yourname.css file that has to be declared in HEAD after the Bootstrap CSS link, include this:

.fixed-table-loading {
    visibility: hidden;
    top: 0px;
    display: none;
}

.loading-wrap {
    visibility: hidden;
    display: none;
}

.table-loading {
    visibility: hidden;
    display: none;
}

.loading {
    visibility: hidden;
    display: none;
}

This prevents the div that contains the "Loading, please wait" from appearing.

Upvotes: 1

Csharls
Csharls

Reputation: 570

I was facing the same problem, the solution I found was to include the css file from bootstraptable on the head section of the html file.

<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>

also if you are working with the local files, do not forget to refer to the bootstrap-table.min.css file.

Upvotes: 10

Related Questions