<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bootstrap 3 DataTable with Loader & Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" />
<style>
/* Loader spinner style */
.loader-spinner {
border: 8px solid #f3f3f3; /* Light grey */
border-top: 8px solid #337ab7; /* Bootstrap primary blue */
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
/* Overlay for loader */
#loaderOverlay {
display: none; /* hidden initially */
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.6);
z-index: 1100; /* make sure it's higher than modal's 1050 */
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container" style="margin-top:20px;">
<!-- Add New Button -->
<button id="btnAddNew" class="btn btn-primary">Add New</button>
<!-- DataTable -->
<table id="example" class="table table-striped table-bordered" style="width:100%; margin-top:20px;">
<thead>
<tr><th>EID</th><th>Name</th><th>Age</th><th>Action</th></tr>
</thead>
<tbody>
<tr>
<td>1</td><td>John Doe</td><td>28</td>
<td>
<a href="#" class="edit"><span class="glyphicon glyphicon-edit"></span></a>
<a href="#" class="delete"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
<tr>
<td>2</td><td>Jane Smith</td><td>34</td>
<td>
<a href="#" class="edit"><span class="glyphicon glyphicon-edit"></span></a>
<a href="#" class="delete"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Loader overlay -->
<div id="loaderOverlay">
<div class="loader-spinner"></div>
</div>
<!-- Modal -->
<div id="addEditModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form id="formData">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabel">Add New Entry</h4>
</div>
<div class="modal-body">
<input type="hidden" id="eid" name="eid" />
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" class="form-control" required />
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age" class="form-control" required min="0" />
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnSave" class="btn btn-success">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable();
function showLoader() { $('#loaderOverlay').fadeIn(); }
function hideLoader() { $('#loaderOverlay').fadeOut(); }
// Ensure loader is hidden on page load so page is clickable
hideLoader();
// Add New button click
$('#btnAddNew').on('click', function() {
showLoader();
setTimeout(function(){
hideLoader();
$('#modalLabel').text('Add New Entry');
$('#formData')[0].reset();
$('#eid').val('');
$('#addEditModal').modal('show');
}, 1000);
});
// Edit button click
$('#example tbody').on('click', 'a.edit', function(e) {
e.preventDefault();
showLoader();
var data = table.row($(this).parents('tr')).data();
setTimeout(function() {
$('#eid').val(data[0]);
$('#name').val(data[1]);
$('#age').val(data[2]);
$('#modalLabel').text('Edit Entry');
hideLoader();
$('#addEditModal').modal('show');
}, 1000);
});
// Delete button click
$('#example tbody').on('click', 'a.delete', function(e) {
e.preventDefault();
var row = $(this).parents('tr');
if(confirm('Are you sure you want to delete this entry?')) {
showLoader();
setTimeout(function() {
table.row(row).remove().draw();
hideLoader();
}, 1000);
}
});
// Form submit handler
$('#formData').on('submit', function(e) {
e.preventDefault();
showLoader();
var eid = $('#eid').val();
var name = $('#name').val();
var age = $('#age').val();
setTimeout(function() {
if(eid) {
table.rows().every(function() {
var d = this.data();
if(d[0] == eid) {
d[1] = name;
d[2] = age;
this.data(d).draw();
}
});
} else {
var nextId = table.column(0).data().length + 1;
table.row.add([
nextId,
name,
age,
'<a href="#" class="edit"><span class="glyphicon glyphicon-edit"></span></a> ' +
'<a href="#" class="delete"><span class="glyphicon glyphicon-trash"></span></a>'
]).draw(false);
}
hideLoader();
$('#addEditModal').modal('hide');
}, 1000);
});
});
</script>
</body>
</html>
No comments:
Post a Comment