BBnepal-Accounts/application/views/teacher/leaves.php

<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">&times;</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">&times;</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>