CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
YAT
YAT

Reputation: 466

Bootstrap Table loading progressbar overlay

I have an Table somewhere in my HTML and an Pagination that loads the next page with ajax. While loading the data i want to overlay an div with an Bootstrap progress-bar.

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);
}
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">
			<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>

How do I get the table-loading-overlay over the table? As the Table can be everywhere in the HTML I can't use absolute position...

Upvotes: 5

Views: 13683

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

You can give the parent div a fixed position if you don't want to use an absolute positioned div. Which should actually work as well. It should not matter where the table is in the document.

Here is your example with a fixed positioned parent.

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>

Upvotes: 4

Related Questions