EVOLUTION-NINJA
Edit File: profile.php
<?php echo view('includes/sidebar'); ?> <script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <script src="<?php echo base_url('public/assets/toastr/toastr.min.js');?>"></script> <link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css');?>"> <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> <style> /* Table container */ .dataTables_wrapper { font-family: Arial, sans-serif; font-size: 14px; margin: 20px 0; } /* Table headers */ .dataTable thead th { background-color: #1B344F; color: white; font-weight: bold; text-align: center; border: 1px solid #dddddd; } /* Table rows */ .dataTable tbody tr { background-color: #f9f9f9; } .dataTable tbody tr:nth-child(even) { background-color: #f1f1f1; } .dataTable tbody tr:hover { background-color: #eaf3fc; cursor: pointer; } /* Table cells */ .userTable tbody td { text-align: center; padding: 10px; border: 1px solid #dddddd; } /* Table footer */ .userTable tfoot th { background-color: #f2f2f2; color: #333; text-align: center; padding: 8px; } /* Pagination controls */ .dataTables_wrapper .dataTables_paginate { margin: 10px 0; } .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 6px 12px; margin-left: 2px; border: 1px solid #dddddd; background-color: #ffffff; color:#1B344F; border-radius: 4px; cursor: pointer; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color:#1B344F; color: white; } /* Active pagination button */ .dataTables_wrapper .dataTables_paginate .paginate_button.current { background-color:#1B344F; color: white; border: 1px solid:#1B344F; } /* Search box */ .dataTables_wrapper .dataTables_filter input { margin-left: 8px; padding: 6px 10px; border: 1px solid #cccccc; border-radius: 4px; } /* Length dropdown */ .dataTables_wrapper .dataTables_length select { margin-left: 8px; padding: 6px 10px; border: 1px solid #cccccc; border-radius: 4px; } /* Information text */ .dataTables_wrapper .dataTables_info { margin: 10px 0; font-size: 12px; color: #555; } .approve-btn{ padding:5px; border-radius: 4px; color:white; background-color:#198754; margin-left:40px; border-color:grey; } .delete-btn{ padding:5px 10px; border-radius: 4px; color:white; background-color:maroon; margin-left:70px; border-color:grey; } /* Responsive Table */ @media screen and (max-width: 768px) { .container { padding: 10px; } #datatable { font-size: 14px; } } </style> <section class="home-section fullpage"> <div class="home-content"> <i class='bx bx-menu'></i> <!-- <span class="text">Drop Down Sidebar</span> --> </div> <!-- heading row --> <div class="row m-0"> <div class="col-sm-12"> <h1 class="crt-pjt">User Management</h1> </div> </div> <!-- Modal Structure --> <div class="container"> <table id="userTable"> <thead> <tr> <th>SL No.</th> <th>ID</th> <th>User Code</th> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Referral Code</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </section> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet"> <script> $(document).ready(function() { var table = $('#userTable').DataTable({ "processing": false, "serverSide": true, "ajax": { "url": "<?php echo base_url('getPendingUsers') ?>", "type": "POST", "dataSrc": function (json) { console.log(json); // Log the server response return json.data; // Ensure it returns an array of rows } }, "columns": [ { "data": null, "render": function(data, type, row, meta) { return meta.row + 1; } }, { "data": "id", visible: false }, { "data": "user_code" }, { "data": "name" }, { "data": "email" }, { "data": "phone" }, { "data": "referral_code" }, { "data": "status" }, { "data": "id", "render": function(data, type, row) { var deleteButton = '<button class="delete-btn" data-id="'+data+'">Delete</button>'; var approveButton = '<button class="approve-btn" data-id="'+data+'">Approve</button>'; // var pendingButton = '<button class="pending-btn" data-id="'+data+'">Pending</button>'; return '<div>' + deleteButton + approveButton + '</div>'; } } ], "rowCallback": function(row, data, index) { // Serial number $('td:eq(0)', row).html(index + 1); }, "language": { "emptyTable": "No data available" } }); }); </script> <script> $(document).ready(function() { var userId; $('#userTable').on('click', '.approve-btn', function() { userId = $(this).data('id'); $.ajax({ url: '<?php echo base_url('approveUser') ?>', method: 'POST', data: { id: userId}, success: function(response) { alert(response.message); $('#approvalModal').hide(); table.ajax.reload(); } }); }); }); </script> <script> $(document).ready(function() { var userId; $('#userTable').on('click', '.delete-btn', function() { userId = $(this).data('id'); // alert(userId); $.ajax({ url: '<?php echo base_url('deleteUser') ?>', method: 'POST', data: { id: userId}, success: function(response) { alert(response.message); table.ajax.reload(); } }); }); }); </script> <script> let arrow = document.querySelectorAll(".arrow"); for (var i = 0; i < arrow.length; i++) { arrow[i].addEventListener("click", (e) => { let arrowParent = e.target.parentElement.parentElement; arrowParent.classList.toggle("showMenu"); }); } let sidebar = document.querySelector(".sidebar"); let sidebarBtn = document.querySelector(".bx-menu"); console.log(sidebarBtn); sidebarBtn.addEventListener("click", () => { sidebar.classList.toggle("close"); }); </script> <?php echo view('includes/footer'); ?>