385 lines
25 KiB
HTML
385 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Crovex - Admin & Dashboard Template</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
|
|
<meta content="" name="author" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="../assets/images/favicon.ico">
|
|
<!-- DataTables -->
|
|
<link href="../../plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../../plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- Responsive datatable examples -->
|
|
<link href="../../plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- App css -->
|
|
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/css/jquery-ui.min.css" rel="stylesheet">
|
|
<link href="../assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/css/metisMenu.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/css/app.min.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
<body>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="mt-0 header-title">Default Datatable</h4>
|
|
<p class="text-muted mb-3">DataTables has most features enabled by
|
|
default, so all you need to do to use it with your own tables is to call
|
|
the construction function: <code>$().DataTable();</code>.
|
|
</p>
|
|
<style media="screen">
|
|
.hidden-x {
|
|
display: none!important;
|
|
}
|
|
</style>
|
|
<div id="datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<table id="datatable" class="table table-bordered dt-responsive nowrap dataTable no-footer dtr-inline" style="border-collapse: collapse; border-spacing: 0px; width: 100%;" role="grid" aria-describedby="datatable_info">
|
|
<thead>
|
|
<tr role="row">
|
|
<th class="sorting_asc" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 149px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th>
|
|
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 230px;" aria-label="Position: activate to sort column ascending">Position</th>
|
|
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 108px;" aria-label="Office: activate to sort column ascending">Office</th>
|
|
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 45px;" aria-label="Age: activate to sort column ascending">Age</th>
|
|
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 97px;" aria-label="Start date: activate to sort column ascending">Start date</th>
|
|
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 75px;" aria-label="Salary: activate to sort column ascending">Salary</th>
|
|
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 75px;" aria-label="Salary: activate to sort column ascending">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr role="row" class="odd">
|
|
<td tabindex="0" class="sorting_1">
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="name" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="position" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="office" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="number" class="form-control" min="1" name="age" value="10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">2001-10-10</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="date" class="form-control" name="start_date" value="2001-10-10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">1000$</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="salary" value="1000">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="edit-btn-x">
|
|
<button class="btn btn-sm btn-info" onclick="makeEditable(this)">Edit</button>
|
|
</span>
|
|
<span class="save-btn-x hidden-x">
|
|
<button class="btn btn-sm btn-success" onclick="saveEditable(this)">Save</button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr role="row" class="odd">
|
|
<td tabindex="0" class="sorting_1">
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="name" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="position" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="office" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="number" class="form-control" min="1" name="age" value="10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">2001-10-10</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="date" class="form-control" name="start_date" value="2001-10-10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">1000$</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="salary" value="1000">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="edit-btn-x">
|
|
<button class="btn btn-sm btn-info" onclick="makeEditable(this)">Edit</button>
|
|
</span>
|
|
<span class="save-btn-x hidden-x">
|
|
<button class="btn btn-sm btn-success" onclick="saveEditable(this)">Save</button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr role="row" class="odd">
|
|
<td tabindex="0" class="sorting_1">
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="name" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="position" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="office" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="number" class="form-control" min="1" name="age" value="10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">2001-10-10</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="date" class="form-control" name="start_date" value="2001-10-10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">1000$</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="salary" value="1000">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="edit-btn-x">
|
|
<button class="btn btn-sm btn-info" onclick="makeEditable(this)">Edit</button>
|
|
</span>
|
|
<span class="save-btn-x hidden-x">
|
|
<button class="btn btn-sm btn-success" onclick="saveEditable(this)">Save</button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr role="row" class="odd">
|
|
<td tabindex="0" class="sorting_1">
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="name" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="position" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="office" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="number" class="form-control" min="1" name="age" value="10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">2001-10-10</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="date" class="form-control" name="start_date" value="2001-10-10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">1000$</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="salary" value="1000">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="edit-btn-x">
|
|
<button class="btn btn-sm btn-info" onclick="makeEditable(this)">Edit</button>
|
|
</span>
|
|
<span class="save-btn-x hidden-x">
|
|
<button class="btn btn-sm btn-success" onclick="saveEditable(this)">Save</button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr role="row" class="odd">
|
|
<td tabindex="0" class="sorting_1">
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="name" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="position" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="office" value="Accountant">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">Accountant</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="number" class="form-control" min="1" name="age" value="10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">2001-10-10</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="date" class="form-control" name="start_date" value="2001-10-10">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-x">1000$</span>
|
|
<span class="input-x hidden-x">
|
|
<input type="text" class="form-control" name="salary" value="1000">
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="edit-btn-x">
|
|
<button class="btn btn-sm btn-info" onclick="makeEditable(this)">Edit</button>
|
|
</span>
|
|
<span class="save-btn-x hidden-x">
|
|
<button class="btn btn-sm btn-success" onclick="saveEditable(this)">Save</button>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<script>
|
|
function makeEditable(node) {
|
|
let tr = node.parentNode.parentNode.parentNode;
|
|
let td = node.parentNode.parentNode;
|
|
let all_text = tr.getElementsByClassName('text-x');
|
|
let all_input = tr.getElementsByClassName('input-x');
|
|
let edit_btn = td.getElementsByClassName('edit-btn-x')[0];
|
|
let save_btn = td.getElementsByClassName('save-btn-x')[0];
|
|
|
|
edit_btn.classList.add('hidden-x');
|
|
save_btn.classList.remove('hidden-x');
|
|
|
|
for(let i of all_text) {
|
|
i.classList.add('hidden-x');
|
|
}
|
|
for(let i of all_input) {
|
|
i.classList.remove('hidden-x');
|
|
}
|
|
// console.log()
|
|
}
|
|
|
|
function saveEditable(node) {
|
|
let tr = node.parentNode.parentNode.parentNode;
|
|
let td = node.parentNode.parentNode;
|
|
let all_text = tr.getElementsByClassName('text-x');
|
|
let all_input = tr.getElementsByClassName('input-x');
|
|
let edit_btn = td.getElementsByClassName('edit-btn-x')[0];
|
|
let save_btn = td.getElementsByClassName('save-btn-x')[0];
|
|
let payload = {};
|
|
|
|
for(let input of tr.getElementsByTagName('input')) {
|
|
payload[input.name] = input.value;
|
|
|
|
if(!input.value) {
|
|
alert(`Empty value is not allowed(${input.name})!`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
$.ajax({
|
|
type : 'POST',
|
|
url : 'ajax.php',
|
|
data : payload,
|
|
success : function(response) {
|
|
if(response.status == 'success') {
|
|
edit_btn.classList.remove('hidden-x');
|
|
save_btn.classList.add('hidden-x');
|
|
|
|
for(let i = 0; i < all_input.length; i++) {
|
|
all_input[i].classList.add('hidden-x');
|
|
all_text[i].innerHTML = all_input[i].getElementsByTagName('input')[0].value+'$';
|
|
}
|
|
for(let i of all_text) {
|
|
i.classList.remove('hidden-x');
|
|
}
|
|
} else {
|
|
alert(response.message);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
<!-- jQuery -->
|
|
<script src="../assets/js/jquery.min.js"></script>
|
|
<script src="../assets/js/jquery-ui.min.js"></script>
|
|
<script src="../assets/js/bootstrap.bundle.min.js"></script>
|
|
<script src="../assets/js/metismenu.min.js"></script>
|
|
<script src="../assets/js/waves.js"></script>
|
|
<script src="../assets/js/feather.min.js"></script>
|
|
<script src="../assets/js/jquery.slimscroll.min.js"></script>
|
|
<!-- Required datatable js -->
|
|
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
|
|
<script src="../../plugins/datatables/dataTables.bootstrap4.min.js"></script>
|
|
<!-- Buttons examples -->
|
|
<script src="../../plugins/datatables/dataTables.buttons.min.js"></script>
|
|
<script src="../../plugins/datatables/buttons.bootstrap4.min.js"></script>
|
|
<script src="../../plugins/datatables/jszip.min.js"></script>
|
|
<script src="../../plugins/datatables/pdfmake.min.js"></script>
|
|
<script src="../../plugins/datatables/vfs_fonts.js"></script>
|
|
<script src="../../plugins/datatables/buttons.html5.min.js"></script>
|
|
<script src="../../plugins/datatables/buttons.print.min.js"></script>
|
|
<script src="../../plugins/datatables/buttons.colVis.min.js"></script>
|
|
<!-- Responsive examples -->
|
|
<script src="../../plugins/datatables/dataTables.responsive.min.js"></script>
|
|
<script src="../../plugins/datatables/responsive.bootstrap4.min.js"></script>
|
|
<script src="../assets/pages/jquery.datatable.init.js"></script>
|
|
<!-- App js -->
|
|
<script src="../assets/js/app.js"></script>
|
|
</body>
|
|
</html>
|