Change data table values based on selected value from dropdown (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>

In your controller, where is $DepartmentID defined? I just see it referenced. — Alex
– Alex, Commented Feb 7, 2018 at 3:58

Alex · Accepted Answer · 2018-02-07 05:13:07Z

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.

edited Feb 7, 2018 at 5:13

answered Feb 7, 2018 at 4:57

Alex

9,2758 gold badges43 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Aira Veronica Dizon Over a year ago

A PHP Error was encountered Severity: Notice Message: Undefined variable: selected_department Filename: Admin/managecourses_view.php Line Number: 1244

Aira Veronica Dizon Over a year ago

why is selected_department not recognized by the view?

Alex Over a year ago

does your controller look exactly like mine? e.g. $data['selected_department'] = $DepartmentID; and public function getcoursesbydepartment($DepartmentID = null)?

Aira Veronica Dizon Over a year ago

What should be the value of the department id here? $data['selected_department'] = $DepartmentID;

Alex Over a year ago

$DepartmentID comes from the url see: getcoursesbydepartment($DepartmentID = null) usage: /getcoursesbydepartment/{dept_id} ... When /getcoursesbydepartment/123, department id is 123

|

Collectives™ on Stack Overflow

Change data table values based on selected value from dropdown (CodeIgniter)

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related