I need a help to add filter option

Here you can find my code
https://github.com/fawwash/temp/blob/aff321e94a58fb80e82ae38c2ea5aad47f0b7d37/dashboard.php

<div>
  <label for="status_filter">Filter by status:</label>
  <select id="status_filter">
    <option value="All">All</option>
    <option value="Active">Active</option>
    <option value="Inactive">Inactive</option>
  </select>
</div>


<?php
if(isset($_GET['status'])){
  $status = $_GET['status'];
} else {
  $status = "Active";
}

if($status == "Active"){
  $query = "SELECT * FROM students WHERE status = 'Active'";
} elseif($status == "Inactive"){
  $query = "SELECT * FROM students WHERE status = 'Inactive'";
} else {
  $query = "SELECT * FROM students";
}
?>

In my dashboard I tried to set a filter option to filter the students data by their 'status' (All, Active, Inactive)

This is the output of my code:

Actually here the filter option is not working. When I select Active it shows all data, When I select Inactive it shows all data.

Expecting Output: I am expecting the filter should work like if we filter the Active, the active students list should display. If we filter Inactive, inactive students should display. If we filter All, then All (Active and Inactive) students data should visible. The data should be visible in the jquery dataTable. You can refer the github link to refer the full code.

You actually don't require a PHP script for filtering. You are already using a jQuery and JavaScript.

First of all, remove the below code from your script. It's not usable.

You have <select id="status_filter"> so while getting table data using ajax use it and send it to post data

"ajax": {
                "url": "students_data.php",
                "data": {
                    "teacher_id": "<?php echo $_SESSION['teacher_id']; ?>",
                    "status" : $("#status_filter").val();
                }
            },

Use the status in your query to filter the data.

Now you need to initialize the datatable script and assign a variable like below.

var table = $('#studentsTable').DataTable({
            "ajax": {
                "url": "students_data.php",
                "data": {
                    "teacher_id": "<?php echo $_SESSION['teacher_id']; ?>",
                    "status" : $("#status_filter").val();
                }
            },

Now inside $(document).ready(function() { what you can do it create a eventlistener for the status_filter when the value is being changed so that you can keep this below code and inside function you can simply reload the data of the datatable:

$("#status_filter").change(function() {
      table.ajax.reload();
});

For reference, I am sending you the entire ready function:

$(document).ready(function() {
        var table = $('#studentsTable').DataTable({
            "ajax": {
                "url": "students_data.php",
                "data": {
                    "teacher_id": "<?php echo $_SESSION['teacher_id']; ?>",
                    "status" : $("#status_filter").val();
                }
            },
            "columns": [
                { "data": "id" },
                { "data": "name" },
                { "data": "phone" },
                { "data": "email" },
                {
                    "data": "status",
                    "render": function(data, type, row, meta) {
                        if (data == 'Active') {
                            return '<span class="active">' + data + '</span>';
                        } else if (data == 'Inactive') {
                            return '<span class="inactive">' + data + '</span>';
                        } else {
                            return data;
                        }
                    }
                },
                {
                    "data": "id",
                    "render": function(data, type, row, meta) {
                        var status = row.status;
                        return '<button onclick="changeStatus(' + data + ', \'' + (status == 'Active' ? 'Inactive' : 'Active') + '\')" class="btn ' + (status == 'Active' ? 'btn-danger' : 'btn-success') + '">' + (status == 'Active' ? 'Terminate' : 'Activate') + '</button>';
                    }
                }
            ],
        });
        
        $("#status_filter").change(function() {
            table.ajax.reload();
        });
    });

Your students.php: where you need to add the status in the query for filtering the data.

<?php 
session_start();
$conn = mysqli_connect('localhost', 'root', '', 'mydatabase');
if (isset($_SESSION['username'])) {
    $teacher_id = $_SESSION['username'];
    $status = $_REQUEST['status'];
    $query = "SELECT * FROM students WHERE teacher_id IN ( SELECT teacher_id FROM teacher WHERE username = '$teacher_id') AND status = '".$status."'";
    $result = mysqli_query($conn, $query); $data = array();
    while (
        $row = mysqli_fetch_assoc($result)) { $data[] = $row;
    }
    echo json_encode(array("data" => $data));
} else
{
    header("Location: login.php"); exit();
} ?>