show loding data in bootstrap table
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I use bootstrap-table through the fresh-bootstrap-table template
This is the html page that I created
<!doctype html>
<html lang=”en” dir=”rtl”>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<!– Style –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css” rel=”stylesheet” />
<link href=”assets/css/fresh-bootstrap-table.css” rel=”stylesheet” />
<!– Fonts and icons –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css” rel=”stylesheet”>
<link href=”http://fonts.googleapis.com/css?family=Cairo:400,700,300″ rel=”stylesheet” type=”text/css”>
</head>
<body>
<div class=”fresh-table full-color-blue full-screen-table”>
<!–
Available colors for the full background: full-color-blue, full-color-azure, full-color-green, full-color-red, full-color-orange
Available colors only for the toolbar: toolbar-color-blue, toolbar-color-azure, toolbar-color-green, toolbar-color-red, toolbar-color-orange
–>
<div class=”toolbar”>
<button id=”alertBtn” onclick=”location.href=’https://numberozo.com’;” class=”btn btn-default”>بحث جديد</button>
<button type=”button” onclick=’moredata()’ class=”btn btn-secondary”>المذيد من البيانات</button>
</div>
<table id=”fresh-table” class=”table” data-show-export=”true”>
<thead>
<th data-field=”name” class=”text-center”>name</th>
<th data-field=”phone” class=”text-center”>phone</th>
<th data-field=”actions” class=”text-center” data-formatter=”operateFormatter”
data-events=”operateEvents”>action</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<form id=’myform’ action=’https://numberozo.com/results/’ method=’post’>
<input id=’usernumber’ type=’hidden’ name=’num’ value=”>
<input type=’hidden’ name=’country’ value='<?php echo $info[0][“cantry”] ?>’>
</form>
<script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.20.2/bootstrap-table.min.js”></script>
<script type=”text/javascript”>
var $table = $(‘#fresh-table’)
var $alertBtn = $(‘#alertBtn’)
window.operateEvents = {
‘click .like’: function(e, value, row, index) {
console.log(value, row, index)
},
‘click .edit’: function(e, value, row, index) {
console.log(value, row, index)
},
‘click .remove’: function(e, value, row, index) {
$table.bootstrapTable(‘remove’, {
field: ‘id’,
values: [row.id]
})
}
}
function operateFormatter(value, row, index) {
return “<a rel=’tooltip’ title=’رسالة وتساب’ class=’table-action like’ href=’https://wa.me/” + row.phone +
“‘ title=’Like’> <i class=’fab fa-whatsapp fa-lg’></i></a> <a rel=’tooltip’ title=’اتصال’ class=’table-action edit’ href=’tel:” +
row.phone +
“‘ title=’Edit’><i class=’fas fa-phone fa-lg’></i></a><a rel=’tooltip’ title=’مذيد من الأسماء’ class=’table-action remove’ href=’#’ onclick=’formSubmit(” +
row.phone + “)’ title=’مذيد من الأسماء’><i class=’fas fa-info-circle fa-lg’></i></a>”
}
$(function() {
$table.bootstrapTable({
classes: ‘table table-hover table-striped’,
toolbar: ‘.toolbar’,
search: true,
showRefresh: false,
showToggle: true,
showColumns: true,
pagination: true,
striped: false,
sortable: false,
showExport : true,
height: $(window).height(),
pageSize: 8,
pageList: [8, 10, 25, 50, 100],
formatShowingRows: function(pageFrom, pageTo, totalRows) {
return ”
},
formatRecordsPerPage: function(pageNumber) {
return pageNumber + ‘ عدد النتائج’
}
})
$(window).resize(function() {
$table.bootstrapTable(‘resetView’, {
height: $(window).height()
})
})
})
function formSubmit(phone) {
document.getElementById(‘usernumber’).value = phone;
document.getElementById(“myform”).submit();
}
function moredata() {
//document.getElementById(“moredata”).submit();
}
$(document).ready(function() {
//Function call
setname();
});
function setname() {
document.getElementsByClassName(“search-input”)[0].placeholder = “بحث في النتائج”;
document.getElementsByName(“toggle”)[0].title = “تغير العرض”;
$table.bootstrapTable(‘resetView’, {
height: $(window).height()
});
}
$.getJSON(“http://localhost/num/homep/new-api-number.php”)
.done(function(data) {
$($table).bootstrapTable(‘load’, data);
})
</script>
</body>
</html>
I am displaying JSON data correctly through this code
$.getJSON(“http://localhost/num/homep/new-api-number.php”)
.done(function(data) {
$($table).bootstrapTable(‘load’, data);
})
The problem is that it does not show “loading” until the data appears, but it shows No matching records found
i traying to add
$table.bootstrapTable(‘showLoading’);
but disnt work
How can I show that the data is being downloaded, and if the download is not done, another text appears stating that there is no data
أضف إجابة