【发布时间】：2018-12-07 11:26:54
【问题描述】：
我正在研究如何在页面上加载数据之前显示加载器。 我已经成功创建了加载器，它的工作也很好，我被卡住的地方是加载器加载时我想停用背景，就像用户无法点击任何地方一样 这是我的sn-p
$('.loader').show();
$.ajax({
url: "TestServlet",
method: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: {
fromdate: $("#startdate").val(),
todate: $("#enddate").val(),
outlet: $("#all").val()
},
success: function(tableValue) {
console.log("test", tableValue);
addTable(tableValue);
},
complete: function() {
$('.loader').hide();
}
});
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-bottom: 16px solid blue;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<div class="loader"></div>
<div id="newTable"></div>我在这里放样品JSON，所以如果有人想检查他们可以轻松检查
data = [
{
"amount": 476426,
"billdate": "2018-09-01",
"outlet": "JAYANAGAR"
},
{
"amount": 92141,
"billdate": "2018-09-01",
"outlet": "MALLESHWARAM"
},
{
"amount": 115313,
"billdate": "2018-09-01",
"outlet": "KOLAR"
},
{
"amount": 511153,
"billdate": "2018-09-02",
"outlet": "JAYANAGAR"
},
{
"amount": 115704,
"billdate": "2018-09-02",
"outlet": "MALLESHWARAM"
},
{
"amount": 83597,
"billdate": "2018-09-02",
"outlet": "KOLAR"
},
{
"amount": 167421,
"billdate": "2018-09-03",
"outlet": "JAYANAGAR"
},
{
"amount": 53775,
"billdate": "2018-09-03",
"outlet": "KOLAR"
},
{
"amount": 269712,
"billdate": "2018-09-04",
"outlet": "JAYANAGAR"
},
{
"amount": 58850,
"billdate": "2018-09-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 82999,
"billdate": "2018-09-04",
"outlet": "KOLAR"
}
]
我正在为此使用 j 查询隐藏和显示方法，成功调用后我将其隐藏。
我也想定位我的装载机中心
请有任何想法的人帮助我
【问题讨论】：
标签： javascript jquery html css