<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bootstrap 3 DataTable with Attractive 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>
/* Pulsating dots loader */
#loaderOverlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255, 255, 255, 0.6);
z-index: 1100;
display: flex;
justify-content: center;
align-items: center;
}
.loader-pulsating-dots {
display: flex;
gap: 10px;
}
.loader-pulsating-dots div {
width: 18px;
height: 18px;
background-color: #337ab7; /* Bootstrap primary blue */
border-radius: 50%;
animation: pulse 1.2s infinite ease-in-out;
}
.loader-pulsating-dots div:nth-child(1) {
animation-delay: 0s;
}
.loader-pulsating-dots div:nth-child(2) {
animation-delay: 0.2s;
}
.loader-pulsating-dots div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes pulse {
0%, 80%, 100% {
transform: scale(0.7);
opacity: 0.7;
}
40% {
transform: scale(1);
opacity: 1;
}
}
</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-pulsating-dots">
<div></div><div></div><div></div>
</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(); }
// On page load loader hidden so page clickable
hideLoader();
// Add New
$('#btnAddNew').on('click', function() {
showLoader();
setTimeout(function() {
hideLoader();
$('#modalLabel').text('Add New Entry');
$('#formData')[0].reset();
$('#eid').val('');
$('#addEditModal').modal('show');
}, 700);
});
// Edit
$('#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');
}, 700);
});
// Delete
$('#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();
}, 700);
}
});
// Form submit
$('#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');
}, 700);
});
});
</script>
</body>
</html>
No comments:
Post a Comment