<link rel="stylesheet" href="<?php echo base_url(); ?>assets_admin/css/jquery.dataTables.min.css"> <main class="common_margin" id="main"> <div class="main-wrap"> <div class="my-leaves-top"> <h1 class="my-leaves-heading">Student Leave Applications</h1> <!-- <button class="submit-btn">Apply Leave</button> --> </div> <?php if ($this->session->flashdata('success')) { ?> <div class="alert alert-success alert-dismissible fade show" role="alert"> <p><?php echo $this->session->flashdata('success') ?></p> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <?php } ?> <?php if ($this->session->flashdata('failed')) { ?> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <p><?php echo $this->session->flashdata('failed') ?></p> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <?php } ?> <!-- <div class="my-leaves-filter pt-4"> <div class="filter-head"> <img class="pb-0" src="../assets_teacher/images/filter-icon.svg" alt="" /> <h6 class="px-2">Filter</h6> </div> <div class="filter-selects"> <div class="form-group mx-3"> <label for="select-box" class="form-label leaves-filter-label" >Class</label > <select class="form-select select-box w-100" aria-label="Default select example" > <option selected>-Select-</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="form-group mx-3"> <label for="select-box" class="form-label leaves-filter-label" >Status</label > <select class="form-select select-box w-100" aria-label="Default select example" > <option selected>-Select-</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="form-group mx-3"> <div class="date-filter"> <div class="date-fil-row" id="startdate"> <label class="leaves-filter-label">From date</label> <input type="date" name="start" id="start" class="form-control" /> </div> <div class="date-fil-row" id="enddate" style="display: none"> <label>End date</label> <input type="date" name="end" id="end" class="form-control" /> </div> </div> </div> <div class="form-group mx-3"> <div class="date-filter"> <div class="date-fil-row" id="startdate"> <label class="leaves-filter-label">To Date</label> <input type="date" name="start" id="start" class="form-control" /> </div> <div class="date-fil-row" id="enddate" style="display: none"> <label>End date</label> <input type="date" name="end" id="end" class="form-control" /> </div> </div> </div> </div> </div> --> <div class="leaves-table"> <table class="table example text-center" id="tbl"> <thead> <tr> <th scope="col">Sl No</th> <th scope="col">Student Name</th> <th scope="col">Classroom</th> <th scope="col">From date</th> <th scope="col">To date</th> <th scope="col">Status</th> <th scope="col">Action</th> </tr> </thead> <tfoot class="text-center"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody> <?php if (!empty($leaves)) { ?> <?php foreach ($leaves as $key => $value) { ?> <tr> <th scope="row"><?= $key + 1 ?></th> <td><?= $value['name'] ?></td> <td><?= $value['classroom_name'] ?></td> <td><?= $value['from_date'] ?></td> <td><?= $value['to_date'] ?></td> <td><?= ucwords($value['status']) ?></td> <td class="icons-wrap"> <button class="submit-btn-table btn-sm"> <a href="<?= base_url() ?>teacher/view-leave/<?= $value['id'] ?>">View</a> </button> </td> </tr> <?php } } ?> </tbody> </table> </div> </div> </main> <script> $(document).ready(function() { $('#tbl').DataTable({ initComplete: function() { this.api().columns().every(function() { var column = this; var select = $('<select><option value="">Filter</option></select>') .appendTo($(column.footer()).empty()) .on('change', function() { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function(d, j) { select.append('<option value="' + d + '">' + d + '</option>') }); }); } }); }); </script>