Data Table Structure
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="mystyle.css">
<title>Hello, world!</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-color">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
<div class="d-flex">
<div class="kkjk">
<i class="fi fi-ss-cowbell"></i>
</div>
<div class="container">
<div class="avatar-upload">
<div class="avatar-edit">
<input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
<label for="imageUpload"></label>
</div>
<div class="avatar-preview">
<div id="imagePreview"
style="background-image: url('http://i.pravatar.cc/500?img=7');">
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1"
data-bs-toggle="dropdown" aria-expanded="false">
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="#">Admin Login</a>
<div class="d-flex Time_line">
<h1 class="mr-5">Your 3 Days subscriber</h1>
<div>
<buton class="btn btn-danger danggger"><i class="fi fi-ss-cowbell"></i> subscriber</buton>
</div>
</div>
</div>
</nav>
</header>
<main>
<!-- <div class="d-flex justify-content-center align-items-center bg-light"> -->
<div class="container">
<div class="">
<nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab"
data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home"
aria-selected="true"><i class="fi fi-ss-user-add"></i> Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile"
type="button" role="tab" aria-controls="nav-profile" aria-selected="false"> <i
class="fi fi-ss-search-alt"></i> Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact"
type="button" role="tab" aria-controls="nav-contact" aria-selected="false"> <i
class="fi fi-ss-stats"></i> Contact</button>
</div>
</nav>
<div class="tab-content p-3 border bg-light card p-3 shadow" id="nav-tabContent">
<div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="container">
<div class="text-end">
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="row mt-2">
<table id="example" class="table table-striped">
<thead><tr><th class="sorting sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending" aria-sort="ascending" style="width: 154.653px;">Name</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Desgination: activate to sort column ascending" style="width: 290.59px;">Desgination</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Phone Number: activate to sort column ascending" style="width: 361.962px;">Phone Number</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="width: 144.028px;">Email</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Password: activate to sort column ascending" style="width: 236.58px;">Password</th></tr></thead>
<tbody><tr class="odd"><td class="sorting_1">Suresh Kumar</td><td>Junior Doctor</td><td>9564354785</td><td>suresh@gmail.com</td><td>suresh@123</td></tr><tr class="even"><td class="sorting_1">Suresh Kumar</td><td>Junior Doctor</td><td>9564354785</td><td>suresh@gmail.com</td><td>suresh@123</td></tr><tr class="odd"><td class="sorting_1">Suresh Kumar</td><td>Junior Doctor</td><td>9564354785</td><td>suresh@gmail.com</td><td>suresh@123</td></tr><tr class="even"><td class="sorting_1">Suresh Kumar</td><td>Junior Doctor</td><td>9564354785</td><td>suresh@gmail.com</td><td>suresh@123</td></tr><tr class="odd"><td class="sorting_1">Suresh Kumar</td><td>Junior Doctor</td><td>9564354785</td><td>suresh@gmail.com</td><td>suresh@123</td></tr><tr class="even"><td class="sorting_1">Suresh Kumar</td><td>Junior Doctor</td><td>9564354785</td><td>suresh@gmail.com</td><td>suresh@123</td></tr></tbody>
</table>
</div>
<!-- <content></content> -->
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<p><strong>This is some placeholder content the Profile tab's associated content.</strong>
Clicking another tab will toggle the visibility of this one for the next.
The tab JavaScript swaps classes to control the content visibility and styling. You can use
it with
tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<p><strong>This is some placeholder content the Contact tab's associated content.</strong>
Clicking another tab will toggle the visibility of this one for the next.
The tab JavaScript swaps classes to control the content visibility and styling. You can use
it with
tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div>
</div>
</div>
</div>
</main>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="employeeAddForm">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" name="name" id="name" class="form-control" aria-describedby="name">
</div>
<div class="mb-3">
<label for="designation" class="form-label">Desgination</label>
<input type="text" name="designation" id="designation" class="form-control" aria-describedby="designation">
</div>
<div class="mb-3">
<label for="phoneNumber" class="form-label">Phone Number</label>
<input type="text" name="phoneNumber" id="phoneNumber" class="form-control" aria-describedby="phoneNumber">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" name="email" id="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" name="password" id="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="modal-footer">
<button type="button" id="addEmpButton" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function () {
readURL(this);
});
</script>
<script>
$(document).ready(function () {
const dataSet = [
{ "name": "Suresh Kumar", "designation": "Junior Doctor", "phoneNumber": "9564354785", "email": "suresh@gmail.com", "password": "suresh@123"},
{ "name": "Suresh Kumar", "designation": "Junior Doctor", "phoneNumber": "9564354785", "email": "suresh@gmail.com", "password": "suresh@123"},
{ "name": "Suresh Kumar", "designation": "Junior Doctor", "phoneNumber": "9564354785", "email": "suresh@gmail.com", "password": "suresh@123"},
{ "name": "Suresh Kumar", "designation": "Junior Doctor", "phoneNumber": "9564354785", "email": "suresh@gmail.com", "password": "suresh@123"},
{ "name": "Suresh Kumar", "designation": "Junior Doctor", "phoneNumber": "9564354785", "email": "suresh@gmail.com", "password": "suresh@123"},
{ "name": "Suresh Kumar", "designation": "Junior Doctor", "phoneNumber": "9564354785", "email": "suresh@gmail.com", "password": "suresh@123"},
];
const dataTable = $('#example').DataTable({
columns: [
{ data: 'name', title: 'Name' },
{ data: 'designation', title: 'Desgination' },
{ data: 'phoneNumber', title: 'Phone Number' },
{ data: 'email', title: 'Email' },
{ data: 'password', title: 'Password' },
],
// paging: false,
language: {
paginate: {
next: '<span><i class="bi bi-caret-right"></i></span>',
previous: '<span><i class="bi bi-caret-left"></i></span>'
}
},
});
// dataTable.rows.add(dataSet);
// dataTable.draw();
$('#addEmpButton').click(function() {
const formValue = {
name: $("#name").val(),
designation: $('#designation').val(),
phoneNumber: $('#phoneNumber').val(),
email: $('#email').val(),
password: $('#password').val(),
};
console.log(formValue);
dataSet.push(formValue);
dataTable.clear().rows.add(dataSet).draw();
$('#exampleModal').modal('hide');
// console.log(formValue);
});
});
</script>
</body>
</html>
* {
padding: 0;
margin: 0;
}
.bg-color {
background-color: #1A4663;
color: #ffffff;
}
body {
background: #F9FAFC;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 20px;
text-align: center;
margin: 20px 0 20px;
}
.Time_line h1 {
white-space: nowrap;
}
h1 small {
display: block;
font-size: 15px;
padding-top: 8px;
color: gray;
}
.avatar-upload {
position: relative;
}
.avatar-upload .avatar-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
}
.avatar-upload .avatar-edit input {
display: none;
}
.avatar-upload .avatar-edit input+label {
display: inline-block;
width: 34px;
height: 34px;
}
.avatar-upload .avatar-preview {
width: 50px;
height: 50px;
position: relative;
border-radius: 100%;
border: 6px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview>div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.kkjk {
place-self: center;
}
.dropdown {
place-self: center;
}
.danggger {
display: flex;
padding: 14px;
}
.danggger i {
padding-right: 10px;
}
.mr-5 {
margin: 10px 12px;
place-self: center;
}
main {
margin-top: 10px;
}
th {
text-align: center !important;
background-color:#1A4663 !important;
color:white !important;
}
td {
text-align: center !important;
}
.glyphicon {
margin-right: 10px
}
.form-alert {
margin-top: 10px
}
.form-inline {
margin-bottom: 20px
}
.dataTables_length {
display: none;
}
#example_filter {
display: none;
}
.dropdown-menu[data-bs-popper] {
right: 0 !important;
left: auto !important;
}
.nav-link {
margin-right: 15px;
}
.nav-tabs .nav-link {
background-color: white;
color: gray;
padding: 10px 34px;
border-radius: 19px;
border: 1px solid #e7e5e5;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
background-color: #4794FE;
color: white;
}
.nav-tabs {
border-bottom: 0px;
}
.add_user {
height: max-content;
padding: 10px;
}
.jjkhu {
display: flex;
justify-content: space-between;
}
.table-dark {
--bs-table-bg: #1A4663;
}
th:first-child {
border-radius: 10px 0 0 0px;
}
th:last-child {
border-radius: 0 10px 0px 0;
}
.sorting_1 .form-check-input {
margin-right: 17px;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
color: white;
}
.table.dataTable thead>tr>th.sorting:before,
.table.dataTable thead>tr>th.sorting::after {
display: none;
}
.bbtn{
background-color: #4794fe;
}
.odd{
--bs-table-bg:#ffffff;
--bs-table-striped-bg:#ffffff;
}
.even{
--bs-table-bg:#F7FAFF;
}
#example_paginate{
position: absolute;
bottom: -25%;
right: 0;
}
.dataTables_info{
position: absolute;
bottom: -25%;
left: 0;
}
#example{
overflow: auto;
/* display: block; */
/* media */
}
table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc{
padding-right:0px !important;
}
table.dataTable.no-footer{
border: 0px solid rgba(0, 0, 0, 0.3)!important;
}