<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Details</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 80%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.Attendance {
margin-top: 30px;
margin-left: 13px;
}
</style>
<body>
<div class="container">
<h2 style="text-align: center;">Payment Details</h2>
</div>
<div id="example_wrapper" class="dataTables_wrapper" style="padding: 5%;">
<!-- <h3 style="text-align: center;">All Entry</h3> -->
<table id="example" class="display" style="width:100%;">
<thead>
<tr>
<th>Sl</th>
<th>Date</th>
<th>User Email</th>
<th>Stage</th>
<th>Services</th>
<th>Total Amount</th>
<th>Discount</th>
<th>Amount charged</th>
<th>payment_id</th>
<th>isRefund</th>
<th>Currency</th>
<th>Pay method</th>
<th>Payment status</th>
<th>Payment gateway</th>
</tr>
</thead>
<tbody>
{% if list %}
{% for i in list reversed %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{i.date}}</td>
<td>{{i.user_id__email}}</td>
<td>{{i.stage}}</td>
<td>{{i.services_used}}</td>
<td>{{i.total_amount}}</td>
<td>{{i.discount}}</td>
<td>{{i.amount_charged}}</td>
<td>{{i.payment_id}}</td>
<td>{{i.isRefund}}</td>
<td>{{i.currency}}</td>
<td>{{i.pay_method}}</td>
<td>{{i.payment_status}}</td>
<td>{{i.payment_gateway}}</td>
</tr>
{% endfor %}
{% endif %}
</tfoot>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
// ///////////////
$(".button").on("click", function () {
$('input:checked').not('.all').parents("tr").remove();
});
$('.all').on('click', function () {
var $inputs = $('table').find('input');
$inputs.prop('checked', 'checked');
});
</script>
<script>
$(document).ready(function () {
$('#example1').DataTable({
"pagingType": "full_numbers"
});
});
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
// ///////////////
$(".button").on("click", function () {
$('input:checked').not('.all').parents("tr").remove();
});
$('.all').on('click', function () {
var $inputs = $('table').find('input');
$inputs.prop('checked', 'checked');
});
</script>
<script>
$(document).ready(function () {
$('#example2').DataTable({
"pagingType": "full_numbers"
});
});
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
// ///////////////
$(".button").on("click", function () {
$('input:checked').not('.all').parents("tr").remove();
});
$('.all').on('click', function () {
var $inputs = $('table').find('input');
$inputs.prop('checked', 'checked');
});
</script>
</body>
</html>