<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.7/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css"/>
</head>
<body>
<h1>My First Heading</h1>
<div class="top-panel">
<a href="javascript:void(0);" class="btn btn-primary" onclick="addData()">Add New User</a>
</div>
<script>
<div class="modal fade" id="userDataModal" tabindex="-1" aria-labelledby="userAddEditModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="userModalLabel">Add New User</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form name="userDataFrm" id="userDataFrm">
<div class="modal-body">
<div class="frm-status"></div>
<div class="mb-3">
<label for="userFirstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="userFirstName" placeholder="Enter firstname">
</div>
<div class="mb-3">
<label for="userLastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="userLastName" placeholder="Enter lastname">
</div>
<div class="mb-3">
<label for="userEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="userEmail" placeholder="Enter email">
</div>
<div class="form-radio">
<label>Gender:</label>
<input type="radio" name="userGender" id="userGender_1" value="Male" checked> Male
<input type="radio" name="userGender" id="userGender_2" value="Female"> Female
</div>
<div class="mb-3">
<label for="userCountry" class="form-label">Country</label>
<input type="text" class="form-control" id="userCountry" placeholder="Enter country">
</div>
<div class="form-radio">
<label>Status:</label>
<input type="radio" name="userStatus" id="userStatus_1" value="1" checked> Active
<input type="radio" name="userStatus" id="userStatus_2" value="0"> Inactive
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="userID" value="0">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="submitUserData()">Submit</button>
</div>
</form>
</div>
</div>
</div>
<table id="dataList" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Gender</th>
<th>Country</th>
<th>Created</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Gender</th>
<th>Country</th>
<th>Created</th>
<th>Status</th>
<th>Action</th>
</tr>
</tfoot>
</table>
var table = $('#dataList').DataTable({
"processing": true,
"serverSide": true,
"ajax": "fetchData.php",
"columnDefs": [
{ "orderable": false, "targets": 7 }
]
});
$(document).ready(function(){
// Draw the table
table.draw();
});
function addData(){
$('.frm-status').html('');
$('#userModalLabel').html('Add New User');
$('#userGender_1').prop('checked', true);
$('#userGender_2').prop('checked', false);
$('#userStatus_1').prop('checked', true);
$('#userStatus_2').prop('checked', false);
$('#userFirstName').val('');
$('#userLastName').val('');
$('#userEmail').val('');
$('#userCountry').val('');
$('#userID').val(0);
$('#userDataModal').modal('show');
}
</script>
<p>My first paragraph.</p>
</body>
</html>