根据下拉菜单中的选定值更改数据表值（CodeIgniter）

Question

so I have a datatable displaying all courses from the database and I want to sort the data using values from dropdown (which contains department of courses) I want to sort all courses depending on the selected department. For example, I selected ICT department, all courses from that department will be displayed on the data table. How will I do this?

Model:

 public function getCoursesByDepartment($DepartmentID)
    {
        $this->dbi->select('course.CourseCode, course.CourseTitle');
        $this->dbi->from('course');
        $this->dbi->where('course.DepartmentID', $DepartmentID);
        $res = $this->dbi->get()->result();

        return $res;
    }



public function get_departments() { 
        $result = $this->dbi->select('DepartmentID, DepartmentName')->get('department')->result_array(); 

        $DepartmentID = array(); 
        foreach($result as $r) { 
            $DepartmentID[$r['DepartmentID']] = $r['DepartmentName']; 
        } 

        $DepartmentID[''] = 'Select Department...'; 
        return $DepartmentID; 
    } 

Controller:

 public function getcoursesbydepartment()
 {

        $this->load->model('Admin_model');
        $allcourses = $this->Admin_model->getCoursesByDepartment($DepartmentID);
        $data['courses'] = $allcourses;
        $this->load->view('Admin/managecourses_view', $data);


     }

 public function getcourses() 
{ 
    $data['DepartmentID'] = $this->Admin_model->get_departments(); 
    $this->load->view('Admin/addcourse_view', $data); 
} 

In my view, my dropdown are populated with values from the database. View:

  <div class="card-pf-body" style="margin-top: 5px;">

      <form class="needs-validation" novalidate >


   <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom03"  style="margin-top: 15px!important;margin-left: -20px!important">Sort by department:</label>

        <div class="panel-body" style="margin-left: -36px;margin-top: -15px;"> 
                <!--dropdown input--> 

       <!--HERE IS MY DROPDOWN (VALUES RETRIEVED FROM DATABASE)-->

        <?php echo form_dropdown('DepartmentID', $DepartmentID, '', 'class="form-control"', 'name="DepartmentID"', '#', 'id=departmentid', (isset($_POST['DepartmentID']) ? $_POST['DepartmentID'] : ''), 'id="DepartmentID"') ?>



            </div> 
    </div>    

     <div class="col-md-4 mb-3">

    </div>    
  </div>


   <p style="margin-top: 20px;margin-right: 1000px;margin-left: 5px;width: 80px;margin-bottom: 10px"><font style="color: #ffffff">p</font></p>

</form>

    <table class="table table-responsive table-bordered table-striped" id="example"> 
      <thead>
    <tr>
      <th>Course</th>
      <th>Title</th>
     <!--  <th>Description</th> -->

      <th>Option</th>
    </tr>
    </thead>
    <?php 
    $i = 0;
    foreach ($courses AS $course): ?>
    <tr>

      <td><?php echo $course->CourseCode; ?></td>
      <td><?php echo $course->CourseTitle; ?></td>

    <!--   <td><a href="<?php echo $course->CourseDescription; ?>">View Description</a></td> -->
      <!-- <td><?php echo $course->CourseDescription; ?></td> -->
      <td>
        <a href="#"" onClick="editcourse(<?php echo $course->CourseID;?>)">Edit<i class="fa fa-pencil" style="margin-left: 5px"></i></a>  

       <!--  <button class="btn btn-primary" onclick="editcourse(<?php echo $course->CourseID;?>)"><i class="glyphicon glyphicon-remove"></i></button> -->

        &nbsp; |    &nbsp;
       <a href="#" onClick="deletecourse(<?php echo $course->CourseID;?>)"><font style="color: #D2553D;">Delete</font><i class="fa fa-times" style="margin-left: 5px;color: #D2553D;"></i></a>

      </td>
    </tr>
   <?php endforeach; ?> 
    </table>
  </div>
  </div>
</div>



<script>
  $(document).ready(function() {
    // matchHeight the contents of each .card-pf and then the .card-pf itself
    $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
    $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();

    // Initialize the vertical navigation
    $().setupVerticalNavigation(true);
  });
</script>

<script type="text/javascript">
   $(document).ready(function() {

    $('#example').DataTable();
} );
 </script>

Answer 1

Basically you want to render the page with all options and then, on select change, redirect the user to the same page with an additional url attribute /somepage/{someid}

// [CONTROLLER]
// specific department: /getcoursesbydepartment/{dept_id}
// all departments:     /getcoursesbydepartment/
public function getcoursesbydepartment($DepartmentID = null) {
    $this->load->model('Admin_model');
    $data['departments'] = $this->Admin_model->get_departments();
    $data['courses'] = $this->Admin_model->getCoursesByDepartment($DepartmentID);
    $data['selected_department'] = $DepartmentID; // added
    $this->load->view('Admin/managecourses_view', $data);
}

This necessitates a change in your model code:

Note: I've added so the function returns null if there are no results, this is generally a good practice (to either return null, false or an empty array() ). Otherwise, result() and foreach in view will fail if there are no rows.

public function getCoursesByDepartment($DepartmentID = null) {
    $this->dbi->select('course.CourseCode, course.CourseTitle');
    $this->dbi->from('course');
    if (!is_null($DepartmentID)) {
        $this->dbi->where('course.DepartmentID', $DepartmentID);
    }
    $query = $this->dbi->get();
    if ($query->num_rows() < 1) {
        return null;
    }
    return $query->result();
}

Your dropdown code also looked a bit off, I fixed it and added the selected department as the value to be selected. As you will note, if nothing is selected the value will be null according to the controller code.

//https://www.codeigniter.com/userguide3/helpers/form_helper.html#form_dropdown
//form_dropdown([$name = ''[, $options = array()[, $selected = array()[, $extra = '']]]])
echo form_dropdown('DepartmentID', $departments, $selected_department, 'class="form-control" id="DepartmentID"');

The $DepartmentID variable should be an array that looks like:

array('93'=>'HR', '21'=>'Marketing') where the numbers are the department id's (UPDATE: it looks like you are doing that right).

Now all you have to do is, using js or jquery, on select change redirect to: /getcoursesbydepartment/{dept_id} where {dept_id} is the value of the select box.