Bootstrap Table loading progressbar overlay

Question

У меня есть таблица где-то в моем HTML и Pagination, которая загружает следующую страницу с помощью ajax. При загрузке данных я хочу наложить div с помощью индикатора выполнения Bootstrap.

function loadingTable(divID) { 
 

 
\t var html = " <div class='table-loading-overlay'>" 
 
\t \t + " <div class='table-loading-inner'>" 
 
\t \t + "<div class=\"col-xs-4 col-xs-offset-4\">" 
 
\t \t + "<div class=\"progress\"> " 
 
\t \t + "<div class=\"progress-bar progress-bar-striped progress-bar-streit active\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\">" 
 
\t \t + "  <span class=\"sr-only\">Loading...</span>" 
 
\t \t + " </div>" 
 
\t \t + " </div>" 
 
\t \t + " </div>" 
 
\t \t + " </div>" 
 
\t \t + " </div>"; 
 
\t $('#' + divID).append(html); 
 
} 
 
function prevPage(){} 
 
function nextPage(){}

.table-loading-inner { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.table-loading-overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    display: block; 
 
    z-index: 10; 
 
    background: #000000; 
 
    z-index: 100; 
 
    opacity: 0.5; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    
 
    <div id="userList"> 
 
\t \t \t <table class="table table-striped table-hover"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t <th>Status</th> 
 
\t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t \t <tr> 
 
        <td>Test 1</td> 
 
        <td>active</td> 
 
        </tr>      
 
\t \t \t \t \t <tr> 
 
        <td>Test 2</td> 
 
        <td>active</td> 
 
        </tr>      
 
\t \t \t \t \t <tr> 
 
        <td>Test 3</td> 
 
        <td>active</td> 
 
        </tr> 
 
\t \t \t \t \t <tr> 
 
        <td>Test 4</td> 
 
        <td>active</td> 
 
        </tr> 
 
\t \t \t \t \t <tr> 
 
        <td>Test 5</td> 
 
        <td>active</td> 
 
        </tr> 
 
\t \t \t \t </tbody> 
 
\t \t \t </table> 
 
\t \t \t <div> 
 
\t \t \t \t <span style="float:right;"> 10 Users <i class="fa fa-list"></i></span> 
 
\t \t \t </div> 
 
\t \t \t <div class="paginator"> 
 
\t \t \t \t <span class="btn btn-default" onclick="prevPage();loadingTable('userList');"> prev</span> 
 
\t \t \t \t <span class="btn btn-default" onclick="nextPage();loadingTable('userList');">next</span> 
 
\t \t \t </div> 
 
\t \t </div> \t \t

Как получить table-loading-overlay над столом? Поскольку таблица может быть везде в HTML, я не могу использовать абсолютную позицию ...

Answer 1

Вы можете предоставить родительскому div фиксированное положение, если вы не хотите использовать абсолютный позиционированный div. Это должно действительно работать. Не имеет значения, где находится таблица в документе.

Вот ваш пример с фиксированным позиционированным родителем.

function loadingTable(divID) { 
 

 
    var html = " <div class='table-loading-overlay'>" 
 
    + " <div class='table-loading-inner'>" 
 
    + "<div class=\"col-xs-4 col-xs-offset-4\">" 
 
    + "<div class=\"progress\"> " 
 
    + "<div class=\"progress-bar progress-bar-striped progress-bar-streit active\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\">" 
 
    + "  <span class=\"sr-only\">Loading...</span>" 
 
    + " </div>" 
 
    + " </div>" 
 
    + " </div>" 
 
    + " </div>" 
 
    + " </div>"; 
 

 
    $('#' + divID).append(html); 
 
    $('.table-loading-overlay').css('height', $('#' + divID).height() + 'px'); 
 
    $('.table-loading-inner').css('padding-top', ($('#' + divID).height()/2) + 'px'); 
 
} 
 
function prevPage(){} 
 
function nextPage(){}

.table-loading-overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 10; 
 
    background: #000000; 
 
    opacity: 0.5; 
 
} 
 

 
.table-loading-inner { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div id="userList"> 
 
    <table class="table table-striped table-hover"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Status</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Test 1</td> 
 
     <td>active</td> 
 
     </tr>      
 
     <tr> 
 
     <td>Test 2</td> 
 
     <td>active</td> 
 
     </tr>      
 
     <tr> 
 
     <td>Test 3</td> 
 
     <td>active</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Test 4</td> 
 
     <td>active</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Test 5</td> 
 
     <td>active</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <div> 
 
    <span style="float:right;"> 10 Users <i class="fa fa-list"></i></span> 
 
    </div> 
 
    <div class="paginator"> 
 
    <span class="btn btn-default" onclick="prevPage();loadingTable('userList');"> prev</span> 
 
    <span class="btn btn-default" onclick="nextPage();loadingTable('userList');">next</span> 
 
    </div> 
 
</div>